/* ===== Merged site.min.css = tailwind_min.css + theme.css (v2) =====
   Combined to cut one render-blocking HTTP round-trip on first load
   (previously two separate synchronous <link> tags). Cascade order
   preserved: Tailwind utilities first, theme.css overrides second —
   do not reorder, theme.css relies on loading after Tailwind. */
*,: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:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;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:JetBrains Mono,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}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-right-6{right:-1.5rem}.-top-6{top:-1.5rem}.left-0{left:0}.left-4{left:1rem}.right-4{right:1rem}.top-1\/2{top:50%}.top-full{top:100%}.isolate{isolation:isolate}.z-10{z-index:10}.order-1{order:1}.order-2{order:2}.order-3{order:3}.col-span-2{grid-column:span 2/span 2}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-top:3rem;margin-bottom:3rem}.my-14{margin-top:3.5rem;margin-bottom:3.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.\!mb-4{margin-bottom:1rem!important}.\!mt-0{margin-top:0!important}.-ml-0\.5{margin-left:-.125rem}.-mt-2{margin-top:-.5rem}.-mt-3{margin-top:-.75rem}.-mt-7{margin-top:-1.75rem}.-mt-8{margin-top:-2rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-1\.5{height:.375rem}.h-11{height:2.75rem}.h-2{height:.5rem}.h-28{height:7rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-7{height:1.75rem}.h-9{height:2.25rem}.h-\[120px\]{height:120px}.h-\[42px\]{height:42px}.h-\[90px\]{height:90px}.h-fit{height:-moz-fit-content;height:fit-content}.max-h-\[160px\]{max-height:160px}.w-1\.5{width:.375rem}.w-11{width:2.75rem}.w-2{width:.5rem}.w-28{width:7rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-60{width:15rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-9{width:2.25rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-\[120px\]{min-width:120px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-\[260px\]{max-width:260px}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.basis-full{flex-basis:100%}.border-collapse{border-collapse:collapse}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-1{row-gap:.25rem}.gap-y-1\.5{row-gap:.375rem}.gap-y-2{row-gap:.5rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity,1))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity,1))}.divide-sky-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(224 242 254/var(--tw-divide-opacity,1))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[var\(--border\)\]{border-color:var(--border)}.border-amber-100{--tw-border-opacity:1;border-color:rgb(254 243 199/var(--tw-border-opacity,1))}.border-amber-200{--tw-border-opacity:1;border-color:rgb(253 230 138/var(--tw-border-opacity,1))}.border-amber-400\/30{border-color:rgba(251,191,36,.3)}.border-amber-400\/40{border-color:rgba(251,191,36,.4)}.border-brandBlue{--tw-border-opacity:1;border-color:rgb(14 165 233/var(--tw-border-opacity,1))}.border-brandLine{--tw-border-opacity:1;border-color:rgb(31 47 71/var(--tw-border-opacity,1))}.border-emerald-400\/30{border-color:rgba(52,211,153,.3)}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-rose-100{--tw-border-opacity:1;border-color:rgb(255 228 230/var(--tw-border-opacity,1))}.border-sky-100{--tw-border-opacity:1;border-color:rgb(224 242 254/var(--tw-border-opacity,1))}.border-sky-100\/70{border-color:rgba(224,242,254,.7)}.border-sky-200{--tw-border-opacity:1;border-color:rgb(186 230 253/var(--tw-border-opacity,1))}.border-sky-400\/30{border-color:rgba(56,189,248,.3)}.border-sky-500{--tw-border-opacity:1;border-color:rgb(14 165 233/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.bg-\[var\(--surface\)\]{background-color:var(--surface)}.bg-amber-400{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.bg-amber-400\/10{background-color:rgba(251,191,36,.1)}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-amber-500\/15{background-color:rgba(245,158,11,.15)}.bg-brandAmber{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-brandBlue{--tw-bg-opacity:1;background-color:rgb(14 165 233/var(--tw-bg-opacity,1))}.bg-brandDark{--tw-bg-opacity:1;background-color:rgb(11 18 32/var(--tw-bg-opacity,1))}.bg-brandGreen{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-400{--tw-bg-opacity:1;background-color:rgb(52 211 153/var(--tw-bg-opacity,1))}.bg-emerald-400\/10{background-color:rgba(52,211,153,.1)}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-500\/15{background-color:rgba(16,185,129,.15)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-rose-50{--tw-bg-opacity:1;background-color:rgb(255 241 242/var(--tw-bg-opacity,1))}.bg-rose-500\/15{background-color:rgba(244,63,94,.15)}.bg-sky-400{--tw-bg-opacity:1;background-color:rgb(56 189 248/var(--tw-bg-opacity,1))}.bg-sky-400\/10{background-color:rgba(56,189,248,.1)}.bg-sky-50{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity,1))}.bg-sky-50\/60{background-color:rgba(240,249,255,.6)}.bg-sky-500\/15{background-color:rgba(14,165,233,.15)}.bg-slate-400{--tw-bg-opacity:1;background-color:rgb(148 163 184/var(--tw-bg-opacity,1))}.bg-slate-500\/15{background-color:rgba(100,116,139,.15)}.bg-transparent{background-color:transparent}.bg-violet-500\/15{background-color:rgba(139,92,246,.15)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-\[radial-gradient\(ellipse_60\%_80\%_at_100\%_50\%\2c rgba\(245\2c 158\2c 11\2c 0\.15\)\2c transparent_70\%\)\]{background-image:radial-gradient(ellipse 60% 80% at 100% 50%,rgba(245,158,11,.15),transparent 70%)}.bg-\[radial-gradient\(ellipse_70\%_55\%_at_50\%_0\%\2c rgba\(14\2c 165\2c 233\2c 0\.16\)\2c transparent_70\%\)\]{background-image:radial-gradient(ellipse 70% 55% at 50% 0,rgba(14,165,233,.16),transparent 70%)}.bg-\[radial-gradient\(ellipse_70\%_55\%_at_50\%_0\%\2c rgba\(14\2c 165\2c 233\2c 0\.18\)\2c transparent_70\%\)\]{background-image:radial-gradient(ellipse 70% 55% at 50% 0,rgba(14,165,233,.18),transparent 70%)}.bg-\[radial-gradient\(ellipse_70\%_55\%_at_50\%_0\%\2c rgba\(16\2c 185\2c 129\2c 0\.16\)\2c transparent_70\%\)\]{background-image:radial-gradient(ellipse 70% 55% at 50% 0,rgba(16,185,129,.16),transparent 70%)}.bg-\[radial-gradient\(ellipse_70\%_55\%_at_50\%_0\%\2c rgba\(245\2c 158\2c 11\2c 0\.16\)\2c transparent_70\%\)\]{background-image:radial-gradient(ellipse 70% 55% at 50% 0,rgba(245,158,11,.16),transparent 70%)}.object-contain{-o-object-fit:contain;object-fit:contain}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-14{padding-bottom:3.5rem}.pb-16{padding-bottom:4rem}.pb-2{padding-bottom:.5rem}.pb-2\.5{padding-bottom:.625rem}.pb-20{padding-bottom:5rem}.pb-4{padding-bottom:1rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pl-6{padding-left:1.5rem}.pr-4{padding-right:1rem}.pt-1{padding-top:.25rem}.pt-10{padding-top:2.5rem}.pt-12{padding-top:3rem}.pt-14{padding-top:3.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-display{font-family:Space Grotesk,sans-serif}.font-mono{font-family:JetBrains Mono,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.normal-case{text-transform:none}.italic{font-style:italic}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-normal{letter-spacing:0}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.text-\[\#d4af37\]{--tw-text-opacity:1;color:rgb(212 175 55/var(--tw-text-opacity,1))}.text-amber-300\/90{color:rgba(252,211,77,.9)}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity,1))}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-amber-800{--tw-text-opacity:1;color:rgb(146 64 14/var(--tw-text-opacity,1))}.text-brandDark{--tw-text-opacity:1;color:rgb(11 18 32/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/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-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-rose-400{--tw-text-opacity:1;color:rgb(251 113 133/var(--tw-text-opacity,1))}.text-rose-600{--tw-text-opacity:1;color:rgb(225 29 72/var(--tw-text-opacity,1))}.text-sky-300{--tw-text-opacity:1;color:rgb(125 211 252/var(--tw-text-opacity,1))}.text-sky-400{--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity,1))}.text-sky-500{--tw-text-opacity:1;color:rgb(14 165 233/var(--tw-text-opacity,1))}.text-sky-600{--tw-text-opacity:1;color:rgb(2 132 199/var(--tw-text-opacity,1))}.text-sky-700{--tw-text-opacity:1;color:rgb(3 105 161/var(--tw-text-opacity,1))}.text-sky-800{--tw-text-opacity:1;color:rgb(7 89 133/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-violet-400{--tw-text-opacity:1;color:rgb(167 139 250/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.accent-brandBlue{accent-color:#0ea5e9}.opacity-20{opacity:.2}.opacity-60{opacity:.6}.opacity-\[0\.16\]{opacity:.16}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.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)}.blur{--tw-blur:blur(8px)}.blur,.invert{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)}.invert{--tw-invert:invert(100%)}.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{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;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}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:border-amber-400:hover{--tw-border-opacity:1;border-color:rgb(251 191 36/var(--tw-border-opacity,1))}.hover\:border-sky-300:hover{--tw-border-opacity:1;border-color:rgb(125 211 252/var(--tw-border-opacity,1))}.hover\:border-sky-400:hover{--tw-border-opacity:1;border-color:rgb(56 189 248/var(--tw-border-opacity,1))}.hover\:border-sky-600:hover{--tw-border-opacity:1;border-color:rgb(2 132 199/var(--tw-border-opacity,1))}.hover\:bg-amber-600:hover{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.hover\:bg-emerald-600:hover{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.hover\:bg-sky-50:hover{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity,1))}.hover\:bg-sky-600:hover{--tw-bg-opacity:1;background-color:rgb(2 132 199/var(--tw-bg-opacity,1))}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/5:hover{background-color:hsla(0,0%,100%,.05)}.hover\:text-red-500:hover{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.hover\:text-sky-400:hover{--tw-text-opacity:1;color:rgb(56 189 248/var(--tw-text-opacity,1))}.hover\:text-sky-600:hover{--tw-text-opacity:1;color:rgb(2 132 199/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}@media (min-width:640px){.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.md\:col-span-1{grid-column:span 1/span 1}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:gap-3{gap:.75rem}.md\:p-5{padding:1.25rem}.md\:p-8{padding:2rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1024px){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:order-none{order:0}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:mx-0{margin-left:0;margin-right:0}.lg\:mx-auto{margin-left:auto;margin-right:auto}.lg\:ml-0{margin-left:0}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:max-w-xl{max-width:36rem}.lg\:flex-1{flex:1 1 0%}.lg\:basis-auto{flex-basis:auto}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:flex-nowrap{flex-wrap:nowrap}.lg\:justify-start{justify-content:flex-start}.lg\:gap-10{gap:2.5rem}.lg\:gap-4{gap:1rem}.lg\:text-left{text-align:left}}/* ==========================================================================
   ElectroMechCalc — shared site theme
   Single source of truth for typography, layout helpers, search UI,
   and dark/light theming. Every page links this file instead of
   carrying its own duplicated <style> block.

   Theme model: body.dark-theme / body.light-theme is toggled by
   site-nav.js. Everything themeable reads from the CSS custom
   properties defined below (--bg, --surface, --text, etc.) rather
   than hardcoded hex values, so there is exactly one place to change
   a color for both themes.
   ========================================================================== */

body { font-family: 'Inter', system-ui, sans-serif; }
h1, h2, h3, .font-display { font-family: 'Space Grotesk', system-ui, sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.blueprint-grid {
  background-image:
    linear-gradient(#1f2f47 1px, transparent 1px),
    linear-gradient(90deg, #1f2f47 1px, transparent 1px);
  background-size: 42px 42px;
  animation: gridDrift 30s linear infinite;
}
@keyframes gridDrift {
  0% { background-position: 0px 0px, 0px 0px; }
  100% { background-position: 42px 42px, 42px 42px; }
}

.featured-card {
  background: linear-gradient(160deg, #0B1220, #15233a);
}
.featured-card .formula-chip {
  background: rgba(255,255,255,.08);
  color: #fbbf24;
}

.feedback-btn { transition: .15s ease; }
.feedback-btn.selected {
  /* was background:#0ea5e9 with white text -> only ~2.77:1, fails
     AA. var(--accent-contrast) as the background keeps white text
     readable (~5.9:1) while staying the same brand blue family. */
  background: var(--accent-contrast);
  color: #fff;
  border-color: var(--accent-contrast);
}

.formula-block {
  background: #0b1220;
  border: 1px solid #1f2f47;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #a7f3d0;
  white-space: pre-line;
  line-height: 1.7;
}

.diagram-block {
  background: #0b1220;
  border: 1px solid #1f2f47;
  border-radius: 10px;
  padding: 16px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #7dd3fc;
  white-space: pre;
  overflow-x: auto;
  line-height: 1.5;
}

.blog-prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.blog-prose h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.blog-prose p {
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.blog-prose strong { color: var(--text); }
.blog-prose ul {
  margin: 0 0 1rem 1.25rem;
  color: var(--text-2);
  line-height: 1.75;
}
.blog-prose li { margin-bottom: 0.4rem; }

/* Inline links inside article prose had no dedicated rule, so they
   likely fell back to a plain colored anchor with no underline —
   distinguishable from surrounding paragraph text by color alone,
   which fails Lighthouse's "links rely on color" audit. Underline +
   offset gives a non-color cue too, on top of a contrast-safe color. */
.blog-prose a,
.page-prose a {
  color: var(--accent-contrast);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.blog-prose a:hover,
.page-prose a:hover {
  text-decoration-thickness: 2px;
}

.factor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.factor-table th,
.factor-table td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.factor-table th {
  background: var(--surface-2);
  font-weight: 600;
  color: var(--text);
}
.factor-table td { color: var(--text-2); }

.related-calc-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.related-calc-title { color: var(--text) !important; }
.related-calc-category { color: var(--text-2) !important; }
.related-calc-heading { color: var(--text) !important; }
.related-calc-header { border-color: var(--border) !important; }

.breadcrumb-nav {
  max-width: 72rem;
  margin: 0 auto;
  padding: 10px 16px;
  font-size: 12.5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}
.breadcrumb-nav a {
  color: var(--text) !important;
  font-weight: 600;
  text-decoration: none;
}
.breadcrumb-nav a:hover { color: var(--accent-contrast) !important; }
.breadcrumb-nav .breadcrumb-category {
  color: var(--text) !important;
  font-weight: 500;
}
.breadcrumb-nav .breadcrumb-sep {
  margin: 0 6px;
  /* was #0ea5e9, which is only ~2.77:1 on a light --bg and fails
     WCAG AA (4.5:1 required). --accent-contrast is a darker shade
     that passes in light theme while staying the original brand
     accent in dark theme (see :root / html.dark-theme). */
  color: var(--accent-contrast) !important;
  font-weight: 700;
  opacity: 1;
}
.breadcrumb-nav .breadcrumb-current {
  color: var(--text) !important;
  font-weight: 700;
}

.themeToggle {
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
}

.calc-card {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.calc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(14,165,233,.25), 0 14px 28px rgba(11,18,32,0.10);
  border-color: #38bdf8;
}

/* "Explore More Categories" section (now injected by _middleware.js
   right before #site-footer on every indexed page — see
   buildExploreMoreHTML there). Centralizing the dark-theme rule here
   too, rather than relying on each page's own leftover
   "body.dark-theme #explore-more a.calc-card" copy, since not every
   page's local <style> block is guaranteed to still carry it. */
body.dark-theme #explore-more a.calc-card {
  background: #111c2e;
  border-color: #1f2f47;
}
body.dark-theme #explore-more h3 {
  color: #e2e8f0;
}
body.dark-theme #explore-more p {
  color: #94a3b8;
}
body.dark-theme #explore-more > h2 {
  color: #e2e8f0;
}

/* ---------------------------- badge pulse --------------------------------- */

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.45); }
  50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}
.badge-pulse { animation: badgePulse 2s ease-in-out infinite; }

/* ---------------------------- scroll reveal -------------------------------- */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------- hero float ----------------------------------- */

@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-float { animation: subtleFloat 6s ease-in-out infinite; }

/* ---------------------------- button arrow --------------------------------- */

.btn-arrow-wrap .btn-arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.btn-arrow-wrap:hover .btn-arrow {
  transform: translateX(4px);
}

/*
 * !important below is intentional: many calculator pages (e.g.
 * bearing-life.html) still carry an old per-page duplicate
 * .formula-chip rule inside their own inline <style> block (same
 * pattern already documented above for .search-input/.search-results).
 * Those inline blocks load after this stylesheet in <head>, so at
 * equal specificity they'd normally win and silently keep the old
 * small font-size page-by-page. !important guarantees the larger,
 * corrected size applies everywhere from this one file.
 */
.formula-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px !important;
  background: #eaf6fd;
  color: #0369a1;
  padding: 5px 11px !important;
  border-radius: 6px;
  display: inline-block;
}
/* Was light-only with no dark counterpart (unlike .featured-card
   .formula-chip above, which already has its own dark-appropriate
   styling) — every calculator page's formula-reference badges stayed
   pale-blue-on-light regardless of theme. Matches the dark palette
   already used for the visually similar .share-result-btn chip. */
body.dark-theme .formula-chip {
  background: #0f253a;
  color: #7dd3fc;
}

details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; cursor: pointer; }
details summary .plus { transition: transform .2s ease; }
details[open] summary .plus { transform: rotate(45deg); }

@keyframes detailsSweep {
  0% { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: translateY(0); }
}
details[open] summary ~ * { animation: detailsSweep .3s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .blueprint-grid { animation: none !important; }
  .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
}

.nav-dropdown { position: relative; }

.nav-dropdown .nav-dropdown-panel { display: none; }
.nav-dropdown.nav-dropdown-open .nav-dropdown-panel { display: block; }

.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  padding: 10px;
  margin-top: 4px;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(11,18,32,0.25);
  z-index: 60;
  /* Panel is position:absolute with no cap on its own height, so on
     shorter viewports a long list (e.g. Electrical's 13 links) simply
     ran past the bottom of the screen with no way to reach the rest —
     it isn't clipped by any ancestor's overflow, it's just rendered
     off-screen. Cap it to the remaining viewport height below the
     header and let it scroll internally instead. */
  max-height: calc(100vh - var(--header-height, 96px) - 24px);
  overflow-y: auto;
}

.nav-dropdown-link {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--text);
}
.nav-dropdown-link:hover {
  background: rgba(14,165,233,.10);
  color: var(--accent-contrast);
}
.nav-dropdown-link.active {
  background: rgba(14,165,233,.14);
  color: var(--accent-contrast);
  font-weight: 600;
}

/* Some dropdown links (e.g. the "More" panel) pair an icon with text
   using Tailwind's .flex class. .nav-dropdown-link's own "display:block"
   above wins on source order alone since both are single-class rules,
   which stacked the icon above the text instead of beside it. This
   two-class selector has higher specificity so it wins regardless of
   source order. */
.nav-dropdown-link.flex {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobile-sublink {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 17.5px;
  color: var(--nav-text);
  opacity: 0.85;
}
/* "More" section sublinks (About/Contact/Privacy/etc.) carry both
   .mobile-sublink and Tailwind's .flex items-center gap-2 for the
   inline icon + label layout. .mobile-sublink's own `display: block`
   above has the same specificity as Tailwind's `.flex` and loads
   later, so it was winning the cascade and stacking the icon above
   the text. This higher-specificity rule (two classes) restores the
   flex row only for links that already have both classes — plain
   text-only sublinks elsewhere are untouched. */
.mobile-sublink.flex {
  display: flex;
}
.mobile-sublink:hover {
  background: rgba(14,165,233,.12);
  color: var(--accent-contrast);
  opacity: 1;
}
.mobile-sublink.active {
  background: rgba(14,165,233,.14);
  color: var(--accent-contrast);
  font-weight: 600;
  font-size: 18px;
  opacity: 1;
}

.mobile-dropdown summary::-webkit-details-marker { display: none; }
.mobile-dropdown summary { list-style: none; }
.mobile-dropdown summary .plus {
  font-size: 22px;
  line-height: 1;
  opacity: 0.85;
  transition: transform .2s ease;
}
.mobile-dropdown[open] summary .plus { transform: rotate(45deg); }

.mobile-link { font-size: 21px; }

.premium-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

/* ---------------------------- search bar --------------------------------- */
/*
 * FIX (search dropdown misalignment): .search-wrap is a flex item that
 * stretches wide (lg:flex-1 lg:max-w-xl lg:mx-auto in header.html) so the
 * whole search AREA sits centered in the header. Previously the <input>
 * inside it had a fixed width (190/230px) far narrower than that area,
 * so the input rendered near the left of the wide box while
 * .search-results (anchored with right:0) rendered at the wide box's
 * right edge — two different reference widths, hence the visual gap.
 *
 * Fix: make the input fill .search-wrap completely (width:100%), and
 * anchor .search-results with left:0 + right:0 (instead of a fixed
 * 280px + right:0) so the dropdown always exactly matches the input's
 * rendered width and position, on every breakpoint, automatically.
 */

.search-wrap { position: relative !important; }

/*
 * !important on width/position below is intentional: several pages
 * (index.html, editorial-policy.html, etc.) still carry an old
 * per-page duplicate <style> block with the pre-fix .search-input /
 * .search-results rules (width:190px, right:0, width:280px). Those
 * inline blocks load AFTER this stylesheet in <head>, so at equal
 * specificity they'd normally win the cascade and silently re-break
 * this fix page-by-page. !important here guarantees the corrected
 * layout applies everywhere from this one file, without having to
 * hunt down and edit every page's inline <style> block individually.
 */
.search-input {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 12px 8px 40px;
  font-size: 15px;
  width: 100% !important;
  outline: none;
  transition: .15s ease;
}
.search-input::placeholder { color: var(--text-2); }
.search-input:focus {
  width: 100% !important;
  border-color: #0ea5e9;
  background: rgba(255,255,255,0.1);
}

.search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: #64748b;
  pointer-events: none;
}

@media (max-width: 1023.98px) {
  .search-wrap { width: 100%; margin-top: 2px; }
}

/*
 * Visibility state: site-nav.js toggles the "hidden" class on
 * #searchResults directly (classList.add/remove("hidden")). The
 * rules below match that exact mechanism — no separate
 * ".search-wrap.has-results" wrapper class is used anywhere, so
 * there is only one signal that controls whether results show.
 */
/*
 * !important on display below is critical: some pages (e.g.
 * kw-kva.html) still carry an OLD per-page duplicate <style> block
 * using a different, defunct visibility system:
 *   .search-results { display:none; }
 *   .search-wrap.has-results .search-results { display:block; }
 * But site-nav.js only ever toggles a "hidden" CLASS on #searchResults
 * directly — it never adds "has-results" to .search-wrap. So on any
 * page still carrying that old block, results are permanently stuck
 * at display:none no matter what site-nav.js does; the search LOGIC
 * runs fine (innerHTML gets populated) but the box never becomes
 * visible. Forcing display here guarantees the "hidden" class is the
 * only thing controlling visibility, everywhere, regardless of any
 * leftover local CSS.
 */
.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  display: block !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(11,18,32,0.25);
  /* Was overflow:hidden with no height cap, so a query matching many
     calculators (e.g. "transformer") just grew the box past the
     bottom of the viewport with no way to reach the rest — same
     off-screen-dropdown problem already solved for .nav-dropdown-panel
     below, using the same var(--header-height) cap for consistency. */
  max-height: calc(100vh - var(--header-height, 96px) - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 60;
}
.search-results.hidden { display: none !important; }

.search-results a {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.search-results a:last-child { border-bottom: none; }
.search-results a:hover { background: rgba(14,165,233,.10) !important; }

.search-empty {
  padding: 12px 14px;
  font-size: 12.5px;
  color: var(--text-2);
}

/* ---------------------------- article prose ------------------------------ */

.page-prose h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.page-prose h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.page-prose p { color: var(--text-2); line-height: 1.75; margin-bottom: 1rem; }
.page-prose strong { color: var(--text); }
.page-prose ul { margin: 0 0 1rem 1.25rem; color: var(--text-2); line-height: 1.75; }
.page-prose li { margin-bottom: 0.4rem; }

.nav-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  flex-shrink: 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

/* ---------------------------- theme switch -------------------------------- */

.theme-switch {
  width: 38px;
  height: 20px;
  border-radius: 9999px;
  background: #64748b;
  position: relative;
  transition: .2s ease;
  flex-shrink: 0;
}
.theme-switch-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: .2s ease;
}
body.dark-theme .theme-switch { background: #0ea5e9; }
body.dark-theme .theme-switch-dot { transform: translateX(18px); }

/* ================= UNIVERSAL THEME (CSS custom properties) ================= */

:root {
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --text: #111827;
  --text-2: #475569;
  --border: #e5e7eb;
  --nav: #ffffff;
  --nav-text: #111827;
  --accent: #0ea5e9;
  /* --accent (#0ea5e9) only clears WCAG AA contrast against DARK
     backgrounds (~6.75:1). Used as literal text color (or as a
     background under white text) on light surfaces — e.g. the
     breadcrumb separator, active nav links, .feedback-btn.selected —
     it drops to ~2.77:1 and fails. --accent-contrast is a darker
     shade reserved for those text/foreground-on-light cases; --accent
     itself is left untouched so backgrounds/borders/hover-tints keep
     their original brand color. */
  --accent-contrast: #0369a1;
}

/* html.dark-theme mirrors body.dark-theme's variables. The pre-paint
   FOUC-prevention script (see _middleware.js) sets this class on
   <html> synchronously, before <body> exists, so --bg/--text/etc.
   resolve correctly on first paint instead of waiting for
   site-nav.js to add the class to <body> on DOMContentLoaded. Keep
   these two blocks in sync. */
html.dark-theme {
  --bg: #0B1220;
  --surface: #111c2e;
  --surface-2: #0f172a;
  --text: #e2e8f0;
  --text-2: #94a3b8;
  --border: #1f2f47;
  --nav: #111c2e;
  --nav-text: #e2e8f0;
  --accent-contrast: #0ea5e9;
}

body.dark-theme {
  --bg: #0B1220;
  --surface: #111c2e;
  --surface-2: #0f172a;
  --text: #e2e8f0;
  --text-2: #94a3b8;
  --border: #1f2f47;
  --nav: #111c2e;
  --nav-text: #e2e8f0;
  --accent-contrast: #0ea5e9;
}

body {
  background: var(--bg) !important;
  color: var(--text) !important;
  transition: background-color .25s ease, color .25s ease;
  /* No padding-top needed: .site-header is position:sticky, so it
     occupies its own real space in normal document flow on first
     paint and simply sticks once scrolled. This replaces the old
     "position:fixed header + JS-measured height pushed onto body"
     approach, which was a major CLS source — the page rendered with
     an approximate fallback padding, then jumped once
     site-nav.js's ResizeObserver corrected it to the real height. */
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav) !important;
  border-color: var(--border) !important;
  transition: transform .25s ease;
}

/* Hide-on-scroll-down / show-on-scroll-up (class toggled by site-nav.js).
   Header stays position:sticky — only its own transform moves, so it
   still sticks to top:0 the instant it's shown again. */
.site-header.site-header-hidden {
  transform: translateY(-100%);
}

/* Floating scroll buttons + feedback (site-wide, injected by
   site-nav.js). Direction-based: down-arrow shows while scrolling down,
   up-arrow shows while scrolling up, feedback shows with either — all
   fade out ~700ms after scrolling stops. */
.scroll-fab-container {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.scroll-fab-container.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.scroll-fab:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.scroll-fab-message { background: #16a34a; }
/* var(--accent-contrast) is #0369a1 (AA-safe darker blue) in light
   theme and #0ea5e9 in dark theme — both give a solid, visible fill
   behind the white icon in either mode. Previously this rule targeted
   a ".scroll-fab-top" class the buttons no longer use, so both arrows
   had no background at all (white-on-white in light mode = invisible). */
.scroll-fab-up,
.scroll-fab-down {
  background: var(--accent-contrast, #0369a1);
  opacity: 0;
  pointer-events: none;
}
.scroll-fab-container.dir-up .scroll-fab-up,
.scroll-fab-container.dir-down .scroll-fab-down {
  opacity: 1;
  pointer-events: auto;
}

/* Recent Posts — blog pages only. Horizontal side-scroll strip of
   post cards, snap-scrolling on touch devices. */
.recent-posts-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.recent-posts-scroll::-webkit-scrollbar { height: 6px; }
.recent-posts-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.recent-post-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}
.recent-post-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.recent-post-card .recent-post-body { padding: 12px 14px 16px; }
.recent-post-card h3 { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text) !important; }

/* Blog hub cards — image on top, 3-dot "Share Post" menu top-right. */
.blog-hub-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.blog-hub-card .blog-hub-body { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.blog-hub-card h3 { font-size: 16px; font-weight: 700; color: var(--text) !important; margin-bottom: 6px; }
.blog-hub-card p { font-size: 13.5px; color: #64748b; flex: 1; }
.blog-hub-menu-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(11,18,32,.55);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.blog-hub-menu-btn:hover { background: rgba(11,18,32,.8); }
.blog-hub-menu-panel {
  position: absolute;
  top: 46px;
  right: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 4px;
  z-index: 3;
  display: none;
  min-width: 140px;
}
.blog-hub-menu-panel.open { display: block; }
.blog-hub-menu-panel button,
.blog-hub-menu-panel .blog-share-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--text) !important;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.blog-hub-menu-panel button:hover,
.blog-hub-menu-panel .blog-share-link:hover { background: rgba(14,165,233,.12); }
.blog-hub-menu-panel .blog-share-link svg { flex-shrink: 0; opacity: 0.8; }

/* ---------------------------------------------------------------------
   Author box — "Created by / Reviewed by" credibility block used on
   blog posts, essential pages (about/terms/privacy-policy/contact),
   and the blog hub page. Previously only defined in each blog post's
   own inline <style> block, so any new page (e.g. blog-guides.html)
   that didn't copy that block rendered it as plain unboxed text.
   Centralized here so it's consistent everywhere automatically.
   --------------------------------------------------------------------- */
.author-box {
  border: 2px solid #000000;
}
body.dark-theme .author-box {
  border-color: #ffffff;
  background: #0B1220;
  color: #e2e8f0;
}

#mainNav, #mobileNav {
  color: var(--nav-text) !important;
  background: var(--nav) !important;
}

.nav-link, .mobile-link {
  color: var(--nav-text) !important;
  padding: 8px 12px;
  border-radius: 8px;
  transition: .15s ease;
}
.nav-link:hover, .mobile-link:hover {
  background: rgba(14,165,233,.12);
  color: var(--accent-contrast) !important;
}
.nav-link.active, .mobile-link.active {
  background: rgba(14,165,233,.14);
  color: var(--accent-contrast) !important;
  font-weight: 600;
}

.bg-white, .bg-gray-50 { background: var(--surface) !important; }
.border, .border-gray-100, .border-gray-200 { border-color: var(--border) !important; }
.text-gray-800, .text-brandDark { color: var(--text) !important; }
.text-gray-700, .text-gray-600, .text-gray-500 { color: var(--text-2) !important; }

/* Footer intentionally stays dark in both themes — its own
   bg-brandDark / text-gray-400 / text-white classes (set in
   partials/footer.html) are left alone here on purpose.

   BUT: the blanket ".text-gray-500 { color: var(--text-2) }" rule
   above doesn't know that — it still matches any text-gray-500
   element inside the footer or the other permanently-dark
   bg-brandDark bar (the "MOST USED:" quick-links strip). In light
   theme, var(--text-2) resolves to #475569 (a dark slate meant for
   LIGHT surfaces), so on these permanently-dark backgrounds it
   rendered as ~2.5:1 contrast — a near-invisible-text accessibility
   fail (Lighthouse: "insufficient color contrast" on "MOST USED:",
   the footer tagline/editorial-policy paragraphs, and the copyright
   bar). Restoring a fixed, dark-bg-safe gray here (same value used
   for --text-2 in dark theme, ~7.3:1 on these backgrounds) fixes it
   regardless of which theme the visitor has toggled. */
.bg-brandDark .text-gray-500, .bg-brandDark .text-gray-600, .bg-brandDark .text-gray-700,
footer .text-gray-500, footer .text-gray-600, footer .text-gray-700 {
  color: #94a3b8 !important;
}

/* Result-tile (the dark gradient result box on every calculator page)
   has the exact same problem as .bg-brandDark / footer above — it's a
   permanently-dark container, so the blanket ".text-gray-500/600/700
   !important" rule above resolves to var(--text-2), a dark slate meant
   for light surfaces, which is low-contrast on this box's fixed dark
   gradient in light theme (Output RPM / Output Torque / Rounded-Up
   Length style sub-labels were reported hard to read). Unlike the
   footer, this box gets a themed fix rather than one flat gray: dark
   theme goes plain white, light theme goes the site's golden accent
   (#d4af37, matching the hero typing text) for a bit of warmth.
   text-gray-400 is included too even though it isn't in the blanket
   rule above, so every gray shade inside a result-tile is covered by
   one rule instead of splitting the fix across this file and each
   calculator's own <style> block. */
body.dark-theme .result-tile .text-gray-400,
body.dark-theme .result-tile .text-gray-500,
body.dark-theme .result-tile .text-gray-600,
body.dark-theme .result-tile .text-gray-700 {
  color: #ffffff !important;
}
body.light-theme .result-tile .text-gray-400,
body.light-theme .result-tile .text-gray-500,
body.light-theme .result-tile .text-gray-600,
body.light-theme .result-tile .text-gray-700 {
  color: #d4af37 !important;
}

/* Footer brand match — background, logo sizing, and wordmark colors
   are now consolidated with the header into one shared block, see
   "HEADER + FOOTER BRAND LOGO" / "BACKGROUND" / "WORDMARK" further
   down this file. Footer-only concerns stay here. */
footer a:hover { color: #4ADE80 !important; }

/* text-sky-600 (#0284c7) on white/gray-50 section backgrounds — e.g.
   the "05 — FAQ" / "06 — ABOUT..." eyebrow labels and the "...
   editorial team" byline link — measures ~4.1:1, just under the
   4.5:1 AA threshold. var(--accent-contrast) is the same brand blue
   family but verified to pass (~5.4:1) on light surfaces; in dark
   theme it resolves to the brighter #0ea5e9, which also passes. */
.text-sky-600 { color: var(--accent-contrast) !important; }

/* "Explore Electrical/Mechanical Calculators" CTA buttons: white
   text on bg-brandBlue measured ~2.77:1 (same underlying color as
   the --accent contrast issue fixed earlier). Scoped to this
   specific button combo so other bg-brandBlue uses (non-text,
   decorative) are untouched. Hover gets its own safe, slightly
   darker shade so the hover effect isn't lost to !important. */
.btn-arrow-wrap.bg-brandBlue {
  background-color: var(--accent-contrast) !important;
}
.btn-arrow-wrap.bg-brandBlue:hover {
  background-color: #075985 !important;
}

/* ================= HEADER (moved from partials/header.html) =================
   These rules used to live in a <style> block inside header.html, which
   _middleware.js injects as raw HTML into every single page response.
   That meant ~120 lines of CSS were re-downloaded, uncached, on every
   page load (the browser can't cache inline <style>, only external
   files like this one). Moved here so it's fetched once and cached
   like the rest of the theme.

   Header is permanently dark (both themes) — solid colors, tightly
   scoped to .site-header so the rest of the page still toggles
   normally via body.dark-theme / body.light-theme. */
/* =========================
   HEADER + FOOTER BRAND LOGO
   ========================= */
.site-header .site-logo,
footer .site-logo {
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 9px;
  padding: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}
.site-header .site-logo {
  width: 56px !important;
  height: 56px !important;
}
footer .site-logo {
  width: 40px !important;
  height: 40px !important;
}

.footer-tagline {
  font-size: 9px;
}

/* =========================
   HEADER + FOOTER BACKGROUND
   ========================= */
.site-header,
.site-header #mainNav,
.site-header #mobileNav,
footer,
footer.bg-brandDark {
  background: linear-gradient(135deg, #0B1220 0%, #173F6B 100%) !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* =========================
   BRAND WORDMARK
   ========================= */
.site-header .logo-e,
footer .logo-e { color: #4ADE80 !important; }
.site-header .logo-m,
footer .logo-m { color: #FFFFFF !important; }
.site-header .logo-c,
footer .logo-c { color: #4ADE80 !important; }
.site-header .font-mono.uppercase { color: #ffffff !important; }

.site-header .nav-link,
.site-header .mobile-link {
  color: #E2E8F0 !important;
}
.site-header .nav-link:hover,
.site-header .mobile-link:hover {
  color: #4ADE80 !important;
}

.site-header .themeToggle .themeLabel {
  color: #e5e7eb !important;
}
.site-header .themeToggle .themeIconMoon,
.site-header .themeToggle .themeIconSun {
  color: #e5e7eb !important;
}

.site-header .nav-dropdown-panel {
  background: #122A48 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 4px 18px rgba(255,255,255,0.10),
    0 10px 26px rgba(0,0,0,0.35) !important;
}
.site-header .nav-dropdown-link {
  color: #E2E8F0 !important;
  background: transparent !important;
}
.site-header .nav-dropdown-link:hover {
  background: rgba(74, 222, 128, 0.10) !important;
  color: #4ADE80 !important;
}

.site-header .mobile-dropdown { background: #122A48 !important; }
.site-header .mobile-sublink { color: #CBD5E1 !important; }
.site-header .mobile-sublink:hover { color: #4ADE80 !important; }

.site-header .search-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  color: #FFFFFF !important;
}
.site-header .search-input::placeholder { color: #CBD5E1 !important; opacity: 1; }
.site-header .search-input:focus {
  border-color: #4ADE80 !important;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.15);
}
.site-header .search-results {
  background: #122A48 !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 4px 18px rgba(255,255,255,0.10), 0 10px 26px rgba(0,0,0,0.35) !important;
}
.site-header .search-results a { color: #E2E8F0 !important; }
.site-header .search-icon { color: #CBD5E1 !important; width: 18px !important; height: 18px !important; }

@media (max-width: 1023.98px) {
  #mobileNav:not(.hidden) {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /* Was height:100vh. Since this box starts at top:100% (i.e. already
       pushed down by the header's own height), a full 100vh box extends
       that same amount past the bottom of the actual viewport. Content
       inside that overhang isn't reachable: body scroll is locked while
       the menu is open (see site-nav.js), and overflow-y:auto here only
       scrolls once content exceeds the BOX's height, not once content
       exceeds the visible viewport. Sizing the box to the visible area
       makes the internal scrollbar cover all the content instead. */
    height: calc(100vh - var(--header-height, 148px));
    overflow-y: auto;
    background: #0B1220 !important;
    z-index: 100;
    padding-bottom: 40px;
  }
}

.site-header .mobile-link { font-size: 21px; }
.site-header .mobile-sublink { font-size: 17.5px; }
.site-header .mobile-sublink.active,
.site-header .nav-dropdown-link.active {
  background: rgba(74, 222, 128, 0.14) !important;
  color: #4ADE80 !important;
  font-weight: 600;
  font-size: 18px;
}
.site-header .nav-link.active,
.site-header .mobile-link.active {
  background: rgba(74, 222, 128, 0.14) !important;
  color: #4ADE80 !important;
  font-weight: 600;
}

.site-header .mobile-dropdown summary .plus {
  font-size: 22px;
  line-height: 1;
  opacity: 0.85;
}

.pro-star-icon { color: #f59e0b; }

/* ---------------------------------------------------------------------
   Calculator input panel border — black in light theme, white in dark
   theme. Applied site-wide via _middleware.js (adds .calc-input-panel
   to every calculator's input panel div automatically — no per-page
   edit needed). !important because the blanket
   ".border, .border-gray-100, .border-gray-200 { border-color: var(--border) !important }"
   rule above would otherwise win over this on elements that still
   carry the border-gray-100 class.
   --------------------------------------------------------------------- */
.calc-input-panel { border: 2px solid #000000 !important; }
body.dark-theme .calc-input-panel { border-color: #ffffff !important; }

/* ---------------------------------------------------------------------
   Share Result modal — single button opens a Share/Embed/Cite modal
   (replaces the old row of separate Copy Link/WhatsApp/X/Facebook
   buttons). Modal DOM is built and injected by common.js on first use;
   this file only supplies the styling.
   --------------------------------------------------------------------- */
.share-result-btn{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#0369a1;
  background:#eaf6fd; border:1px solid #bae6fd; border-radius:8px; padding:8px 16px; cursor:pointer;
  transition:background .15s;
}
.share-result-btn:hover{ background:#dbf0fb; }
body.dark-theme .share-result-btn{ background:#0f253a; border-color:#1f3a52; color:#7dd3fc; }
body.dark-theme .share-result-btn:hover{ background:#123049; }

/* ---------------------------------------------------------------------
   Action icon buttons — Copy Result, Yes/No feedback, Feedback (mailto)
   in the Share/Feedback bar. Same visual family as .share-result-btn
   but neutral by default; .active-like / .active-dislike are the
   highlighted states setFeedback() (per-page inline script) toggles on
   #fbYes / #fbNo via classList.toggle() — these were referenced in JS
   and markup site-wide but never actually styled, so a click changed
   the class with no visible effect.
   --------------------------------------------------------------------- */
.action-icon-btn{
  display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:#475569;
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:8px 16px; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s; text-decoration:none;
}
.action-icon-btn:hover{ background:#f1f5f9; border-color:#cbd5e1; }
body.dark-theme .action-icon-btn{ background:#111c2e; border-color:#1f2f47; color:#94a3b8; }
body.dark-theme .action-icon-btn:hover{ background:#16233a; border-color:#2c4059; }

.action-icon-btn.active-like{ background:#ecfdf5; border-color:#a7f3d0; color:#059669; }
.action-icon-btn.active-like:hover{ background:#d1fae5; }
body.dark-theme .action-icon-btn.active-like{ background:#052e22; border-color:#0f5132; color:#34d399; }
body.dark-theme .action-icon-btn.active-like:hover{ background:#063d2c; }

.action-icon-btn.active-dislike{ background:#fef2f2; border-color:#fecaca; color:#dc2626; }
.action-icon-btn.active-dislike:hover{ background:#fee2e2; }
body.dark-theme .action-icon-btn.active-dislike{ background:#3a0d0d; border-color:#5c1414; color:#f87171; }
body.dark-theme .action-icon-btn.active-dislike:hover{ background:#481212; }

.share-modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.55);
  display:none; align-items:center; justify-content:center;
  z-index:9999; padding:16px;
}
.share-modal-overlay.open{ display:flex; }
.share-modal-box{
  background:#ffffff; border-radius:16px; max-width:480px; width:100%;
  padding:28px; box-shadow:0 20px 60px rgba(0,0,0,.25); position:relative;
}
body.dark-theme .share-modal-box{ background:#0f1c30; }
.share-modal-close{
  position:absolute; top:18px; right:18px; background:none; border:none;
  font-size:22px; color:#94a3b8; cursor:pointer; line-height:1; padding:0;
}
.share-modal-close:hover{ color:#334155; }
body.dark-theme .share-modal-close:hover{ color:#e2e8f0; }
.share-modal-title{ font-weight:700; font-size:18px; color:#0B1220; }
body.dark-theme .share-modal-title{ color:#e2e8f0; }
.share-modal-subtitle{ font-size:13px; color:#64748b; margin-top:2px; margin-bottom:20px; }
body.dark-theme .share-modal-subtitle{ color:#94a3b8; }
.share-tabs{ display:flex; gap:24px; border-bottom:1px solid #e5e7eb; margin-bottom:20px; }
body.dark-theme .share-tabs{ border-color:#1f2f47; }
.share-tab{
  background:none; border:none; padding:0 0 10px; font-size:14px; font-weight:600;
  color:#94a3b8; cursor:pointer; border-bottom:2px solid transparent;
}
.share-tab.active{ color:#0369a1; border-bottom-color:#0369a1; }
body.dark-theme .share-tab.active{ color:#7dd3fc; border-bottom-color:#7dd3fc; }
.share-panel{ display:none; }
.share-panel.active{ display:block; }
.share-panel p{ font-size:13px; color:#64748b; margin-bottom:10px; }
body.dark-theme .share-panel p{ color:#94a3b8; }
.share-checkbox-row{ display:flex; align-items:center; gap:8px; font-size:13px; color:#475569; margin-bottom:22px; cursor:pointer; }
body.dark-theme .share-checkbox-row{ color:#94a3b8; }
.share-icons-row{ display:flex; justify-content:center; gap:24px; margin-bottom:22px; }
.share-icon-item{ display:flex; flex-direction:column; align-items:center; gap:8px; background:none; border:none; cursor:pointer; }
.share-icon-circle{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px; font-weight:700;
}
.share-icon-label{ font-size:12px; color:#475569; }
body.dark-theme .share-icon-label{ color:#94a3b8; }
.share-link-row{ display:flex; align-items:center; gap:10px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; padding:10px 14px; }
body.dark-theme .share-link-row{ background:#111c2e; border-color:#1f2f47; }
.share-link-text{ flex:1; font-size:13px; color:#475569; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.dark-theme .share-link-text{ color:#94a3b8; }
.share-copy-btn{ font-size:13px; font-weight:600; color:#0369a1; background:none; border:none; cursor:pointer; flex-shrink:0; }
body.dark-theme .share-copy-btn{ color:#7dd3fc; }

.hero-typing-box{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:2.75em;
  max-width:640px;
  margin:0 auto 0.5rem;
  padding:0.4rem 1rem;
  box-sizing:border-box;
}
.hero-typing{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  white-space:normal;
  word-break:break-word;
  line-height:1.3;
  margin:0;
}
.hero-cursor{
  display:inline-block;
  width:2px;
  height:1em;
  margin-left:4px;
  flex-shrink:0;
  background:currentColor;
  animation:heroCursorBlink 0.8s steps(1) infinite;
}
@keyframes heroCursorBlink{
  50%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-cursor{ animation:none; }
}

/* ==========================================================================
   ELECTROMECHCALC — calculator.net-style theme (COMMON / site-wide)
   Applies automatically to every page that has a #calculator section.
   Pages without #calculator (home, hub pages, static pages, blog posts)
   are completely unaffected by this block.

   PAGE-SPECIFIC STEPS — still needed once per calculator page (not covered
   by this shared CSS):
   1) Wrap the page's own H2 + subtitle <p> in <div id="calcHeaderBar">...</div>
      so the navy header bar has something to bleed into.
   2) If the page has a helper paragraph under a field (like Motor Efficiency /
      Common Voltages did on transformer-size), convert it to the .info-icon
      tooltip pattern instead of leaving it as a plain always-visible <p>.
   3) OPTIONAL — only if a page has the same tall-right-column / big-gap
      problem transformer-size.html had: move #relatedCalculatorsBox OUT of
      the results grid into its own full-width <section> placed AFTER the
      Share/Feedback bar. If a page's related-calculators list is short,
      leave it where it already is — the .calc-card rules below work either way.
   ========================================================================== */

/* ---- info-icon tooltip component (Motor Efficiency / Common Voltages pattern) ---- */
.info-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#16a34a;
  color:#fff;
  font-size:10px;
  font-weight:700;
  font-style:italic;
  line-height:1;
  cursor:pointer;
  flex-shrink:0;
}
.info-icon .info-tooltip{
  display:none;
  position:absolute;
  left:0;
  top:135%;
  z-index:30;
  width:230px;
  max-width:60vw;
  background:#111827;
  color:#fff;
  font-size:11px;
  font-weight:400;
  font-style:normal;
  text-transform:none;
  letter-spacing:normal;
  line-height:1.45;
  padding:8px 10px;
  border-radius:6px;
  box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.info-icon:hover .info-tooltip,
.info-icon:focus .info-tooltip,
.info-icon:focus-visible .info-tooltip{
  display:block;
}

/* ===== calculator.net-style compact override — LIGHT MODE ONLY ===== */
body:not(.dark-theme) #calculator.max-w-6xl{ max-width:800px !important; }
body:not(.dark-theme) #calculator.py-14{ padding-top:1.25rem !important; padding-bottom:1.25rem !important; }
body:not(.dark-theme) #calculator .gap-6{ gap:0.6rem !important; }
body:not(.dark-theme) #calculator .gap-4{ gap:0.4rem !important; }
body:not(.dark-theme) #calculator .p-6,
body:not(.dark-theme) #calculator .md\:p-8{ padding:0.85rem !important; }
body:not(.dark-theme) #calculator .p-4{ padding:0.5rem !important; }
body:not(.dark-theme) #calculator .mb-5{ margin-bottom:0.5rem !important; }
body:not(.dark-theme) #calculator .mb-6{ margin-bottom:0.6rem !important; }
body:not(.dark-theme) #calculator .mt-6{ margin-top:0.6rem !important; }
body:not(.dark-theme) #calculator .pt-5{ padding-top:0.6rem !important; }
body:not(.dark-theme) #calculator label + .input-field,
body:not(.dark-theme) #calculator label + select.input-field,
body:not(.dark-theme) #calculator .mt-2{ margin-top:0.3rem !important; }
body:not(.dark-theme) #calculator .mt-1\.5{ margin-top:0.25rem !important; }
body:not(.dark-theme) #calculator .input-field{ padding:7px 10px !important; font-size:13px !important; }
body:not(.dark-theme) #calculator .bg-brandBlue.py-3\.5{ padding-top:0.65rem !important; padding-bottom:0.65rem !important; }
body:not(.dark-theme) #calculator .rounded-2xl,
body:not(.dark-theme) #calculator .rounded-xl,
body:not(.dark-theme) #calculator .rounded-lg{ border-radius:4px !important; }
body:not(.dark-theme) #calculator .shadow,
body:not(.dark-theme) #calculator .shadow-sm{ box-shadow:none !important; }

/* box background + border: flat white box + DEEP DARK NAVY border everywhere */
body:not(.dark-theme) #calculator .border,
body:not(.dark-theme) #calculator .border-t,
body:not(.dark-theme) #calculator .border-gray-100,
body:not(.dark-theme) #calculator .border-gray-200,
body:not(.dark-theme) #calculator .border-amber-100,
body:not(.dark-theme) #calculator .input-field,
body:not(.dark-theme) #calculator .formula-chip{ border-color:#13284a !important; border-width:1.5px !important; }

/* input panel body: light gray content area (calculator.net look), inputs stay white */
body:not(.dark-theme) #calculator .lg\:col-span-3.bg-white{ background:#eef1f4 !important; }
body:not(.dark-theme) #calculator .input-field{ background:#fff !important; }
body:not(.dark-theme) #calculator .bg-gray-100,
body:not(.dark-theme) #calculator .bg-gray-50,
body:not(.dark-theme) #calculator .bg-amber-50,
body:not(.dark-theme) #calculator .lg\:col-span-2 > div:not(.result-tile){ background:#fff !important; border:1px solid #13284a !important; }

/* body text stays plain dark gray/black for readability (result-tile is
   excluded — it keeps its own theme-driven white/slate text, see below) */
body:not(.dark-theme) #calculator label,
body:not(.dark-theme) #calculator p:not(.result-tile *),
body:not(.dark-theme) #calculator .formula-chip{ color:#1f2937 !important; }
body:not(.dark-theme) #calculator input,
body:not(.dark-theme) #calculator select{ color:#111827 !important; }

/* headings + section labels: calculator.net blue */
body:not(.dark-theme) #calculator h2,
body:not(.dark-theme) #calculator [class*="text-amber-"],
body:not(.dark-theme) #calculator [class*="text-sky-"],
body:not(.dark-theme) #calculator .text-brandDark{ color:#1a5fa0 !important; }

/* Result tile (e.g. "Reference ... Rating" card): keep the ORIGINAL theme
   navy gradient + amber label + white value + spark badge — not flattened.
   Higher specificity (.result-tile prefix) than the blanket amber rule
   above, so it correctly wins back to amber here. */
body:not(.dark-theme) #calculator .result-tile{
  background:linear-gradient(160deg,#0B1220,#15233a) !important;
  border:none !important;
}
body:not(.dark-theme) #calculator .result-tile [class*="text-amber-"]{ color:#fbbf24 !important; }

/* Phase/mode toggle tabs: navy bar, inactive=white text, active=white bg/navy text */
body:not(.dark-theme) #calculator .bg-gray-100:has(.toggle-btn){ background:#0B1220 !important; border:none !important; padding:3px !important; }
body:not(.dark-theme) #calculator .toggle-btn{ color:#fff !important; }
body:not(.dark-theme) #calculator .toggle-btn.active{ background:#fff !important; color:#0B1220 !important; box-shadow:none !important; font-weight:700; }

/* quick-preset chip buttons: light chips, blue when active */
body:not(.dark-theme) #calculator .qv-btn{ background:#fff !important; border-color:#13284a !important; color:#374151 !important; }
body:not(.dark-theme) #calculator .qv-btn.active{ background:#1a5fa0 !important; color:#fff !important; border-color:#1a5fa0 !important; }
body:not(.dark-theme) #calculator .qv-btn:hover{ background:#eaf2fa !important; border-color:#1a5fa0 !important; }

/* Calculate button: calculator.net green — targeted by its shared Tailwind
   class (.bg-brandBlue), so this line needs NO per-page edit */
body:not(.dark-theme) #calculator .bg-brandBlue{
  background:#4b7a2f !important;
  background-color:#4b7a2f !important;
  border-radius:4px !important;
}
body:not(.dark-theme) #calculator .hover\:bg-sky-600:hover{ background:#3e6527 !important; background-color:#3e6527 !important; }

body:not(.dark-theme) #calculator .bg-red-50{ background:#fff !important; }
body:not(.dark-theme) #calculator .border-red-200{ border-color:#dc2626 !important; }
body:not(.dark-theme) #calculator .text-red-600{ color:#b91c1c !important; }

/* ---- Related Calculators links: solid deep-navy, white text/arrow -----
   These selectors work whether #relatedCalculatorsBox is still inside
   #calculator OR has been moved out to its own section — the second rule
   set (#relatedCalculatorsBox ...) covers the moved case, the first
   (#calculator ...) covers the not-moved case. Having both is harmless. */
body:not(.dark-theme) #calculator .calc-card,
body:not(.dark-theme) #relatedCalculatorsBox .calc-card{ background:#13284a !important; border-color:#13284a !important; color:#fff !important; }
body:not(.dark-theme) #calculator .calc-card span,
body:not(.dark-theme) #relatedCalculatorsBox .calc-card span{ color:#fff !important; }
body:not(.dark-theme) #calculator .calc-card:hover,
body:not(.dark-theme) #relatedCalculatorsBox .calc-card:hover{ background:#0d1d36 !important; }
body:not(.dark-theme) #relatedCalculatorsBox{ background:#fff !important; border:1px solid #13284a !important; }
body:not(.dark-theme) #relatedCalculatorsBox .font-mono{ color:#1a5fa0 !important; }

/* Any "featured/pro" related-card variant (amber-styled) rendering
   blue-on-blue due to specificity — force white-on-navy explicitly. */
body:not(.dark-theme) #calculator a.calc-card[class*="amber"],
body:not(.dark-theme) #relatedCalculatorsBox a.calc-card[class*="amber"]{
  background:#13284a !important;
  border-color:#13284a !important;
  color:#fff !important;
}
body:not(.dark-theme) #calculator a.calc-card[class*="amber"] span,
body:not(.dark-theme) #relatedCalculatorsBox a.calc-card[class*="amber"] span{ color:#fff !important; }
body:not(.dark-theme) #calculator a.calc-card[class*="amber"]:hover,
body:not(.dark-theme) #relatedCalculatorsBox a.calc-card[class*="amber"]:hover{ background:#0d1d36 !important; }

/* dark mode: bold text inside body paragraphs/list items (article/guide
   content) wasn't turning white with the theme — force it explicitly */
body.dark-theme p strong,
body.dark-theme p b,
body.dark-theme li strong{ color:#ffffff !important; }

/* Heading bar (wrap the page's H2+subtitle in <div id="calcHeaderBar">):
   solid navy, bled to the card's edges, like calculator.net's
   "Modify the values" bar */
body:not(.dark-theme) #calculator #calcHeaderBar{
  background:#0B1220 !important;
  margin:-1rem -1rem 1rem -1rem !important;
  padding:0.85rem 1rem !important;
  border-radius:4px 4px 0 0 !important;
}
body:not(.dark-theme) #calculator #calcHeaderBar h2{ color:#fff !important; margin-bottom:0.25rem !important; }
body:not(.dark-theme) #calculator #calcHeaderBar p{ color:#94a3b8 !important; margin-bottom:0 !important; }

/* ===== SAME COMPACT SIZE IN DARK MODE — sizing/spacing only, no color
   declarations, so dark mode keeps its own existing box colors ===== */
#calculator.max-w-6xl{ max-width:800px !important; }
#calculator.py-14{ padding-top:1.25rem !important; padding-bottom:1.25rem !important; }
#calculator .gap-6{ gap:0.6rem !important; }
#calculator .gap-4{ gap:0.4rem !important; }
#calculator .p-6,
#calculator .md\:p-8{ padding:0.85rem !important; }
#calculator .p-4{ padding:0.5rem !important; }
#calculator .mb-5{ margin-bottom:0.5rem !important; }
#calculator .mb-6{ margin-bottom:0.6rem !important; }
#calculator .mt-6{ margin-top:0.6rem !important; }
#calculator .pt-5{ padding-top:0.6rem !important; }
#calculator label + .input-field,
#calculator label + select.input-field,
#calculator .mt-2{ margin-top:0.3rem !important; }
#calculator .mt-1\.5{ margin-top:0.25rem !important; }
#calculator .input-field{ padding:7px 10px !important; font-size:13px !important; }
#calculator .bg-brandBlue.py-3\.5{ padding-top:0.65rem !important; padding-bottom:0.65rem !important; }
#calculator .rounded-2xl,
#calculator .rounded-xl,
#calculator .rounded-lg{ border-radius:4px !important; }
#calculator .border,
#calculator .border-t,
#calculator .border-gray-100,
#calculator .border-gray-200,
#calculator .border-amber-100,
#calculator .input-field,
#calculator .formula-chip,
#calculator .qv-btn{ border-width:1.5px !important; }
#calculator #calcHeaderBar{
  margin:-1rem -1rem 1rem -1rem !important;
  padding:0.85rem 1rem !important;
  border-radius:4px 4px 0 0 !important;
}
#calculator #calcHeaderBar h2{ margin-bottom:0.25rem !important; }
#calculator #calcHeaderBar p{ margin-bottom:0 !important; }

/* Gap between calculator and next content — only tighten on DESKTOP
   (mobile is usually already fine); adjust ids if a page's Share/Feedback
   bar or TOC use different ids/selectors */
@media (min-width: 1024px){
  #shareFeedbackBar{ margin-bottom:1.5rem !important; }
  nav[aria-label="Table of contents"]{ margin-bottom:1.5rem !important; }
}