/* Generated by npm run converter-css:build. */
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter,system-ui,-apple-system,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.page-credit-picker-backdrop{position:fixed;inset:0;z-index:40;background:rgba(15,23,42,.22);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.page-credit-picker{position:absolute;top:calc(100% + .75rem);right:0;z-index:50;width:min(24rem,calc(100vw - 2rem));max-height:min(34rem,calc(100vh - 2rem));max-height:min(34rem,calc(100dvh - 2rem));overflow-y:auto;overscroll-behavior:contain;border:1px solid #cbd5e1;border-radius:1.25rem;background:#fff;padding:1.25rem;box-shadow:0 24px 60px rgba(15,23,42,.24)}.page-credit-preset-price,.page-credit-preset-quantity{display:block}.page-credit-preset-quantity{color:#1a2e4a;font-size:.875rem;font-weight:700}.page-credit-preset-price{margin-top:.25rem;color:#64748b;font-size:.75rem}[hidden].page-credit-dashboard-action,[hidden].page-credit-picker,[hidden].page-credit-picker-backdrop{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.bottom-0{bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-2{margin-bottom:.5rem}.mb-6{margin-bottom:1.5rem}.mt-1{margin-top:.25rem}.mt-3{margin-top:.75rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-cell{display:table-cell}.table-row{display:table-row}.grid{display:grid}.hidden{display:none}.h-4{height:1rem}.h-5{height:1.25rem}.h-full{height:100%}.w-4{width:1rem}.w-5{width:1.25rem}.w-full{width:100%}.min-w-0{min-width:0}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.resize{resize:both}.snap-start{scroll-snap-align:start}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.self-start{align-self:flex-start}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-b-xl{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.bg-black\/60{background-color:rgba(0,0,0,.6)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.object-cover{-o-object-fit:cover;object-fit:cover}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-center{text-align:center}.font-devanagari{font-family:Noto Sans Devanagari,sans-serif}.text-\[10px\]{font-size:10px}.text-\[9px\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-accent-orange-dark{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-brand{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-brand-dark{--tw-text-opacity:1;color:rgb(26 46 74/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-success{--tw-ring-opacity:1;--tw-ring-color:rgb(34 197 94/var(--tw-ring-opacity,1))}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@media (max-height:760px),(max-width:48rem){.page-credit-picker{position:fixed;top:auto;right:auto;bottom:max(.5rem,env(safe-area-inset-bottom));left:50%;width:min(calc(100vw - 1rem),26rem);max-height:calc(100vh - 1rem - env(safe-area-inset-bottom));max-height:calc(100dvh - 1rem - env(safe-area-inset-bottom));border-radius:1.25rem;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom));transform:translateX(-50%)}}@media (prefers-reduced-motion:reduce){.page-credit-dashboard-action,.page-credit-picker,.page-credit-preset{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.hover\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ---- CSS Custom Properties ---- */
:root {
  --color-brand: #2563eb;
  --color-brand-dark: #1a2e4a;
  --color-accent: #f97316;
  --color-surface: #f8fafc;
  --color-surface-alt: #f1f5f9;
  --radius-card: 1.25rem;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 8px 32px rgba(37,99,235,0.1), 0 2px 8px rgba(0,0,0,0.04);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #0d1b24; }

/* ---- FAQ accordion ---- */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.faq-answer.open { max-height: 500px; transition: max-height 0.5s ease-in; }
.faq-chevron { transition: transform 0.3s ease; }
.faq-chevron.open { transform: rotate(180deg); }

/* ---- Animations ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Mobile menu ---- */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.mobile-menu.open { max-height: 400px; }

/* ---- Form focus ---- */
input:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* ---- Demo styles ---- */
.demo-dropzone {
  border: 1px solid rgba(59,130,246,0.2);
  background: rgba(59,130,246,0.02);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.02), 0 10px 30px rgba(0,0,0,0.03);
  transition: border-color 0.3s, background-color 0.3s, transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
}
.demo-dropzone:hover {
  transform: scale(1.01);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.02), 0 14px 36px rgba(0,0,0,0.05);
  border-color: rgba(59,130,246,0.35);
}
.demo-dropzone::after {
  content: '\0905';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Noto Sans Devanagari', 'Inter', sans-serif;
  font-size: 180px;
  opacity: 0.02;
  color: var(--color-brand-dark);
  pointer-events: none;
  z-index: 0;
}
.demo-dropzone > * { position: relative; z-index: 1; }
.demo-dropzone.drag-over { border-color: #2563eb; background-color: #eff6ff; transform: scale(1.01); }
.demo-dropzone.has-file { border-color: #22c55e; background-color: #f0fdf4; }

.demo-progress-track { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.demo-progress-fill {
  height: 100%; border-radius: 3px; transition: width 0.4s ease; width: 0%;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 40%, #60a5fa 50%, #3b82f6 60%, #2563eb 100%);
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.demo-step { opacity: 0.4; transition: opacity 0.3s; }
.demo-step.active { opacity: 1; }
.demo-step.done { opacity: 1; }

@keyframes pulse-slow { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.demo-toggle div, .demo-toggle-orange div {
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.demo-toggle div:hover, .demo-toggle-orange div:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.demo-toggle input:checked + div { border-color: #2563eb; background-color: #eff6ff; color: #1a2e4a; box-shadow: 0 2px 8px rgba(37,99,235,0.12); }
.demo-toggle-orange input:checked + div { border-color: #f97316; background-color: #fff7ed; color: #9a3412; box-shadow: 0 2px 8px rgba(249,115,22,0.12); }

.demo-card {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 12px 40px rgba(37,99,235,0.08);
  transition: box-shadow 0.3s ease;
  background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
  position: relative;
}
.demo-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: inherit;
  opacity: 0.3;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}
.demo-card:hover {
  box-shadow: 0 20px 48px -12px rgba(37, 99, 235, 0.18), 0 4px 8px -2px rgba(0,0,0,0.05);
}

@keyframes confetti-pop {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes step-check { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.demo-step.done .step-check { animation: step-check 0.3s ease forwards; }

/* ---- Bento grid ---- */

/* ---- Pipeline ---- */
.pipeline-line {
  height: 2px;
  background-image: repeating-linear-gradient(90deg, var(--color-brand) 0, var(--color-brand) 8px, transparent 8px, transparent 16px);
  background-size: 16px 2px;
}
.pipeline-line.animate-flow {
  animation: pipeline-flow 1s linear infinite;
}
@keyframes pipeline-flow { to { background-position: 16px 0; } }

/* ---- Scroll animations ---- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- FAQ left border accent ---- */
.faq-item { border-left: 3px solid transparent; transition: border-color 0.3s ease; }
.faq-item.faq-open { border-left-color: var(--color-brand); }

/* ---- SSE Progress: Ring animations ---- */
@keyframes ring-enter {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

@keyframes ring-spin {
  0%   { transform: rotate(-90deg); }
  100% { transform: rotate(270deg); }
}
.ring-indeterminate svg {
  animation: ring-spin 1.4s linear infinite;
}
.ring-indeterminate .ring-progress {
  stroke-dasharray: 69 207; /* ~25% of 276 visible */
}
.ring-determinate svg {
  animation: none;
  transform: rotate(-90deg);
}
.ring-determinate .ring-progress {
  transition: stroke-dashoffset 0.6s ease-out, stroke 0.3s ease;
}

/* ---- SSE Progress: Thumbnail animations ---- */
@keyframes demo-thumb-enter {
  0%   { opacity: 0; transform: scale(0.85) translateY(10px); }
  100% { opacity: 1; transform: scale(1)    translateY(0);    }
}
.demo-thumb-enter {
  animation: demo-thumb-enter 0.35s ease-out forwards;
}

.demo-thumb-ring {
  transition: stroke-dashoffset 0.5s ease-out, stroke 0.3s ease;
}

/* ---- SSE Progress: Badge and step animations ---- */
@keyframes badge-pop {
  0%   { transform: scale(0);   }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1);   }
}

@keyframes thinking-pulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1;   }
}

.demo-step-connector {
  background-color: #d1d5db;
  transition: background-color 0.3s ease;
}
.demo-step-connector.filled {
  background-color: #22c55e;
}

/* ---- SSE Progress: Spinner ---- */
.spinner {
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  width: 16px; height: 16px;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- SSE Progress: Dashboard-specific styles ---- */

/* ---- Page-range selection controls (T72) ---- */
.demo-range-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-top: 4px;
}
.demo-range-meta {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}
.demo-range-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.demo-range-pages-label {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}
.demo-range-input {
  width: 52px;
  min-height: 44px;
  border: 2px solid #e2e8f0;
  border-radius: 9px;
  padding: 7px 6px;
  color: #1a2e4a;
  font-weight: 700;
  text-align: center;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -moz-appearance: textfield;
}
.demo-range-input::-webkit-outer-spin-button,
.demo-range-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.demo-range-input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.demo-range-input[aria-invalid="true"] {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.demo-range-dash {
  color: #94a3b8;
  font-weight: 400;
  font-size: 14px;
  user-select: none;
}
.demo-range-count {
  color: #15803d;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.demo-range-invalid {
  display: block;
  font-size: 12px;
  color: #b91c1c;
  font-weight: 600;
  margin-top: 4px;
  padding: 4px 0;
}
.demo-range-error {
  font-size: 12px;
  color: #b91c1c;
  font-weight: 500;
  margin-top: 2px;
  display: none;
}
.demo-range-manual-note {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
  max-width: 320px;
  line-height: 1.4;
}
.demo-remove-file {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.demo-remove-file:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

/* ---- Accessibility: respect reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ring-indeterminate svg { animation: none !important; transform: rotate(-90deg); }
  .ring-indeterminate .ring-progress { stroke-dasharray: 69 207; }
  .demo-thumb-ring { transition: none !important; }
  .ring-determinate .ring-progress { transition: none !important; }
}
body.focused-converter-page {
  --focus-brand: var(--color-brand, #2563eb);
  --focus-brand-light: #3b82f6;
  --focus-brand-dark: var(--color-brand-dark, #1a2e4a);
  --focus-text: #0f172a;
  --focus-copy: #475569;
  --focus-muted: #64748b;
  --focus-line: #e2e8f0;
  --focus-surface: var(--color-surface, #f8fafc);
  --focus-surface-alt: var(--color-surface-alt, #f1f5f9);
  --focus-blue-soft: #eff6ff;
  --focus-green: #15803d;
  --focus-green-soft: #f0fdf4;
  --focus-red: #b91c1c;
  --focus-code: #0f172a;
  margin: 0;
  overflow-x: hidden;
  background: var(--focus-surface);
  color: var(--focus-copy);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.focused-converter-page,
.focused-converter-page *,
.focused-converter-page *::before,
.focused-converter-page *::after {
  box-sizing: border-box;
}

.focused-converter-page [id] {
  scroll-margin-top: 80px;
}

.focused-converter-page h1,
.focused-converter-page h2,
.focused-converter-page h3 {
  color: var(--focus-brand-dark);
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
}

.focused-converter-page [lang="mr"],
.focused-converter-page .font-devanagari {
  font-family: "Noto Sans Devanagari", "Inter", sans-serif;
}

.focused-converter-page a {
  color: inherit;
}

.focused-converter-page .page-wrap {
  width: min(calc(100% - 40px), 1180px);
  margin-inline: auto;
}

.focused-converter-page .skip-link {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff;
  color: var(--focus-brand-dark);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
}

.focused-converter-page .skip-link:focus {
  top: 12px;
}

.focused-converter-page .site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  border-bottom: 1px solid rgba(226, 232, 240, .72);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.focused-converter-page .nav-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.focused-converter-page .brand,
.focused-converter-page .footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--focus-brand-dark);
  text-decoration: none;
}

.focused-converter-page .brand img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.focused-converter-page .brand-copy {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.focused-converter-page .brand-copy strong {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 20px;
  line-height: 1;
}

.focused-converter-page .brand-copy small {
  color: #94a3b8;
  font-size: 12px;
}

.focused-converter-page .nav-links,
.focused-converter-page .nav-actions {
  display: flex;
  align-items: center;
}

.focused-converter-page .nav-links {
  gap: 28px;
  margin-left: auto;
}

.focused-converter-page .nav-actions {
  gap: 12px;
}

.focused-converter-page .nav-links a,
.focused-converter-page .login-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.focused-converter-page .nav-links .nav-demo-link {
  min-height: 32px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--focus-blue-soft);
  color: var(--focus-brand);
  font-weight: 700;
}

.focused-converter-page .nav-links a:hover {
  color: var(--focus-brand-dark);
}

.focused-converter-page .nav-auth-action {
  gap: 7px;
  padding: 9px 18px;
  border-radius: 8px;
  background: var(--focus-brand-dark);
  color: #fff;
  font-weight: 700;
}

.focused-converter-page .nav-auth-action:hover {
  background: #172554;
  color: #fff;
}

.focused-converter-page .nav-auth-action svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.focused-converter-page .mobile-nav {
  display: none;
  position: relative;
}

.focused-converter-page .mobile-nav summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  list-style: none;
}

.focused-converter-page .mobile-nav summary:hover {
  background: var(--focus-surface-alt);
}

.focused-converter-page .mobile-nav summary::-webkit-details-marker {
  display: none;
}

.focused-converter-page .mobile-nav summary svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.focused-converter-page .mobile-nav-panel {
  position: absolute;
  right: 0;
  top: 50px;
  width: min(230px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--focus-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .16);
}

.focused-converter-page .mobile-nav-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--focus-brand-dark);
  font-weight: 600;
  text-decoration: none;
}

.focused-converter-page .mobile-nav-panel a:hover {
  background: var(--focus-blue-soft);
}

.focused-converter-page .button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease;
}

.focused-converter-page .button:hover {
  transform: translateY(-1px);
}

.focused-converter-page .button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.focused-converter-page .button-primary {
  background: linear-gradient(90deg, #2563eb, #1e40af);
  color: #fff;
  box-shadow: 0 9px 22px rgba(37, 99, 235, .22);
}

.focused-converter-page .button-primary:hover {
  color: #fff;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .3);
}

.focused-converter-page .button-primary:disabled {
  background: #cbd5e1;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.focused-converter-page .button-success {
  background: var(--focus-green);
  color: #fff;
  box-shadow: 0 9px 22px rgba(21, 128, 61, .18);
}

.focused-converter-page .focused-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 48px 0 72px;
  background: linear-gradient(160deg, #f8fafc 0%, #f0f4ff 50%, #f8fafc 100%);
}

.focused-converter-page .focused-hero .hero-glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(56% 38% at 50% 12%, rgba(59, 130, 246, .15), transparent 74%),
    radial-gradient(32% 32% at 8% 74%, rgba(147, 197, 253, .13), transparent 78%);
  pointer-events: none;
}

.focused-converter-page .focused-hero .hero-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .2;
  pointer-events: none;
}

.focused-converter-page .focused-hero-inner {
  position: relative;
  z-index: 1;
}

.focused-converter-page .hero-copy {
  max-width: 820px;
  margin: 0 auto 32px;
  text-align: center;
}

.focused-converter-page .eyebrow {
  width: fit-content;
  margin: 0 auto 18px;
  padding: 7px 14px;
  border: 1px solid rgba(147, 197, 253, .62);
  border-radius: 999px;
  background: rgba(239, 246, 255, .88);
  color: var(--focus-brand-dark);
  box-shadow: 0 0 24px rgba(37, 99, 235, .08);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}

.focused-converter-page .hero h1 {
  max-width: 800px;
  margin: 0 auto;
  font-size: clamp(2.45rem, 5.4vw, 3.65rem);
  line-height: 1.07;
  letter-spacing: -.035em;
}

.focused-converter-page .hero-lead {
  max-width: 720px;
  margin: 18px auto 0;
  color: #64748b;
  font-size: 19px;
  line-height: 1.6;
}

.focused-converter-page .trust-line {
  margin: 12px 0 0;
  color: #94a3b8;
  font-size: 14px;
  font-weight: 600;
}

.focused-converter-page .demo-counter,
.focused-converter-page #demo-counter {
  min-height: 36px;
  margin: 14px auto 0;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: var(--focus-brand-dark);
  font-size: 13px;
  font-weight: 700;
}

.focused-converter-page .demo-counter svg,
.focused-converter-page #demo-counter svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.focused-converter-page .converter-shell {
  width: min(100%, 860px);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(191, 219, 254, .75);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06), 0 18px 46px rgba(37, 99, 235, .12);
}

.focused-converter-page .converter-shell:hover {
  box-shadow: 0 20px 52px rgba(37, 99, 235, .16), 0 4px 10px rgba(15, 23, 42, .05);
}

.focused-converter-page .converter-heading {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--focus-line);
  background: rgba(255, 255, 255, .84);
}

.focused-converter-page .converter-heading strong {
  color: var(--focus-brand-dark);
  font-size: 16px;
}

.focused-converter-page .fixed-format {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
}

.focused-converter-page .fixed-format > span {
  min-width: 38px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--focus-blue-soft);
  color: var(--focus-brand);
  font-size: 11px;
}

.focused-converter-page .converter-state {
  padding: 26px;
}

.focused-converter-page .markdown-dropzone {
  min-height: 258px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 28px;
  border: 1px dashed rgba(59, 130, 246, .38);
  border-radius: 16px;
  background: rgba(248, 250, 252, .78);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .02), 0 10px 30px rgba(0, 0, 0, .03);
  transition: transform .2s ease;
}

.focused-converter-page .markdown-dropzone::after {
  content: "\0905";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  color: var(--focus-brand-dark);
  font-family: "Noto Sans Devanagari", "Inter", sans-serif;
  font-size: 180px;
  opacity: .02;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.focused-converter-page .markdown-dropzone > * {
  position: relative;
  z-index: 1;
}

.focused-converter-page .markdown-dropzone:hover,
.focused-converter-page .markdown-dropzone.drag-over {
  border-color: rgba(37, 99, 235, .68);
  background: #eff6ff;
  transform: scale(1.006);
}

.focused-converter-page .markdown-dropzone.has-file {
  border-color: #86efac;
  background: var(--focus-green-soft);
}

.focused-converter-page .dropzone-empty {
  width: 100%;
  text-align: center;
}

.focused-converter-page .upload-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 17px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: var(--focus-brand-dark);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .08);
}

.focused-converter-page .upload-icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.focused-converter-page .dropzone-empty h2 {
  margin: 0;
  font-size: 21px;
  letter-spacing: -.01em;
}

.focused-converter-page .dropzone-empty > p {
  margin: 5px 0 16px;
  color: #94a3b8;
  font-size: 14px;
}

.focused-converter-page .choose-files {
  min-width: 220px;
  cursor: pointer;
}

.focused-converter-page .dropzone-empty .drop-hint {
  margin: 10px 0 0;
  font-size: 12px;
}

.focused-converter-page .selected-files {
  width: 100%;
}

.focused-converter-page .file-list {
  max-height: 280px;
  display: grid;
  gap: 9px;
  overflow-y: auto;
}

.focused-converter-page .file-list > div {
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(15, 23, 42, .04);
}

.focused-converter-page .add-files-button,
.focused-converter-page .secondary-command {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--focus-brand);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.focused-converter-page .add-files-button {
  margin-top: 10px;
}

.focused-converter-page .add-files-button svg,
.focused-converter-page .secondary-command svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.focused-converter-page .demo-range-input {
  border-radius: 10px;
}

.focused-converter-page .converter-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 14px 3px 0;
  color: #64748b;
  font-size: 13px;
}

.focused-converter-page .converter-details span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.focused-converter-page .converter-details svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--focus-green);
  stroke-width: 2.5;
}

.focused-converter-page .convert-button {
  width: 100%;
  margin-top: 16px;
}

.focused-converter-page #demo-idle:has(#demo-dropzone:not(.has-file)) #demo-convert-btn {
  display: none;
}

.focused-converter-page .runtime-alert,
.focused-converter-page .runtime-notice {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #fecaca;
  border-radius: 12px;
  background: #fff7f7;
  color: var(--focus-red);
  font-size: 14px;
  font-weight: 600;
}

.focused-converter-page .runtime-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.focused-converter-page .runtime-alert svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.focused-converter-page .runtime-notice {
  border-color: #bfdbfe;
  background: var(--focus-blue-soft);
  color: #1e3a5f;
}

.focused-converter-page .state-centered {
  min-height: 410px;
  text-align: center;
}

.focused-converter-page .state-centered h2 {
  margin: 16px 0 6px;
  font-size: 28px;
}

.focused-converter-page .state-copy {
  margin: 0 auto;
  color: var(--focus-muted);
}

.focused-converter-page .runtime-ring,
.focused-converter-page .error-ring {
  position: relative;
  width: 112px;
  height: 112px;
  margin: 10px auto 0;
  display: grid;
  place-items: center;
}

.focused-converter-page .ring-svg,
.focused-converter-page .error-ring > svg:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.focused-converter-page .ring-center-icon,
.focused-converter-page .error-x {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.focused-converter-page .ring-success {
  color: var(--focus-green);
}

.focused-converter-page .ring-error,
.focused-converter-page .error-x {
  color: var(--focus-red);
}

.focused-converter-page .ring-percent {
  color: var(--focus-brand-dark);
  font-weight: 800;
}

.focused-converter-page .runtime-steps {
  max-width: 560px;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: 70px 1fr 70px 1fr 70px 1fr 70px;
  align-items: start;
}

.focused-converter-page .runtime-steps .demo-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--focus-muted);
  font-size: 12px;
  font-weight: 700;
}

.focused-converter-page .runtime-steps .demo-step > div {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e2e8f0;
}

.focused-converter-page .runtime-steps .demo-step.active > div {
  background: var(--focus-blue-soft);
  color: var(--focus-brand);
}

.focused-converter-page .runtime-steps .demo-step.done > div {
  background: #22c55e;
  color: #fff;
}

.focused-converter-page .runtime-steps svg {
  grid-area: 1/1;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.focused-converter-page .demo-step-connector {
  height: 2px;
  margin-top: 17px;
  background: #dbe3ed;
}

.focused-converter-page .runtime-thumbnails {
  max-width: 440px;
  margin: 22px auto 0;
  display: flex;
  gap: 12px;
  overflow-x: auto;
}

.focused-converter-page .result-icon,
.focused-converter-page .limit-icon {
  width: 70px;
  height: 70px;
  margin: 8px auto 0;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--focus-green-soft);
  color: var(--focus-green);
  box-shadow: 0 6px 18px rgba(21, 128, 61, .1);
}

.focused-converter-page .limit-icon {
  background: var(--focus-blue-soft);
  color: var(--focus-brand-dark);
  box-shadow: 0 6px 18px rgba(37, 99, 235, .1);
}

.focused-converter-page .result-icon svg,
.focused-converter-page .limit-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.focused-converter-page .result-download {
  min-width: 220px;
  margin-top: 20px;
}

.focused-converter-page .result-meta {
  margin: 12px 0 0;
  color: var(--focus-muted);
  font-size: 13px;
}

.focused-converter-page .result-summary {
  margin: 6px 0 0;
  color: var(--focus-brand-dark);
  font-weight: 700;
}

.focused-converter-page .terminal-account-states {
  max-width: 570px;
  margin: 24px auto 0;
}

.focused-converter-page .result-next-step {
  padding: 22px;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  box-shadow: 0 8px 24px rgba(37, 99, 235, .08);
}

.focused-converter-page .result-next-step strong {
  color: var(--focus-brand-dark);
  font-size: 17px;
}

.focused-converter-page .result-next-step p {
  max-width: 470px;
  margin: 5px auto 15px;
  color: var(--focus-muted);
  font-size: 14px;
}

.focused-converter-page .text-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--focus-brand);
  font-weight: 700;
}

.focused-converter-page .secondary-command {
  margin: 10px auto 0;
}

.focused-converter-page .result-thumbnail {
  width: 110px;
  height: 145px;
  margin: 16px auto;
  overflow: hidden;
  border: 1px solid var(--focus-line);
  border-radius: 12px;
}

.focused-converter-page .result-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.focused-converter-page .error-ring {
  margin-top: 6px;
}

.focused-converter-page .error-x {
  position: relative;
  z-index: 1;
}

.focused-converter-page #demo-error-state .runtime-alert {
  max-width: 560px;
  margin-inline: auto;
  justify-content: center;
}

.focused-converter-page .content-band {
  padding: 88px 0;
  background: #fff;
}

.focused-converter-page .band-muted {
  background: var(--focus-surface-alt);
}

.focused-converter-page .section-heading {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.focused-converter-page .section-heading h2,
.focused-converter-page .support-grid h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.45rem);
  line-height: 1.18;
}

.focused-converter-page .section-heading p,
.focused-converter-page .support-grid > div > p {
  margin: 11px 0 0;
  color: var(--focus-muted);
}

.focused-converter-page .workflow-list,
.focused-converter-page .use-case-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.focused-converter-page .workflow-list article,
.focused-converter-page .use-case-list article {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--focus-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(37, 99, 235, .06);
  transition: transform .2s ease;
}

.focused-converter-page .workflow-list article:hover,
.focused-converter-page .use-case-list article:hover {
  transform: translateY(-2px);
}

.focused-converter-page .workflow-list article > span,
.focused-converter-page .use-case-list article > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff;
  font-weight: 800;
}

.focused-converter-page .use-case-list article > span {
  background: var(--focus-blue-soft);
  color: var(--focus-brand-dark);
}

.focused-converter-page .workflow-list h3,
.focused-converter-page .use-case-list h3 {
  margin: 17px 0 6px;
  font-size: 19px;
}

.focused-converter-page .workflow-list p,
.focused-converter-page .use-case-list p {
  margin: 0;
  color: var(--focus-muted);
  font-size: 14px;
}

.focused-converter-page .support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: start;
}

.focused-converter-page .support-list {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--focus-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(37, 99, 235, .05);
}

.focused-converter-page .support-list div {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--focus-line);
}

.focused-converter-page .support-list div:last-child {
  border-bottom: 0;
}

.focused-converter-page .support-list dt {
  color: var(--focus-brand-dark);
  font-weight: 800;
}

.focused-converter-page .support-list dd {
  margin: 0;
  color: var(--focus-muted);
}

.focused-converter-page .faq-wrap {
  max-width: 900px;
}

.focused-converter-page .faq-list {
  display: grid;
  gap: 12px;
}

.focused-converter-page .faq-list details {
  overflow: hidden;
  border: 1px solid var(--focus-line);
  border-left: 3px solid transparent;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(15, 23, 42, .04);
}

.focused-converter-page .faq-list details[open] {
  border-left-color: var(--focus-brand);
}

.focused-converter-page .faq-list summary {
  min-height: 62px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 14px 54px 14px 20px;
  color: var(--focus-brand-dark);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.focused-converter-page .faq-list summary::-webkit-details-marker {
  display: none;
}

.focused-converter-page .faq-list summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  color: var(--focus-brand);
  font-size: 25px;
  font-weight: 500;
}

.focused-converter-page .faq-list details[open] summary::after {
  content: "\2212";
}

.focused-converter-page .faq-list details p {
  max-width: 780px;
  margin: 0;
  padding: 0 54px 20px 20px;
  color: var(--focus-muted);
}

.focused-converter-page .faq-list details a {
  color: var(--focus-brand);
  font-weight: 700;
}

.focused-converter-page .final-band {
  padding: 76px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #172554, var(--focus-brand-dark));
  color: #bfdbfe;
  text-align: center;
}

.focused-converter-page .final-band h2 {
  margin: 0;
  color: #fff;
  font-size: 38px;
}

.focused-converter-page .final-band p {
  max-width: 650px;
  margin: 12px auto 24px;
}

.focused-converter-page .final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.focused-converter-page .final-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 700;
}

.focused-converter-page .site-footer {
  padding: 58px 0 0;
  background: var(--focus-brand-dark);
  color: #bfdbfe;
  font-size: 14px;
}

.focused-converter-page .footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(150px, .85fr) minmax(210px, 1fr);
  gap: 54px;
}

.focused-converter-page .footer-brand {
  max-width: 460px;
}

.focused-converter-page .footer-logo {
  color: #fff;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 19px;
  font-weight: 700;
}

.focused-converter-page .footer-logo img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.focused-converter-page .footer-brand > p {
  max-width: 420px;
  margin: 17px 0 0;
  color: #bfdbfe;
  line-height: 1.7;
}

.focused-converter-page .footer-brand small {
  display: block;
  margin-top: 10px;
  color: rgba(147, 197, 253, .66);
}

.focused-converter-page .made-in-india {
  width: fit-content;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 600;
}

.focused-converter-page .footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.focused-converter-page .footer-heading {
  margin: 0 0 6px;
  color: #fff;
  font-weight: 700;
}

.focused-converter-page .footer-column a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  color: #bfdbfe;
  text-decoration: none;
}

.focused-converter-page .footer-column a:hover {
  color: #fff;
}

.focused-converter-page .footer-column address {
  margin-top: 7px;
  color: rgba(147, 197, 253, .68);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.focused-converter-page .footer-bottom {
  margin-top: 48px;
  padding: 28px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(147, 197, 253, .78);
  text-align: center;
  font-size: 13px;
}

.focused-converter-page .footer-bottom a {
  color: inherit;
}

.focused-converter-page :focus-visible {
  outline: 3px solid #f59e0b;
  outline-offset: 3px;
}

.focused-converter-page .hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .focused-converter-page .nav-links {
    display: none;
  }

  .focused-converter-page .mobile-nav {
    display: block;
  }

  .focused-converter-page .workflow-list,
  .focused-converter-page .use-case-list {
    grid-template-columns: 1fr;
  }

  .focused-converter-page .support-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .focused-converter-page .footer-grid {
    grid-template-columns: 1.45fr 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 600px) {
  .focused-converter-page .page-wrap {
    width: min(calc(100% - 32px), 1180px);
  }

  .focused-converter-page .nav-inner {
    gap: 8px;
  }

  .focused-converter-page .brand-copy small {
    display: none;
  }

  .focused-converter-page .nav-actions {
    gap: 4px;
  }

  .focused-converter-page .nav-auth-action {
    padding: 8px 11px;
    font-size: 13px;
    white-space: nowrap;
  }

  .focused-converter-page .focused-hero {
    padding: 32px 0 52px;
  }

  .focused-converter-page .hero-copy {
    margin-bottom: 22px;
  }

  .focused-converter-page .eyebrow {
    margin-bottom: 12px;
    padding: 6px 11px;
    font-size: 10px;
  }

  .focused-converter-page .hero h1 {
    font-size: 34px;
  }

  .focused-converter-page .hero-lead {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
  }

  .focused-converter-page .trust-line {
    margin-top: 8px;
    font-size: 12px;
  }

  .focused-converter-page .converter-heading {
    min-height: 56px;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    padding: 12px 16px;
  }

  .focused-converter-page .fixed-format {
    font-size: 12px;
  }

  .focused-converter-page .converter-state {
    padding: 16px;
  }

  .focused-converter-page .markdown-dropzone {
    min-height: 220px;
    padding: 18px 12px;
  }

  .focused-converter-page .upload-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 12px;
  }

  .focused-converter-page .dropzone-empty h2 {
    font-size: 19px;
  }

  .focused-converter-page .choose-files,
  .focused-converter-page .convert-button,
  .focused-converter-page .result-download,
  .focused-converter-page .result-next-step .button {
    width: 100%;
  }

  .focused-converter-page .converter-details {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .focused-converter-page .runtime-steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .focused-converter-page .runtime-steps .demo-step-connector {
    display: none;
  }

  .focused-converter-page .state-centered {
    min-height: 390px;
  }

  .focused-converter-page .state-centered h2 {
    font-size: 25px;
  }

  .focused-converter-page .result-next-step {
    padding: 18px 14px;
  }

  .focused-converter-page .content-band {
    padding: 64px 0;
  }

  .focused-converter-page .section-heading {
    margin-bottom: 28px;
    text-align: left;
  }

  .focused-converter-page .section-heading h2,
  .focused-converter-page .support-grid h2 {
    font-size: 30px;
  }

  .focused-converter-page .support-list div {
    display: block;
  }

  .focused-converter-page .support-list dt {
    margin-bottom: 3px;
  }

  .focused-converter-page .faq-list summary {
    padding-right: 44px;
  }

  .focused-converter-page .faq-list details p {
    padding-right: 20px;
  }

  .focused-converter-page .final-band h2 {
    font-size: 31px;
  }

  .focused-converter-page .final-actions {
    flex-direction: column;
  }

  .focused-converter-page .final-actions .button {
    width: 100%;
  }

  .focused-converter-page .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 340px) {
  .focused-converter-page .brand {
    gap: 6px;
  }

  .focused-converter-page .brand img {
    width: 32px;
    height: 32px;
  }

  .focused-converter-page .brand-copy strong {
    font-size: 16px;
  }

  .focused-converter-page .nav-auth-action {
    padding-inline: 8px;
    font-size: 12px;
  }

  .focused-converter-page .nav-auth-action svg {
    display: none;
  }

  .focused-converter-page .hero h1 {
    font-size: 30px;
  }

  .focused-converter-page .converter-heading {
    padding-inline: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .focused-converter-page *,
  .focused-converter-page *::before,
  .focused-converter-page *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
body.marathi-word-page [lang="mr"],
body.marathi-word-page .word-font-control {
  font-family: "Noto Sans Devanagari", "Inter", sans-serif;
}

.marathi-word-page .word-font-control {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
  align-items: center;
  gap: 24px;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--focus-line);
  border-radius: 16px;
  background: #fff;
}

.marathi-word-page .word-font-control label {
  display: block;
  color: var(--focus-brand-dark);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 800;
}

.marathi-word-page .word-font-control p {
  margin: 4px 0 0;
  color: var(--focus-muted);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.55;
}

.marathi-word-page .word-font-select {
  width: 100%;
  min-height: 44px;
  padding: 10px 42px 10px 13px;
  border: 1px solid #94a3b8;
  border-radius: 12px;
  background:
    #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center / 18px;
  color: var(--focus-brand-dark);
  font: 700 14px/1.3 Inter, system-ui, sans-serif;
  appearance: none;
}

@media (max-width: 768px) {
  .marathi-word-page .word-font-control {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .marathi-word-page .word-font-control {
    margin-top: 16px;
    padding: 15px;
  }
}

@media (max-width: 320px) {
  .marathi-word-page .word-font-control {
    padding: 12px;
  }

  .marathi-word-page .word-font-select {
    font-size: 13px;
  }
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: optional;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("/fonts/noto-sans-devanagari.woff2") format("woff2");
}

:root {
  --site-ink: #0d1b24;
  --site-navy: #1e3a5f;
  --site-blue: #2563eb;
  --site-blue-deep: #1e40af;
  --site-orange: #f97316;
  --site-orange-dark: #c2410c;
  --site-muted: #405968;
  --site-soft-text: #526878;
  --site-line: #d7e1e6;
  --site-line-soft: #e6edef;
  --site-field: #f4f7f8;
  --site-frost-a: #f5f8fb;
  --site-frost-b: #edf2f6;
  --site-white: #ffffff;
  --site-footer-copy: #c7d4db;
  --site-footer-muted: #a9bbc6;
  --site-shadow: 0 8px 24px rgba(8, 20, 28, .065);
  --site-shadow-raised: 0 18px 44px rgba(8, 20, 28, .11);
  --site-nav-height: 64px;
}

html {
  scroll-padding-top: calc(var(--site-nav-height) + 12px);
}

html.is-authenticated [data-guest-only] {
  display: none !important;
}

body.site-frosted {
  position: relative;
  isolation: isolate;
  min-width: 320px;
  color: var(--site-ink);
  background: transparent !important;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.site-frosted::before,
body.site-frosted::after {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
}

body.site-frosted::before {
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(255, 255, 255, .76), transparent 48%),
    radial-gradient(circle at 73% 20%, rgba(240, 120, 50, .145), transparent 29%),
    radial-gradient(circle at 14% 82%, rgba(30, 58, 95, .065), transparent 34%),
    linear-gradient(145deg, var(--site-frost-a) 0%, var(--site-frost-b) 100%);
}

body.site-frosted::after {
  z-index: -1;
  opacity: .42;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .1) 36%, transparent 52%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-size: auto, 220px 220px;
  mix-blend-mode: soft-light;
}


body.site-frosted h1,
body.site-frosted h2,
body.site-frosted h3 {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 700;
}

body.site-frosted .font-devanagari {
  font-family: "Noto Sans Devanagari", "Inter", sans-serif;
}

body.site-focused {
  --focus-brand: var(--site-blue);
  --focus-brand-light: #3b82f6;
  --focus-brand-dark: var(--site-ink);
  --focus-text: var(--site-ink);
  --focus-copy: var(--site-muted);
  --focus-muted: var(--site-soft-text);
  --focus-line: var(--site-line);
  --focus-surface: var(--site-field);
  --focus-surface-alt: var(--site-frost-b);
}

body.site-frosted .text-brand-dark {
  color: var(--site-ink) !important;
}

body.site-frosted .text-gray-400,
body.site-frosted .text-gray-500 {
  color: var(--site-soft-text) !important;
}

body.site-frosted .text-gray-600 {
  color: var(--site-muted) !important;
}

body.site-frosted :focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}

body.site-frosted #navbar,
body.site-frosted nav.site-nav,
body.site-frosted > nav:first-of-type {
  border-bottom: 1px solid rgba(215, 225, 230, .94) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: 0 1px 0 rgba(8, 20, 28, .025);
  backdrop-filter: none !important;
}


body.site-frosted [data-session-link] {
  min-width: 132px;
  justify-content: center;
  border-radius: 10px !important;
  color: #fff !important;
  background: var(--site-ink) !important;
  box-shadow: 0 6px 18px rgba(8, 20, 28, .12);
}


body.site-frosted [data-session-link]:hover {
  background: #142b38 !important;
  box-shadow: 0 9px 24px rgba(8, 20, 28, .17);
}

body.site-frosted nav [data-guest-only] {
  border-radius: 9px !important;
  color: var(--site-navy) !important;
  background: #eef3f6 !important;
}

body.site-frosted #mobile-menu {
  background: rgba(255, 255, 255, .99);
}

body.site-frosted nav small,
body.site-frosted .brand-copy small {
  color: var(--site-soft-text) !important;
}

body.site-frosted input::placeholder {
  color: var(--site-soft-text) !important;
  opacity: 1;
}

/* Production home hero */

@keyframes home-cue-float {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}

/* Homepage section system */

/* Symbolic document-structure system */

/* Focused live-demo plane */

.home-demo #demo-counter {
  margin-top: 18px;
  border-color: var(--site-line) !important;
  color: var(--site-ink) !important;
  background: rgba(255, 255, 255, .82) !important;
}

.home-demo .demo-card {
  border-color: var(--site-line) !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: var(--site-shadow-raised) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.home-demo .demo-card:hover {
  box-shadow: 0 22px 50px rgba(8, 20, 28, .13) !important;
}

.home-demo #demo-dropzone {
  padding: 22px 28px !important;
}

.home-demo #demo-dropzone-empty > p:first-of-type {
  margin-bottom: 2px !important;
  font-size: 16px !important;
}

.home-demo #demo-dropzone-empty > p:nth-of-type(2) {
  margin-bottom: 10px !important;
}

.home-demo__settings .demo-toggle > div,
.home-demo__settings .demo-toggle-orange > div {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
}

@media (min-width: 1024px) and (max-height: 800px) {

  .home-demo #demo-dropzone {
    padding: 16px 22px !important;
  }

  .home-demo__settings .demo-toggle > div,
  .home-demo__settings .demo-toggle-orange > div {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
}

.home-demo #demo-convert-btn:not(:disabled) {
  background: var(--site-ink) !important;
  box-shadow: 0 12px 24px rgba(8, 20, 28, .16);
}

.home-demo #demo-convert-btn:not(:disabled):hover {
  background: #142b38 !important;
  box-shadow: 0 16px 30px rgba(8, 20, 28, .2);
}

.home-demo #demo-convert-btn:not(:disabled) svg {
  color: var(--site-orange) !important;
}

.site-home .demo-card {
  border-color: var(--site-line-soft) !important;
  box-shadow: var(--site-shadow) !important;
}

.site-home .demo-card {
  border-radius: 28px !important;
}

.site-home #demo-dropzone {
  border-color: rgba(30, 58, 95, .16) !important;
  background: rgba(245, 248, 251, .82) !important;
}

/* Focused converter pages */
.site-focused {
  background: transparent !important;
}

.site-focused .focused-hero {
  background: transparent !important;
}

.site-focused .focused-hero::before {
  content: none !important;
}

.site-focused .hero-glow,
.site-focused .hero-grain {
  display: none !important;
}

.site-focused .converter-shell,
.site-focused .workflow-list article,
.site-focused .use-case-list article,
.site-focused .faq-list details {
  border-color: var(--site-line-soft) !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: var(--site-shadow) !important;
}

.site-focused .converter-shell {
  border-radius: 28px !important;
}


.site-focused .content-band {
  background: rgba(255, 255, 255, .76) !important;
}

.site-focused .band-muted {
  background: rgba(246, 249, 250, .62) !important;
}

.site-focused .eyebrow,
.site-focused .fixed-format {
  border-color: rgba(30, 58, 95, .13) !important;
  color: var(--site-ink) !important;
  background: rgba(255, 255, 255, .76) !important;
}

/* Informational, auth, utility, and legal pages */


body.site-frosted .site-footer {
  color: var(--site-footer-copy) !important;
  background: var(--site-ink) !important;
}


.site-focused .site-footer .footer-brand > p,
.site-focused .site-footer .made-in-india,
.site-focused .site-footer .footer-column a {
  color: var(--site-footer-copy) !important;
}

.site-focused .site-footer .footer-brand small,
.site-focused .site-footer .footer-column address,
.site-focused .site-footer .footer-bottom {
  color: var(--site-footer-muted) !important;
}

/* Cohesive public-page cards and actions */

@keyframes page-credit-checkout-spin {
  to { transform: rotate(360deg); }
}

/* Focused converter pages */
.site-focused .button-primary {
  color: #fff !important;
  background: var(--site-ink) !important;
  box-shadow: 0 10px 22px rgba(8, 20, 28, .16) !important;
}

.site-focused .button-primary:hover {
  background: #142b38 !important;
  box-shadow: 0 14px 30px rgba(8, 20, 28, .2) !important;
}

.site-focused .button-primary svg {
  color: #fb8a3c;
}

.site-focused .button-primary:disabled {
  background: #cbd5e1 !important;
  box-shadow: none !important;
}

.site-focused .final-band {
  color: var(--site-footer-copy) !important;
  background:
    radial-gradient(circle at 78% 16%, rgba(249, 115, 22, .2), transparent 30%),
    linear-gradient(145deg, var(--site-ink), #183242) !important;
}

.site-focused .final-band p {
  color: var(--site-footer-copy) !important;
}

.site-focused .markdown-dropzone {
  border-color: rgba(30, 58, 95, .22) !important;
  background: rgba(246, 249, 250, .72) !important;
}

.site-focused .upload-icon {
  border: 1px solid var(--site-line-soft);
  color: var(--site-navy) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 7px 18px rgba(8, 20, 28, .07) !important;
}

.site-focused .trust-line,
.site-focused .hero-lead,
.site-focused .dropzone-empty > p,
.site-focused .drop-hint {
  color: var(--site-muted) !important;
}

/* About, legal, and account surfaces */

@keyframes auth-story-doc-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes auth-story-doc-drift-alt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes auth-story-scan {
  0% { opacity: .3; transform: translateY(0); }
  60% { opacity: .85; }
  100% { opacity: .2; transform: translateY(136px); }
}

@keyframes auth-story-pulse {
  0%, 100% { opacity: .48; }
  50% { opacity: .82; }
}

@media (max-width: 767px) {
  :root {
    --site-nav-height: 64px;
  }

  body.site-frosted [data-session-link] {
    min-width: 0;
  }

}

@media (max-width: 540px) {

  .home-demo #demo-dropzone {
    padding: 18px 12px !important;
  }

  .home-demo__settings .demo-toggle > div,
  .home-demo__settings .demo-toggle-orange > div {
    padding-right: 6px !important;
    padding-left: 6px !important;
    font-size: 12px !important;
  }
}

/* Per-conversion detected-image setting shared by demo and Dashboard. */
.detected-images-control {
  position: relative;
  width: 100%;
  color: #243446;
}

.detected-images-row {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 8px;
  padding: 2px 12px;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.detected-images-label {
  min-width: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.detected-images-info {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #52627a;
  cursor: pointer;
  font: 700 14px/1 Georgia, serif;
}

.detected-images-info::before {
  position: absolute;
  inset: 9px;
  border: 1px solid #9aabc0;
  border-radius: 999px;
  background: transparent;
  content: '';
}

.detected-images-info:hover,
.detected-images-info:focus-visible {
  color: #1d4ed8;
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.detected-images-info:hover::before,
.detected-images-info:focus-visible::before {
  border-color: #2563eb;
}

.detected-images-switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex: 0 0 46px;
  margin-left: auto;
  cursor: pointer;
}

.detected-images-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.detected-images-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #9aa8b8;
  transition: background-color 160ms ease;
}

.detected-images-switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(13, 27, 36, 0.28);
  content: '';
  transition: transform 160ms ease;
}

.detected-images-switch input:checked + span {
  background: #2563eb;
}

.detected-images-switch input:checked + span::after {
  transform: translateX(20px);
}

.detected-images-switch input:focus-visible + span {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 2px;
}

.detected-images-switch input:disabled + span {
  cursor: wait;
  opacity: 0.58;
}

.detected-images-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 50;
  width: min(360px, 100%);
  padding: 10px 12px;
  border-radius: 10px;
  background: #162433;
  color: #fff;
  box-shadow: 0 12px 28px rgba(13, 27, 36, 0.24);
  font-size: 13px;
  line-height: 1.45;
}

.detected-images-tooltip[hidden] {
  display: none;
}

@media (max-width: 360px) {
  .detected-images-row { padding-inline: 10px; }
  .detected-images-label { font-size: 13px; }
}

/* REQ-117: trusted Weaverbird homepage visual system */

.site-home .home-demo #demo-counter {
  color: #fff !important;
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .18) !important;
}

.site-home .home-demo #demo-dropzone {
  border-color: rgba(47, 102, 160, .22) !important;
  background: #f8fafb;
}

.site-home .home-demo #demo-convert-btn:not(:disabled) {
  background: var(--site-orange) !important;
  box-shadow: 0 12px 24px rgba(249, 115, 22, .22);
}

.site-home .home-demo #demo-convert-btn:not(:disabled):hover {
  background: #e9630d !important;
  box-shadow: 0 16px 30px rgba(249, 115, 22, .28);
}

/* Homepage pricing: one shell, one divider, one inset purchase card. */

@media (max-width: 560px) {

  .site-home .home-demo #demo-dropzone {
    padding-inline: 14px !important;
  }
}