/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-orange-50:oklch(98% .016 73.684);--color-orange-100:oklch(95.4% .038 75.164);--color-orange-200:oklch(90.1% .076 70.697);--color-orange-400:oklch(75% .183 55.934);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-600:oklch(64.6% .222 41.116);--color-orange-800:oklch(47% .157 37.304);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-yellow-50:oklch(98.7% .026 102.212);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-200:oklch(94.5% .129 101.54);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-600:oklch(68.1% .162 75.834);--color-yellow-700:oklch(55.4% .135 66.442);--color-yellow-800:oklch(47.6% .114 61.907);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-700:oklch(50.8% .118 165.612);--color-teal-50:oklch(98.4% .014 180.72);--color-teal-400:oklch(77.7% .152 181.912);--color-teal-500:oklch(70.4% .14 182.503);--color-teal-600:oklch(60% .118 184.704);--color-teal-700:oklch(51.1% .096 186.391);--color-cyan-50:oklch(98.4% .019 200.873);--color-cyan-500:oklch(71.5% .143 215.221);--color-cyan-600:oklch(60.9% .126 221.723);--color-sky-100:oklch(95.1% .026 236.824);--color-sky-200:oklch(90.1% .058 230.902);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-200:oklch(87% .065 274.039);--color-indigo-400:oklch(67.3% .182 276.935);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-800:oklch(39.8% .195 277.366);--color-indigo-900:oklch(35.9% .144 278.697);--color-purple-50:oklch(97.7% .014 308.299);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-300:oklch(82.7% .119 306.383);--color-purple-400:oklch(71.4% .203 305.504);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-purple-800:oklch(43.8% .218 303.724);--color-purple-900:oklch(38.1% .176 304.987);--color-pink-50:oklch(97.1% .014 343.198);--color-pink-100:oklch(94.8% .028 342.258);--color-pink-200:oklch(89.9% .061 343.231);--color-pink-400:oklch(71.8% .202 349.761);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-pink-700:oklch(52.5% .223 3.958);--color-pink-800:oklch(45.9% .187 3.815);--color-rose-500:oklch(64.5% .246 16.439);--color-slate-800:oklch(27.9% .041 260.031);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-lg:64rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--ease-in:cubic-bezier(.4,0,1,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-md:12px;--blur-xl:24px;--aspect-video:16/9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}.bg-gradient-brand{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%)}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.inset-x-0{inset-inline:calc(var(--spacing)*0)}.inset-y-0{inset-block:calc(var(--spacing)*0)}.-top-10{top:calc(var(--spacing)*-10)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.top-5{top:calc(var(--spacing)*5)}.top-6{top:calc(var(--spacing)*6)}.top-8{top:calc(var(--spacing)*8)}.top-12{top:calc(var(--spacing)*12)}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.right-6{right:calc(var(--spacing)*6)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-6{bottom:calc(var(--spacing)*6)}.bottom-16{bottom:calc(var(--spacing)*16)}.left-0{left:calc(var(--spacing)*0)}.left-4{left:calc(var(--spacing)*4)}.left-5{left:calc(var(--spacing)*5)}.left-6{left:calc(var(--spacing)*6)}.isolate{isolation:isolate}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-40{z-index:40}.z-50{z-index:50}.z-\[9990\]{z-index:9990}.order-1{order:1}.order-2{order:2}.order-3{order:3}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.col-span-6{grid-column:span 6/span 6}.float-right{float:right}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-1{margin:calc(var(--spacing)*1)}.m-2{margin:calc(var(--spacing)*2)}.m-4{margin:calc(var(--spacing)*4)}.m-5{margin:calc(var(--spacing)*5)}.m-auto{margin:auto}.mx-auto{margin-inline:auto}.my-1{margin-block:calc(var(--spacing)*1)}.my-2{margin-block:calc(var(--spacing)*2)}.my-4{margin-block:calc(var(--spacing)*4)}.my-5{margin-block:calc(var(--spacing)*5)}.my-6{margin-block:calc(var(--spacing)*6)}.my-8{margin-block:calc(var(--spacing)*8)}.my-10{margin-block:calc(var(--spacing)*10)}.my-auto{margin-block:auto}.-mt-4{margin-top:calc(var(--spacing)*-4)}.-mt-16{margin-top:calc(var(--spacing)*-16)}.mt-0\.5{margin-top:calc(var(--spacing)*.5)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-3{margin-top:calc(var(--spacing)*3)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-10{margin-top:calc(var(--spacing)*10)}.mt-12{margin-top:calc(var(--spacing)*12)}.mt-20{margin-top:calc(var(--spacing)*20)}.mt-auto{margin-top:auto}.-mr-2{margin-right:calc(var(--spacing)*-2)}.mr-1{margin-right:calc(var(--spacing)*1)}.mr-2{margin-right:calc(var(--spacing)*2)}.mr-3{margin-right:calc(var(--spacing)*3)}.mr-4{margin-right:calc(var(--spacing)*4)}.mr-8{margin-right:calc(var(--spacing)*8)}.mr-auto{margin-right:auto}.-mb-16{margin-bottom:calc(var(--spacing)*-16)}.mb-0{margin-bottom:calc(var(--spacing)*0)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.mb-10{margin-bottom:calc(var(--spacing)*10)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.-ml-px{margin-left:-1px}.ml-0{margin-left:calc(var(--spacing)*0)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-3{margin-left:calc(var(--spacing)*3)}.ml-4{margin-left:calc(var(--spacing)*4)}.ml-5{margin-left:calc(var(--spacing)*5)}.ml-6{margin-left:calc(var(--spacing)*6)}.ml-10{margin-left:calc(var(--spacing)*10)}.ml-12{margin-left:calc(var(--spacing)*12)}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-video{aspect-ratio:var(--aspect-video)}.h-1\.5{height:calc(var(--spacing)*1.5)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-7{height:calc(var(--spacing)*7)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-14{height:calc(var(--spacing)*14)}.h-16{height:calc(var(--spacing)*16)}.h-20{height:calc(var(--spacing)*20)}.h-24{height:calc(var(--spacing)*24)}.h-32{height:calc(var(--spacing)*32)}.h-40{height:calc(var(--spacing)*40)}.h-48{height:calc(var(--spacing)*48)}.h-60{height:calc(var(--spacing)*60)}.h-64{height:calc(var(--spacing)*64)}.h-72{height:calc(var(--spacing)*72)}.h-80{height:calc(var(--spacing)*80)}.h-96{height:calc(var(--spacing)*96)}.h-100{height:calc(var(--spacing)*100)}.h-auto{height:auto}.h-full{height:100%}.h-screen{height:100vh}.max-h-48{max-height:calc(var(--spacing)*48)}.max-h-64{max-height:calc(var(--spacing)*64)}.max-h-80{max-height:calc(var(--spacing)*80)}.max-h-96{max-height:calc(var(--spacing)*96)}.max-h-\[300px\]{max-height:300px}.min-h-20{min-height:calc(var(--spacing)*20)}.min-h-80{min-height:calc(var(--spacing)*80)}.min-h-\[12rem\]{min-height:12rem}.min-h-\[300px\]{min-height:300px}.min-h-\[400px\]{min-height:400px}.min-h-screen{min-height:100vh}.w-0{width:calc(var(--spacing)*0)}.w-1\.5{width:calc(var(--spacing)*1.5)}.w-1\/2{width:50%}.w-1\/4{width:25%}.w-2{width:calc(var(--spacing)*2)}.w-2\/3{width:66.6667%}.w-3{width:calc(var(--spacing)*3)}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-3\/4{width:75%}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-7{width:calc(var(--spacing)*7)}.w-8{width:calc(var(--spacing)*8)}.w-9{width:calc(var(--spacing)*9)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-14{width:calc(var(--spacing)*14)}.w-16{width:calc(var(--spacing)*16)}.w-20{width:calc(var(--spacing)*20)}.w-32{width:calc(var(--spacing)*32)}.w-36{width:calc(var(--spacing)*36)}.w-40{width:calc(var(--spacing)*40)}.w-48{width:calc(var(--spacing)*48)}.w-80{width:calc(var(--spacing)*80)}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-\[80\%\]{max-width:80%}.max-w-\[85vw\]{max-width:85vw}.max-w-\[1600px\]{max-width:1600px}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-screen-lg{max-width:var(--breakpoint-lg)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing)*0)}.min-w-full{min-width:100%}.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.origin-top-left{transform-origin:0 0}.origin-top-right{transform-origin:100% 0}.-translate-x-full{--tw-translate-x:-100%;translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-0{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-5{--tw-translate-y:calc(var(--spacing)*-5);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-0{--tw-translate-y:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-y-4{--tw-translate-y:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}.scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.rotate-0{rotate:none}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-none{cursor:none}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-y{resize:vertical}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{appearance:none}.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))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}.gap-x-4{column-gap:calc(var(--spacing)*4)}:where(.space-x-0\.5>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*.5)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*.5)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-5>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*5)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-6>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*6)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*8)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-x-reverse)))}.gap-y-4{row-gap:calc(var(--spacing)*4)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-reverse>:not(:last-child)){--tw-divide-y-reverse:1}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-\[1\.2rem\]{border-radius:1.2rem}.rounded-\[1\.4rem\]{border-radius:1.4rem}.rounded-\[1\.5rem\]{border-radius:1.5rem}.rounded-\[1\.25rem\]{border-radius:1.25rem}.rounded-\[1\.75rem\]{border-radius:1.75rem}.rounded-\[1rem\]{border-radius:1rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.rounded-l-md{border-top-left-radius:var(--radius-md);border-bottom-left-radius:var(--radius-md)}.rounded-r-md{border-top-right-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md)}.rounded-b-lg{border-bottom-right-radius:var(--radius-lg);border-bottom-left-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-1{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-4{border-bottom-style:var(--tw-border-style);border-bottom-width:4px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-l-2{border-left-style:var(--tw-border-style);border-left-width:2px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--tm-border\)\]{border-color:var(--tm-border)}.border-black{border-color:var(--color-black)}.border-black\/10{border-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.border-black\/10{border-color:color-mix(in oklab,var(--color-black)10%,transparent)}}.border-blue-200{border-color:var(--color-blue-200)}.border-blue-500{border-color:var(--color-blue-500)}.border-cyan-500{border-color:var(--color-cyan-500)}.border-gray-50{border-color:var(--color-gray-50)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-500{border-color:var(--color-gray-500)}.border-gray-800{border-color:var(--color-gray-800)}.border-green-200{border-color:var(--color-green-200)}.border-green-400{border-color:var(--color-green-400)}.border-green-500{border-color:var(--color-green-500)}.border-indigo-400{border-color:var(--color-indigo-400)}.border-indigo-500{border-color:var(--color-indigo-500)}.border-pink-500{border-color:var(--color-pink-500)}.border-purple-200{border-color:var(--color-purple-200)}.border-purple-300{border-color:var(--color-purple-300)}.border-purple-500{border-color:var(--color-purple-500)}.border-red-200{border-color:var(--color-red-200)}.border-red-400{border-color:var(--color-red-400)}.border-red-500{border-color:var(--color-red-500)}.border-red-700{border-color:var(--color-red-700)}.border-teal-500{border-color:var(--color-teal-500)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\/20{border-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.border-white\/30{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.border-white\/30{border-color:color-mix(in oklab,var(--color-white)30%,transparent)}}.border-yellow-500{border-color:var(--color-yellow-500)}.border-b-orange-500{border-bottom-color:var(--color-orange-500)}.bg-\[rgba\(17\,24\,39\,0\.03\)\]{background-color:#11182708}.bg-\[rgba\(17\,24\,39\,0\.9\)\]{background-color:#111827e6}.bg-\[var\(--brand-light\)\]{background-color:var(--brand-light)}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-black{background-color:var(--color-black)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-200{background-color:var(--color-blue-200)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-700{background-color:var(--color-blue-700)}.bg-blue-900{background-color:var(--color-blue-900)}.bg-cyan-50{background-color:var(--color-cyan-50)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-gray-700{background-color:var(--color-gray-700)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-200{background-color:var(--color-green-200)}.bg-green-400{background-color:var(--color-green-400)}.bg-green-500{background-color:var(--color-green-500)}.bg-green-600{background-color:var(--color-green-600)}.bg-green-700{background-color:var(--color-green-700)}.bg-indigo-50{background-color:var(--color-indigo-50)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-orange-50{background-color:var(--color-orange-50)}.bg-orange-100{background-color:var(--color-orange-100)}.bg-orange-500{background-color:var(--color-orange-500)}.bg-pink-50{background-color:var(--color-pink-50)}.bg-pink-100{background-color:var(--color-pink-100)}.bg-purple-50{background-color:var(--color-purple-50)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-purple-500{background-color:var(--color-purple-500)}.bg-purple-600{background-color:var(--color-purple-600)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-200{background-color:var(--color-red-200)}.bg-red-400{background-color:var(--color-red-400)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.bg-red-700{background-color:var(--color-red-700)}.bg-red-800{background-color:var(--color-red-800)}.bg-red-900{background-color:var(--color-red-900)}.bg-sky-100{background-color:var(--color-sky-100)}.bg-sky-200{background-color:var(--color-sky-200)}.bg-teal-50{background-color:var(--color-teal-50)}.bg-teal-400{background-color:var(--color-teal-400)}.bg-teal-500{background-color:var(--color-teal-500)}.bg-teal-600{background-color:var(--color-teal-600)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab,var(--color-white)5%,transparent)}}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.bg-white\/55{background-color:#ffffff8c}@supports (color:color-mix(in lab, red, red)){.bg-white\/55{background-color:color-mix(in oklab,var(--color-white)55%,transparent)}}.bg-white\/60{background-color:#fff9}@supports (color:color-mix(in lab, red, red)){.bg-white\/60{background-color:color-mix(in oklab,var(--color-white)60%,transparent)}}.bg-white\/65{background-color:#ffffffa6}@supports (color:color-mix(in lab, red, red)){.bg-white\/65{background-color:color-mix(in oklab,var(--color-white)65%,transparent)}}.bg-white\/70{background-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.bg-white\/70{background-color:color-mix(in oklab,var(--color-white)70%,transparent)}}.bg-white\/75{background-color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.bg-white\/75{background-color:color-mix(in oklab,var(--color-white)75%,transparent)}}.bg-white\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\/95{background-color:color-mix(in oklab,var(--color-white)95%,transparent)}}.bg-yellow-50{background-color:var(--color-yellow-50)}.bg-yellow-100{background-color:var(--color-yellow-100)}.bg-yellow-300{background-color:var(--color-yellow-300)}.bg-yellow-400{background-color:var(--color-yellow-400)}.bg-yellow-500{background-color:var(--color-yellow-500)}.bg-yellow-600{background-color:var(--color-yellow-600)}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-from:var(--color-blue-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-400{--tw-gradient-from:var(--color-blue-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-600{--tw-gradient-from:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-gray-50{--tw-gradient-from:var(--color-gray-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-gray-400{--tw-gradient-from:var(--color-gray-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-gray-900{--tw-gradient-from:var(--color-gray-900);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-green-50{--tw-gradient-from:var(--color-green-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-green-400{--tw-gradient-from:var(--color-green-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-green-500{--tw-gradient-from:var(--color-green-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-pink-500{--tw-gradient-from:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-purple-400{--tw-gradient-from:var(--color-purple-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-purple-600{--tw-gradient-from:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-red-400{--tw-gradient-from:var(--color-red-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-red-500{--tw-gradient-from:var(--color-red-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-yellow-400{--tw-gradient-from:var(--color-yellow-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-yellow-500{--tw-gradient-from:var(--color-yellow-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-slate-800{--tw-gradient-via:var(--color-slate-800);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-black{--tw-gradient-to:var(--color-black);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-blue-100{--tw-gradient-to:var(--color-blue-100);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-blue-500{--tw-gradient-to:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-blue-600{--tw-gradient-to:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-gray-100{--tw-gradient-to:var(--color-gray-100);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-gray-500{--tw-gradient-to:var(--color-gray-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-gray-800{--tw-gradient-to:var(--color-gray-800);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-gray-900{--tw-gradient-to:var(--color-gray-900);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-green-100{--tw-gradient-to:var(--color-green-100);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-green-500{--tw-gradient-to:var(--color-green-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-green-600{--tw-gradient-to:var(--color-green-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-indigo-600{--tw-gradient-to:var(--color-indigo-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-orange-500{--tw-gradient-to:var(--color-orange-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-pink-600{--tw-gradient-to:var(--color-pink-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-50{--tw-gradient-to:var(--color-purple-50);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-500{--tw-gradient-to:var(--color-purple-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-red-500{--tw-gradient-to:var(--color-red-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-red-600{--tw-gradient-to:var(--color-red-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-rose-500{--tw-gradient-to:var(--color-rose-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-yellow-500{--tw-gradient-to:var(--color-yellow-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-yellow-600{--tw-gradient-to:var(--color-yellow-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.fill-current{fill:currentColor}.object-cover{object-fit:cover}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-2\.5{padding-inline:calc(var(--spacing)*2.5)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-7{padding-inline:calc(var(--spacing)*7)}.px-8{padding-inline:calc(var(--spacing)*8)}.px-14{padding-inline:calc(var(--spacing)*14)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-5{padding-block:calc(var(--spacing)*5)}.py-6{padding-block:calc(var(--spacing)*6)}.py-8{padding-block:calc(var(--spacing)*8)}.py-10{padding-block:calc(var(--spacing)*10)}.py-12{padding-block:calc(var(--spacing)*12)}.py-16{padding-block:calc(var(--spacing)*16)}.pt-1{padding-top:calc(var(--spacing)*1)}.pt-2{padding-top:calc(var(--spacing)*2)}.pt-3{padding-top:calc(var(--spacing)*3)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-5{padding-top:calc(var(--spacing)*5)}.pt-6{padding-top:calc(var(--spacing)*6)}.pt-10{padding-top:calc(var(--spacing)*10)}.pt-20{padding-top:calc(var(--spacing)*20)}.pr-2{padding-right:calc(var(--spacing)*2)}.pr-4{padding-right:calc(var(--spacing)*4)}.pr-8{padding-right:calc(var(--spacing)*8)}.pr-10{padding-right:calc(var(--spacing)*10)}.pr-12{padding-right:calc(var(--spacing)*12)}.pb-1{padding-bottom:calc(var(--spacing)*1)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.pb-5{padding-bottom:calc(var(--spacing)*5)}.pb-6{padding-bottom:calc(var(--spacing)*6)}.pb-8{padding-bottom:calc(var(--spacing)*8)}.pb-16{padding-bottom:calc(var(--spacing)*16)}.pb-20{padding-bottom:calc(var(--spacing)*20)}.pb-24{padding-bottom:calc(var(--spacing)*24)}.pl-3{padding-left:calc(var(--spacing)*3)}.pl-5{padding-left:calc(var(--spacing)*5)}.pl-8{padding-left:calc(var(--spacing)*8)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-bottom{vertical-align:bottom}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.leading-5{--tw-leading:calc(var(--spacing)*5);line-height:calc(var(--spacing)*5)}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.leading-7{--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.leading-8{--tw-leading:calc(var(--spacing)*8);line-height:calc(var(--spacing)*8)}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.tracking-\[0\.22em\]{--tw-tracking:.22em;letter-spacing:.22em}.tracking-\[0\.24em\]{--tw-tracking:.24em;letter-spacing:.24em}.tracking-\[0\.28em\]{--tw-tracking:.28em;letter-spacing:.28em}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-wrap{text-wrap:wrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.overflow-ellipsis{text-overflow:ellipsis}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[var\(--accent\)\]{color:var(--accent)}.text-\[var\(--brand\)\]{color:var(--brand)}.text-\[var\(--brand-dark\)\]{color:var(--brand-dark)}.text-\[var\(--ed-accent\)\]{color:var(--ed-accent)}.text-\[var\(--muted\)\]{color:var(--muted)}.text-\[var\(--tm-ink-2\)\]{color:var(--tm-ink-2)}.text-\[var\(--tm-muted\)\]{color:var(--tm-muted)}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-black{color:var(--color-black)}.text-blue-400{color:var(--color-blue-400)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-cyan-600{color:var(--color-cyan-600)}.text-emerald-700{color:var(--color-emerald-700)}.text-gray-200{color:var(--color-gray-200)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-400{color:var(--color-green-400)}.text-green-500{color:var(--color-green-500)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-indigo-400{color:var(--color-indigo-400)}.text-indigo-500{color:var(--color-indigo-500)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-indigo-800{color:var(--color-indigo-800)}.text-orange-400{color:var(--color-orange-400)}.text-orange-500{color:var(--color-orange-500)}.text-orange-600{color:var(--color-orange-600)}.text-orange-800{color:var(--color-orange-800)}.text-pink-400{color:var(--color-pink-400)}.text-pink-500{color:var(--color-pink-500)}.text-pink-600{color:var(--color-pink-600)}.text-pink-800{color:var(--color-pink-800)}.text-purple-400{color:var(--color-purple-400)}.text-purple-500{color:var(--color-purple-500)}.text-purple-600{color:var(--color-purple-600)}.text-purple-700{color:var(--color-purple-700)}.text-purple-800{color:var(--color-purple-800)}.text-purple-900{color:var(--color-purple-900)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-red-900{color:var(--color-red-900)}.text-teal-600{color:var(--color-teal-600)}.text-teal-700{color:var(--color-teal-700)}.text-white{color:var(--color-white)}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab, red, red)){.text-white\/80{color:color-mix(in oklab,var(--color-white)80%,transparent)}}.text-yellow-300{color:var(--color-yellow-300)}.text-yellow-400{color:var(--color-yellow-400)}.text-yellow-500{color:var(--color-yellow-500)}.text-yellow-600{color:var(--color-yellow-600)}.text-yellow-700{color:var(--color-yellow-700)}.text-yellow-800{color:var(--color-yellow-800)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-white::placeholder{color:var(--color-white)}.opacity-0{opacity:0}.opacity-10{opacity:.1}.opacity-20{opacity:.2}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-0{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-red-500{--tw-ring-color:var(--color-red-500)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);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: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,)}.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,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-75{--tw-duration:75ms;transition-duration:75ms}.duration-100{--tw-duration:.1s;transition-duration:.1s}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-250{--tw-duration:.25s;transition-duration:.25s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.ease-in{--tw-ease:var(--ease-in);transition-timing-function:var(--ease-in)}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;user-select:all}.select-none{-webkit-user-select:none;user-select:none}.\[wire\:model\]{wire:model}@media (hover:hover){.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}.group-hover\:text-\[var\(--accent\)\]:is(:where(.group):hover *){color:var(--accent)}}.placeholder\:text-gray-400::placeholder{color:var(--color-gray-400)}.last\:mr-0:last-child{margin-right:calc(var(--spacing)*0)}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media (hover:hover){.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.hover\:-translate-y-2:hover{--tw-translate-y:calc(var(--spacing)*-2);translate:var(--tw-translate-x)var(--tw-translate-y)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:scale-125:hover{--tw-scale-x:125%;--tw-scale-y:125%;--tw-scale-z:125%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:border-\[rgba\(222\,107\,31\,0\.35\)\]:hover{border-color:#de6b1f59}.hover\:border-blue-500:hover{border-color:var(--color-blue-500)}.hover\:border-gray-300:hover{border-color:var(--color-gray-300)}.hover\:border-purple-400:hover{border-color:var(--color-purple-400)}.hover\:bg-amber-100:hover{background-color:var(--color-amber-100)}.hover\:bg-amber-200:hover{background-color:var(--color-amber-200)}.hover\:bg-black:hover{background-color:var(--color-black)}.hover\:bg-blue-100:hover{background-color:var(--color-blue-100)}.hover\:bg-blue-200:hover{background-color:var(--color-blue-200)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-gray-500:hover{background-color:var(--color-gray-500)}.hover\:bg-gray-600:hover{background-color:var(--color-gray-600)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:bg-green-100:hover{background-color:var(--color-green-100)}.hover\:bg-green-200:hover{background-color:var(--color-green-200)}.hover\:bg-green-500:hover{background-color:var(--color-green-500)}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:bg-green-700:hover{background-color:var(--color-green-700)}.hover\:bg-indigo-200:hover{background-color:var(--color-indigo-200)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}.hover\:bg-orange-200:hover{background-color:var(--color-orange-200)}.hover\:bg-pink-200:hover{background-color:var(--color-pink-200)}.hover\:bg-purple-100:hover{background-color:var(--color-purple-100)}.hover\:bg-purple-200:hover{background-color:var(--color-purple-200)}.hover\:bg-purple-600:hover{background-color:var(--color-purple-600)}.hover\:bg-purple-700:hover{background-color:var(--color-purple-700)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-red-100:hover{background-color:var(--color-red-100)}.hover\:bg-red-500:hover{background-color:var(--color-red-500)}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:bg-white:hover{background-color:var(--color-white)}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab,var(--color-white)10%,transparent)}}.hover\:bg-white\/20:hover{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/20:hover{background-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.hover\:bg-white\/30:hover{background-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/30:hover{background-color:color-mix(in oklab,var(--color-white)30%,transparent)}}.hover\:bg-yellow-50:hover{background-color:var(--color-yellow-50)}.hover\:bg-yellow-200:hover{background-color:var(--color-yellow-200)}.hover\:bg-yellow-600:hover{background-color:var(--color-yellow-600)}.hover\:bg-yellow-700:hover{background-color:var(--color-yellow-700)}.hover\:bg-gradient-to-r:hover{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.hover\:from-blue-500:hover{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:from-blue-700:hover{--tw-gradient-from:var(--color-blue-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:from-green-600:hover{--tw-gradient-from:var(--color-green-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:from-red-600:hover{--tw-gradient-from:var(--color-red-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:from-yellow-600:hover{--tw-gradient-from:var(--color-yellow-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:to-green-700:hover{--tw-gradient-to:var(--color-green-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:to-pink-700:hover{--tw-gradient-to:var(--color-pink-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:to-purple-600:hover{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:to-purple-700:hover{--tw-gradient-to:var(--color-purple-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:to-red-700:hover{--tw-gradient-to:var(--color-red-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:to-yellow-700:hover{--tw-gradient-to:var(--color-yellow-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.hover\:text-\[var\(--accent\)\]:hover{color:var(--accent)}.hover\:text-\[var\(--ed-accent\)\]:hover{color:var(--ed-accent)}.hover\:text-\[var\(--tm-brand\)\]:hover{color:var(--tm-brand)}.hover\:text-blue-500:hover{color:var(--color-blue-500)}.hover\:text-blue-600:hover{color:var(--color-blue-600)}.hover\:text-blue-800:hover{color:var(--color-blue-800)}.hover\:text-blue-900:hover{color:var(--color-blue-900)}.hover\:text-gray-200:hover{color:var(--color-gray-200)}.hover\:text-gray-300:hover{color:var(--color-gray-300)}.hover\:text-gray-400:hover{color:var(--color-gray-400)}.hover\:text-gray-500:hover{color:var(--color-gray-500)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-gray-800:hover{color:var(--color-gray-800)}.hover\:text-gray-900:hover{color:var(--color-gray-900)}.hover\:text-indigo-900:hover{color:var(--color-indigo-900)}.hover\:text-red-900:hover{color:var(--color-red-900)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow:hover{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:z-10:focus{z-index:10}.focus\:border-\[var\(--accent\)\]:focus{border-color:var(--accent)}.focus\:border-blue-300:focus{border-color:var(--color-blue-300)}.focus\:border-blue-500:focus{border-color:var(--color-blue-500)}.focus\:border-gray-300:focus{border-color:var(--color-gray-300)}.focus\:border-gray-900:focus{border-color:var(--color-gray-900)}.focus\:border-green-700:focus{border-color:var(--color-green-700)}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:border-indigo-700:focus{border-color:var(--color-indigo-700)}.focus\:border-red-700:focus{border-color:var(--color-red-700)}.focus\:border-transparent:focus{border-color:#0000}.focus\:bg-gray-50:focus{background-color:var(--color-gray-50)}.focus\:bg-gray-100:focus{background-color:var(--color-gray-100)}.focus\:bg-gray-200:focus{background-color:var(--color-gray-200)}.focus\:bg-gray-500:focus{background-color:var(--color-gray-500)}.focus\:bg-gray-600:focus{background-color:var(--color-gray-600)}.focus\:bg-indigo-100:focus{background-color:var(--color-indigo-100)}.focus\:text-gray-500:focus{color:var(--color-gray-500)}.focus\:text-gray-700:focus{color:var(--color-gray-700)}.focus\:text-gray-800:focus{color:var(--color-gray-800)}.focus\:text-gray-900:focus{color:var(--color-gray-900)}.focus\:text-indigo-800:focus{color:var(--color-indigo-800)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\:ring-purple-400:focus{--tw-ring-color:var(--color-purple-400)}.focus\:ring-purple-500:focus{--tw-ring-color:var(--color-purple-500)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,)0 0 0 var(--tw-ring-offset-width)var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.active\:bg-gray-50:active{background-color:var(--color-gray-50)}.active\:bg-gray-100:active{background-color:var(--color-gray-100)}.active\:bg-gray-900:active{background-color:var(--color-gray-900)}.active\:bg-green-600:active{background-color:var(--color-green-600)}.active\:bg-red-600:active{background-color:var(--color-red-600)}.active\:text-gray-500:active{color:var(--color-gray-500)}.active\:text-gray-700:active{color:var(--color-gray-700)}.active\:text-gray-800:active{color:var(--color-gray-800)}.disabled\:opacity-25:disabled{opacity:.25}@media (min-width:40rem){.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-3{grid-column:span 3/span 3}.sm\:col-span-4{grid-column:span 4/span 4}.sm\:mx-0{margin-inline:calc(var(--spacing)*0)}.sm\:-my-px{margin-block:-1px}.sm\:my-8{margin-block:calc(var(--spacing)*8)}.sm\:mt-0{margin-top:calc(var(--spacing)*0)}.sm\:ml-3{margin-left:calc(var(--spacing)*3)}.sm\:ml-4{margin-left:calc(var(--spacing)*4)}.sm\:ml-6{margin-left:calc(var(--spacing)*6)}.sm\:ml-10{margin-left:calc(var(--spacing)*10)}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:inline-block{display:inline-block}.sm\:h-10{height:calc(var(--spacing)*10)}.sm\:h-screen{height:100vh}.sm\:w-10{width:calc(var(--spacing)*10)}.sm\:w-auto{width:auto}.sm\:w-full{width:100%}.sm\:max-w-2xl{max-width:var(--container-2xl)}.sm\:max-w-4xl{max-width:var(--container-4xl)}.sm\:max-w-lg{max-width:var(--container-lg)}.sm\:max-w-md{max-width:var(--container-md)}.sm\:max-w-sm{max-width:var(--container-sm)}.sm\:max-w-xl{max-width:var(--container-xl)}.sm\:flex-1{flex:1}.sm\:translate-y-0{--tw-translate-y:calc(var(--spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.sm\:scale-95{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x)var(--tw-scale-y)}.sm\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row-reverse{flex-direction:row-reverse}.sm\:items-center{align-items:center}.sm\:items-start{align-items:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:justify-center{justify-content:center}.sm\:rounded-lg{border-radius:var(--radius-lg)}.sm\:rounded-md{border-radius:var(--radius-md)}.sm\:p-0{padding:calc(var(--spacing)*0)}.sm\:p-6{padding:calc(var(--spacing)*6)}.sm\:px-0{padding-inline:calc(var(--spacing)*0)}.sm\:px-6{padding-inline:calc(var(--spacing)*6)}.sm\:px-20{padding-inline:calc(var(--spacing)*20)}.sm\:pt-0{padding-top:calc(var(--spacing)*0)}.sm\:pb-4{padding-bottom:calc(var(--spacing)*4)}.sm\:text-left{text-align:left}.sm\:align-middle{vertical-align:middle}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:48rem){.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:m-0{margin:calc(var(--spacing)*0)}.md\:-mt-1{margin-top:calc(var(--spacing)*-1)}.md\:mt-0{margin-top:calc(var(--spacing)*0)}.md\:mt-5{margin-top:calc(var(--spacing)*5)}.md\:mt-6{margin-top:calc(var(--spacing)*6)}.md\:mt-8{margin-top:calc(var(--spacing)*8)}.md\:ml-6{margin-left:calc(var(--spacing)*6)}.md\:block{display:block}.md\:flex{display:flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:inline{display:inline}.md\:h-16{height:calc(var(--spacing)*16)}.md\:h-24{height:calc(var(--spacing)*24)}.md\:h-28{height:calc(var(--spacing)*28)}.md\:w-2\/12{width:16.6667%}.md\:w-3\/12{width:25%}.md\:w-7\/12{width:58.3333%}.md\:w-16{width:calc(var(--spacing)*16)}.md\:w-48{width:calc(var(--spacing)*48)}.md\:w-64{width:calc(var(--spacing)*64)}.md\:w-96{width:calc(var(--spacing)*96)}.md\:w-auto{width:auto}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.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\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:items-end{align-items:flex-end}.md\:justify-between{justify-content:space-between}.md\:gap-3{gap:calc(var(--spacing)*3)}.md\:gap-4{gap:calc(var(--spacing)*4)}.md\:gap-6{gap:calc(var(--spacing)*6)}:where(.md\:space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.md\:space-x-0>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*0)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*0)*calc(1 - var(--tw-space-x-reverse)))}:where(.md\:space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}.md\:rounded-md{border-radius:var(--radius-md)}.md\:border-t-0{border-top-style:var(--tw-border-style);border-top-width:0}.md\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.md\:p-0{padding:calc(var(--spacing)*0)}.md\:p-4{padding:calc(var(--spacing)*4)}.md\:p-5{padding:calc(var(--spacing)*5)}.md\:p-6{padding:calc(var(--spacing)*6)}.md\:p-7{padding:calc(var(--spacing)*7)}.md\:p-8{padding:calc(var(--spacing)*8)}.md\:p-\[18px\]{padding:18px}.md\:px-0{padding-inline:calc(var(--spacing)*0)}.md\:px-\[18px\]{padding-inline:18px}.md\:py-8{padding-block:calc(var(--spacing)*8)}.md\:py-14{padding-block:calc(var(--spacing)*14)}.md\:py-\[10px\]{padding-block:10px}.md\:pt-14{padding-top:calc(var(--spacing)*14)}.md\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.md\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.md\:text-\[1\.0625rem\]{font-size:1.0625rem}.md\:leading-8{--tw-leading:calc(var(--spacing)*8);line-height:calc(var(--spacing)*8)}@media (hover:hover){.md\:hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}}}@media (min-width:64rem){.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:mx-auto{margin-inline:auto}.lg\:ml-0{margin-left:calc(var(--spacing)*0)}.lg\:ml-\[280px\]{margin-left:280px}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:inline-flex{display:inline-flex}.lg\:min-h-screen{min-height:100vh}.lg\:w-1\/3{width:33.3333%}.lg\:w-1\/4{width:25%}.lg\:w-2\/3{width:66.6667%}.lg\:w-3\/4{width:75%}.lg\:max-w-72{max-width:calc(var(--spacing)*72)}.lg\:max-w-lg{max-width:var(--container-lg)}.lg\:grid-cols-2{grid-template-columns:repeat(2,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\:grid-cols-\[1\.1fr_0\.9fr\]{grid-template-columns:1.1fr .9fr}.lg\:grid-cols-\[1\.05fr_0\.95fr\]{grid-template-columns:1.05fr .95fr}.lg\:grid-cols-\[1\.08fr_0\.92fr\]{grid-template-columns:1.08fr .92fr}.lg\:grid-cols-\[1fr_0\.9fr\]{grid-template-columns:1fr .9fr}.lg\:grid-cols-\[1fr_0\.85fr\]{grid-template-columns:1fr .85fr}.lg\:gap-6{gap:calc(var(--spacing)*6)}.lg\:gap-8{gap:calc(var(--spacing)*8)}:where(.lg\:space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}@media (min-width:64rem){.lg\:lg\:rounded-full{border-radius:3.40282e38px}}.lg\:rounded-full{border-radius:3.40282e38px}.lg\:rounded-lg{border-radius:var(--radius-lg)}.lg\:rounded-md{border-radius:var(--radius-md)}.lg\:rounded-t-md{border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.lg\:p-8{padding:calc(var(--spacing)*8)}.lg\:p-12{padding:calc(var(--spacing)*12)}.lg\:px-8{padding-inline:calc(var(--spacing)*8)}.lg\:py-10{padding-block:calc(var(--spacing)*10)}.lg\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.lg\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media (min-width:80rem){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:p-6{padding:calc(var(--spacing)*6)}}@media (min-width:96rem){.\32 xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.\32 xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.\32 xl\:p-8{padding:calc(var(--spacing)*8)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}
/* Local font-face definitions for Inter, Poppins and Nunito
   Generated to reduce third-party font requests and enable font-display:swap.
   Put WOFF2 files in /public/fonts/ (see performance-optimizations/download_fonts.sh)
*/

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/inter-700.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/poppins-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/poppins-600.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/nunito-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/nunito-600.woff2') format('woff2');
  font-display: swap;
}

/* Fallback stacks for best performance */
:root{--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;}
body{font-family:var(--font-sans)}

/* ==========================================================================
   TMPMailer — Nebula v2 design system
   Goals: ad-viewability + UX-first + SEO/Core-Web-Vitals friendly.
   Scoped under body.tm2 to avoid collisions with legacy stylesheets.
   ========================================================================== */

body.tm2 {
    --tm-brand:        #4f46e5;
    --tm-brand-2:      #7c3aed;
    --tm-brand-dark:   #3730a3;
    --tm-brand-soft:   #eef2ff;
    --tm-accent:       #f59e0b;
    --tm-bg:           #f5f6fa;
    --tm-surface:      #ffffff;
    --tm-surface-2:    #f8faff;
    --tm-border:       #e5e8f0;
    --tm-border-2:     #d8dcea;
    --tm-ink:          #0f172a;
    --tm-ink-2:        #475569;
    --tm-muted:        #8a94a6;
    --tm-success:      #16a34a;
    --tm-danger:       #dc2626;
    --tm-radius:       14px;
    --tm-radius-lg:    20px;
    --tm-radius-xl:    28px;
    --tm-shadow-sm:    0 1px 2px rgba(15, 23, 42, .05);
    --tm-shadow:       0 6px 24px -6px rgba(15, 23, 42, .10);
    --tm-shadow-lg:    0 24px 60px -12px rgba(15, 23, 42, .18);
    --tm-ring:         0 0 0 4px rgba(79, 70, 229, .16);
    --tm-font-display: 'Poppins', 'Inter', system-ui, sans-serif;
    --tm-font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --tm-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    margin: 0;
    background: var(--tm-bg);
    color: var(--tm-ink);
    font-family: var(--tm-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body.tm2 *, body.tm2 *::before, body.tm2 *::after { box-sizing: border-box; }
body.tm2 img { max-width: 100%; height: auto; }
body.tm2 a { color: var(--tm-brand); text-decoration: none; transition: color .2s ease; }
body.tm2 a:hover { color: var(--tm-brand-dark); }
body.tm2 :focus-visible { outline: none; box-shadow: var(--tm-ring); border-radius: 8px; }
body.tm2 button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
    body.tm2 *, body.tm2 *::before, body.tm2 *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Layout primitives ---------- */
.tm2-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px)  { .tm2-container { padding-inline: 28px; } }
@media (min-width: 1440px) { .tm2-container { max-width: 1240px; } }

.tm2-section { margin-top: 56px; }
@media (min-width: 768px) { .tm2-section { margin-top: 80px; } }

.tm2-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tm-brand);
}
.tm2-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tm-brand), var(--tm-brand-2)); }

.tm2-h1, .tm2-h2, .tm2-h3 { font-family: var(--tm-font-display); font-weight: 600; line-height: 1.15; color: var(--tm-ink); margin: 0; letter-spacing: -.02em; }
.tm2-h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
.tm2-h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.tm2-h3 { font-size: 1.125rem; }
.tm2-lead { color: var(--tm-ink-2); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.7; margin: 0; }

.tm2-panel {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
}

/* ---------- Buttons ---------- */
.tm2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 22px;
    border: 0; border-radius: 14px; cursor: pointer;
    font-size: 15px; font-weight: 600; line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
    -webkit-tap-highlight-color: transparent; user-select: none;
}
.tm2-btn:active { transform: translateY(1px) scale(.99); }
.tm2-btn-primary,
.tm2-btn-brand,
body.tm2 a.tm2-btn-brand,
body.tm2 button.tm2-btn-brand {
    color: #fff !important;
    background: var(--tm-grad-accent, linear-gradient(135deg, var(--tm-brand) 0%, var(--tm-brand-2) 100%));
    box-shadow: 0 10px 24px -8px rgba(79, 70, 229, .55);
}
.tm2-btn-primary:hover,
.tm2-btn-brand:hover,
body.tm2 a.tm2-btn-brand:hover { color: #fff !important; box-shadow: 0 14px 30px -8px rgba(79, 70, 229, .65); transform: translateY(-1px); }
.tm2-btn-soft { color: var(--tm-brand-dark); background: var(--tm-brand-soft); }
.tm2-btn-soft:hover { color: var(--tm-brand-dark); background: #e2e9ff; }
.tm2-btn-ghost { color: var(--tm-ink-2); background: var(--tm-surface-2); border: 1px solid var(--tm-border); }
.tm2-btn-ghost:hover { color: var(--tm-ink); background: var(--tm-surface); border-color: var(--tm-border-2); }
.tm2-btn-danger-ghost { color: var(--tm-danger); background: transparent; }
.tm2-btn-danger-ghost:hover { color: var(--tm-danger); background: #fef2f2; }
.tm2-btn-sm { min-height: 42px; padding: 10px 16px; font-size: 14px; border-radius: 12px; }

/* ---------- Header ---------- */
.tm2-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.tm2-header.is-scrolled { border-bottom-color: var(--tm-border); box-shadow: 0 8px 30px -12px rgba(15, 23, 42, .12); }
.tm2-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }

.tm2-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--tm-ink); }
.tm2-brand:hover { color: var(--tm-ink); }
.tm2-brand-mark {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--tm-brand), var(--tm-brand-2));
    box-shadow: 0 8px 18px -6px rgba(79, 70, 229, .55); overflow: hidden; flex: 0 0 auto;
    color: #fff;
}
.tm2-brand-mark svg { display: block; }
.tm2-brand-name { font-family: var(--tm-font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; }
.tm2-brand-name b { color: var(--tm-brand); font-weight: 700; }

.tm2-nav { display: none; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .tm2-nav { display: flex; } }
.tm2-nav-link {
    position: relative; display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: 12px; border: 0; background: transparent; cursor: pointer;
    font-size: 14.5px; font-weight: 600; color: var(--tm-ink-2);
    transition: color .2s ease, background .2s ease;
}
.tm2-nav-link:hover, .tm2-nav-link.is-active { color: var(--tm-brand-dark); background: var(--tm-brand-soft); }
.tm2-nav-link i { font-size: 11px; transition: transform .2s ease; }

.tm2-popover { position: relative; }
.tm2-popover-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
    width: min(560px, 92vw); padding: 14px; z-index: 70;
    background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: 20px;
    box-shadow: var(--tm-shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.tm2-popover.is-open .tm2-popover-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.tm2-popover.is-open > .tm2-nav-link i { transform: rotate(180deg); }
.tm2-popover-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; transition: background .18s ease; }
.tm2-popover-item:hover { background: var(--tm-surface-2); }
.tm2-popover-item .pi { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: var(--tm-brand-soft); color: var(--tm-brand); font-size: 15px; }
.tm2-popover-item .pt { font-weight: 600; font-size: 14.5px; color: var(--tm-ink); }
.tm2-popover-item .pd { font-size: 12.5px; color: var(--tm-muted); margin-top: 2px; }

.tm2-header-actions { display: flex; align-items: center; gap: 10px; }
.tm2-locale { position: relative; display: none; }
@media (min-width: 768px) { .tm2-locale { display: block; } }
.tm2-locale select {
    appearance: none; border: 1px solid var(--tm-border); background: var(--tm-surface-2);
    border-radius: 12px; padding: 10px 34px 10px 14px; font-size: 13.5px; font-weight: 600;
    color: var(--tm-ink-2); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease;
}
.tm2-locale select:hover { border-color: var(--tm-border-2); }
.tm2-locale::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; color: var(--tm-muted); position: absolute; right: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.tm2-header-cta { display: none; }
@media (min-width: 640px) { .tm2-header-cta { display: inline-flex; } }

.tm2-burger {
    width: 46px; height: 46px; border: 1px solid var(--tm-border); border-radius: 13px;
    background: var(--tm-surface); cursor: pointer; display: grid; place-items: center; padding: 0;
}
@media (min-width: 1024px) { .tm2-burger { display: none; } }
.tm2-burger span { display: block; width: 20px; height: 2px; margin: 2.5px 0; border-radius: 2px; background: var(--tm-ink); transition: transform .25s ease, opacity .2s ease; }
.tm2-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tm2-burger.is-open span:nth-child(2) { opacity: 0; }
.tm2-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tm2-mobile-menu {
    position: fixed; inset: 68px 0 auto 0; z-index: 55; padding: 10px 20px 22px;
    background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--tm-border); box-shadow: var(--tm-shadow-lg);
}
.tm2-mobile-menu a.tm2-mm-link {
    display: flex; align-items: center; gap: 14px; padding: 15px 12px; min-height: 52px;
    border-radius: 14px; color: var(--tm-ink); font-weight: 600; font-size: 16px;
    border-bottom: 1px solid var(--tm-border);
}
.tm2-mobile-menu a.tm2-mm-link:last-of-type { border-bottom: 0; }
.tm2-mobile-menu a.tm2-mm-link:hover, .tm2-mobile-menu a.tm2-mm-link.is-active { background: var(--tm-brand-soft); color: var(--tm-brand-dark); }
.tm2-mobile-menu a.tm2-mm-link .n { font-family: var(--tm-font-mono); font-size: 11px; color: var(--tm-muted); width: 22px; }
.tm2-mobile-menu a.tm2-mm-link i { margin-left: auto; font-size: 13px; color: var(--tm-muted); }
.tm2-mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 0; }
.tm2-mm-foot select { border: 1px solid var(--tm-border); border-radius: 12px; padding: 10px 12px; background: var(--tm-surface-2); font-weight: 600; color: var(--tm-ink-2); }
.tm2-mm-socials { display: flex; gap: 14px; font-size: 18px; }
.tm2-mm-socials a { color: var(--tm-ink-2); }
.tm2-mm-socials a:hover { color: var(--tm-brand); }

/* Mobile menu backdrop overlay */
.tm2-mobile-backdrop {
    position: fixed; inset: 68px 0 0 0; z-index: 54;
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* ---------- Hero ---------- */
.tm2-hero { position: relative; padding: 44px 0 10px; overflow: hidden; }
@media (min-width: 768px) { .tm2-hero { padding: 64px 0 16px; } }
.tm2-hero::before {
    content: ""; position: absolute; inset: -20% -10% auto -10%; height: 560px; z-index: -1;
    background:
        radial-gradient(520px 300px at 12% 20%, rgba(79, 70, 229, .14), transparent 65%),
        radial-gradient(480px 280px at 85% 12%, rgba(124, 58, 237, .12), transparent 65%),
        radial-gradient(420px 260px at 55% 45%, rgba(245, 158, 11, .07), transparent 60%);
    pointer-events: none;
}
.tm2-hero-inner { max-width: 820px; margin-inline: auto; text-align: center; }
.tm2-chips, .tm2-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.tm2-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
    border-radius: 999px; background: var(--tm-surface); border: 1px solid var(--tm-border);
    font-size: 12.5px; font-weight: 600; color: var(--tm-ink-2); box-shadow: var(--tm-shadow-sm);
}
.tm2-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tm-success); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.tm2-chip i { color: var(--tm-brand); font-size: 12px; }
.tm2-hero .tm2-h1 { margin-top: 6px; }
.tm2-hero .tm2-h1 .grad {
    background: linear-gradient(120deg, var(--tm-brand) 10%, var(--tm-brand-2) 60%, #a855f7 95%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.tm2-hero-sub { max-width: 640px; margin: 18px auto 0; }

/* ---------- Address bar (email actions) ---------- */
.tm2-mailbox { padding: 18px 0 0; }
.tm2-address-card {
    position: relative; padding: 22px; min-height: 312px;
    background: linear-gradient(180deg, var(--tm-surface), var(--tm-surface-2));
    border: 1px solid var(--tm-border); border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow); width: 100%;
}
/* The Livewire address widget is 140px tall on first paint and grows to its
   hydrated height a moment later, which pushed the whole page down and was
   the main mobile CLS source on the home and service pages. Reserve the final
   height per breakpoint so the first paint already occupies that space. */
@media (min-width: 480px) { .tm2-address-card { min-height: 288px; } }
@media (min-width: 640px) { .tm2-address-card { min-height: 238px; } }
@media (min-width: 768px) { .tm2-address-card { padding: 26px 28px; min-height: 222px; } }
.tm2-address-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
    border-radius: var(--tm-radius-xl) 0 0 var(--tm-radius-xl);
    background: linear-gradient(180deg, var(--tm-brand), var(--tm-brand-2));
}
.tm2-address-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.tm2-address-label .t { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tm-muted); }
.tm2-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--tm-success); }
.tm2-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-success); animation: tm2-pulse 1.8s ease-out infinite; }
@keyframes tm2-pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

.tm2-address-bar {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px;
    background: var(--tm-surface-2); border: 1.5px solid var(--tm-border-2);
    border-radius: 16px; transition: border-color .2s ease, box-shadow .2s ease;
}
.tm2-address-bar:focus-within { border-color: var(--tm-brand); box-shadow: var(--tm-ring); background: var(--tm-surface); }
.tm2-address-bar .env { color: var(--tm-brand); font-size: 18px; flex: 0 0 auto; }
.tm2-address-bar #email_id {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--tm-font-mono); font-size: clamp(14px, 2.6vw, 17px); font-weight: 600;
    color: var(--tm-ink); letter-spacing: -.01em;
}
.tm2-address-bar .tm2-btn { flex: 0 0 auto; }

.tm2-action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 640px) { .tm2-action-grid { grid-template-columns: repeat(4, 1fr); } }
.tm2-action-grid .tm2-btn { width: 100%; }

.tm2-quick-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 16px; font-size: 13px; }
.tm2-quick-links a { color: var(--tm-muted); font-weight: 500; }
.tm2-quick-links a:hover { color: var(--tm-brand); }

.tm2-create-form input[type="text"], .tm2-create-form select {
    width: 100%; min-height: 50px; padding: 12px 16px; margin-bottom: 10px;
    border: 1.5px solid var(--tm-border-2); border-radius: 14px; background: var(--tm-surface);
    font-size: 15px; color: var(--tm-ink); transition: border-color .2s ease, box-shadow .2s ease;
}
.tm2-create-form input[type="text"]:focus { border-color: var(--tm-brand); box-shadow: var(--tm-ring); outline: none; }

/* ---------- Inbox ---------- */
.tm2-inbox-wrap { margin: 26px auto 0; }
.tm2-inbox-card { overflow: hidden; min-height: 280px; }
.tm2-inbox-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px 22px; border-bottom: 1px solid var(--tm-border);
    background: linear-gradient(180deg, var(--tm-surface), var(--tm-surface-2));
}
.tm2-inbox-head .tm2-h3 { display: flex; align-items: center; gap: 10px; }
.tm2-inbox-head .ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--tm-brand-soft); color: var(--tm-brand); font-size: 14px; }
.tm2-refresh-hint { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tm-muted); font-weight: 600; }
.tm2-refresh-hint svg { animation: tm2-spin 2.2s linear infinite; }
.pause-spinner { animation-play-state: paused !important; }
@keyframes tm2-spin { to { transform: rotate(360deg); } }

.tm2-msg-cols { display: none; }
@media (min-width: 640px) {
    .tm2-msg-cols { display: flex; gap: 12px; padding: 12px 22px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--tm-muted); border-bottom: 1px solid var(--tm-border); background: var(--tm-surface); }
}
.tm2-msg-cols .c-from { width: 34%; } .tm2-msg-cols .c-subj { flex: 1; } .tm2-msg-cols .c-time { width: 90px; text-align: right; }

.tm2-msg { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 22px; background: var(--tm-surface); border: 0; border-bottom: 1px solid var(--tm-border); cursor: pointer; text-align: left; transition: background .15s ease; }
.tm2-msg:hover { background: var(--tm-surface-2); }
.tm2-msg:last-child { border-bottom: 0; }
.tm2-msg.unread { background: linear-gradient(90deg, rgba(79,70,229,.08), var(--tm-surface) 40%); }
.tm2-msg.unread .s-name::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--tm-brand); }
.tm2-msg .c-from { width: 34%; min-width: 0; }
.tm2-msg .s-name { display: block; font-weight: 700; font-size: 14.5px; color: var(--tm-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm2-msg .s-mail { display: block; font-size: 12px; color: var(--tm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm2-msg .c-subj { flex: 1; min-width: 0; font-size: 14px; color: var(--tm-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm2-msg .c-time { width: 90px; flex: 0 0 auto; text-align: right; font-size: 12px; color: var(--tm-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
    .tm2-msg { flex-wrap: wrap; }
    .tm2-msg .c-from { width: calc(100% - 100px); }
    .tm2-msg .c-subj { flex-basis: 100%; padding-left: 15px; }
}

.tm2-inbox-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 52px 22px 56px; text-align: center; color: var(--tm-muted); }
.tm2-inbox-empty .ring { position: relative; width: 84px; height: 84px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 50%; background: var(--tm-brand-soft); color: var(--tm-brand); font-size: 30px; }
.tm2-inbox-empty .ring::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed rgba(79,70,229,.35); animation: tm2-spin 14s linear infinite; }
.tm2-inbox-empty .t1 { font-size: 17px; font-weight: 700; color: var(--tm-ink-2); }
.tm2-inbox-empty .t2 { font-size: 14px; max-width: 380px; }

.tm2-detail-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--tm-border); background: var(--tm-surface-2); }
.tm2-detail-meta { padding: 20px 22px 0; }
.tm2-detail-meta .sub { font-family: var(--tm-font-display); font-size: 19px; font-weight: 600; color: var(--tm-ink); line-height: 1.35; }
.tm2-detail-meta .from { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13.5px; color: var(--tm-ink-2); }
.tm2-detail-meta .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--tm-brand), var(--tm-brand-2)); color: #fff; font-weight: 700; font-size: 15px; flex: 0 0 auto; }
.tm2-detail-body { padding: 14px 22px 24px; }
.tm2-detail-body iframe { width: 100%; min-height: 400px; border: 1px solid var(--tm-border); border-radius: 14px; background: #fff; }
.tm2-attach { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tm2-attach a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--tm-surface-2); border: 1px solid var(--tm-border); font-size: 13px; font-weight: 600; color: var(--tm-ink-2); transition: all .18s ease; }
.tm2-attach a:hover { border-color: var(--tm-brand); color: var(--tm-brand-dark); background: var(--tm-brand-soft); }

/* ---------- Ad slots (viewability-first) ---------- */
.ad-slot-wrapper { position: relative; width: 100%; }
.ad-slot-container {
    position: relative; width: 100%; display: flex; justify-content: center; align-items: flex-start;
    background: repeating-linear-gradient(45deg, #f4f6fb 0 12px, #eef1f8 12px 24px);
    border: 1px dashed var(--tm-border-2); border-radius: var(--tm-radius);
    overflow: hidden;
}
.ad-slot-label {
    display: block; text-align: center; font-size: 10px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: #aab2c5; margin-bottom: 6px;
}
.ad-slot-container ins.adsbygoogle,
.ad-slot-container ins.adsbygoogle-lazy { max-width: 100%; }
.tm2-ad-inline { margin: 30px auto 0; }
.tm2-ad-band { margin: 34px auto 0; }
.tm2-ad-band .ad-slot-container { border-radius: var(--tm-radius-lg); }

/* Collapse genuinely empty ad containers only (no ins element rendered) */
.ad-slot-container:empty {
    min-height: 0 !important; height: 0; overflow: hidden; border: 0; padding: 0;
}
.tm2-collapsible-ad .ad-slot-wrapper:has(.ad-slot-container:empty) { display: none; }

/* No-fill / blocked units must not leave a big empty band. When AdSense
   reports no-fill (data-ad-status="unfilled" or the JS .is-unfilled fallback)
   collapse the whole collapsible section, not just the inner wrapper, so the
   inbox is never followed by ~450px of empty advertisement space. */
.tm2-collapsible-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.tm2-collapsible-ad:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]),
.tm2-collapsible-ad:has(.ad-slot-wrapper.is-unfilled) {
    display: none !important;
}

/* Homepage rail ad — hidden until there is real empty margin for it. */
.tm2-rail-ad { display: none; }
/* Pinned to the empty left margin on very wide screens (>=1920px) so a 300x250
   rectangle never overlaps the centred content. Below that the fixed rail would
   sit on top of the page, so it stays hidden and the in-content/sticky units do
   the work. */
@media (min-width: 1680px) {
    .tm2-rail-ad {
        display: block;
        position: fixed;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 300px;
        z-index: 40;
    }
}

/* Public/SEO page side rails — in-flow sticky columns on wide desktop viewports (>=1536px). */
.tm2-public-3col { display: block; width: 100%; }
.tm2-public-main { min-width: 0; width: 100%; }
.tm2-rail-col { display: none; }
.tm2-public-rail { display: none; }

@media (min-width: 1536px) {
    .tm2-public-3col {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr) 280px;
        max-width: 1720px;
        margin-inline: auto;
    }
    .tm2-rail-col { display: block; min-width: 0; }
    .tm2-public-rail {
        display: block;
        position: sticky;
        top: 88px;
        width: 280px;
        margin: 0 auto;
        padding-top: 12px;
    }
}
/* Side rails use a 300x250 rectangle. */
.tm2-public-rail .ad-slot-wrapper,
.tm2-rail-ad .ad-slot-wrapper { padding: 0 !important; }
.tm2-public-rail .ad-slot-container,
.tm2-rail-ad .ad-slot-container { border: 0 !important; padding: 0 !important; }

/* ---------- Content sections ---------- */
.tm2-main-grid { display: grid; gap: 26px; margin-top: 26px; }
@media (min-width: 1024px) { .tm2-main-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } }
.tm2-stack { display: grid; gap: 26px; }
.tm2-side { display: grid; gap: 22px; }
@media (min-width: 1024px) { .tm2-side { position: sticky; top: 92px; } }

.tm2-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.tm2-section-head .tm2-h2 { margin-top: 8px; }
.tm2-section-head p { margin: 8px 0 0; color: var(--tm-ink-2); max-width: 620px; }

.tm2-steps { display: grid; gap: 14px; }
@media (min-width: 768px) { .tm2-steps { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.tm2-step { position: relative; padding: 24px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.tm2-step:hover { transform: translateY(-3px); box-shadow: var(--tm-shadow); }
.tm2-step .num { font-family: var(--tm-font-display); font-size: 44px; font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--tm-brand), var(--tm-brand-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: .9; }
.tm2-step .tm2-h3 { margin-top: 12px; }
.tm2-step p { margin: 8px 0 0; font-size: 14px; color: var(--tm-ink-2); }

.tm2-cards { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .tm2-cards { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.tm2-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--tm-radius-lg); background: var(--tm-surface); border: 1px solid var(--tm-border); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tm2-card:hover { transform: translateY(-3px); box-shadow: var(--tm-shadow); border-color: var(--tm-border-2); color: var(--tm-ink); }
.tm2-card .ci { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--tm-brand-soft); color: var(--tm-brand); font-size: 16px; margin-bottom: 6px; }
.tm2-card .ct { font-weight: 700; font-size: 15px; color: var(--tm-ink); }
.tm2-card .cd { font-size: 13px; color: var(--tm-muted); line-height: 1.55; }

.tm2-list-panel { padding: 22px; }
.tm2-list-panel ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.tm2-list-panel ul a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--tm-ink-2); transition: all .15s ease; }
.tm2-list-panel ul a:hover { background: var(--tm-brand-soft); color: var(--tm-brand-dark); padding-left: 16px; }
.tm2-list-panel ul a i { font-size: 11px; color: var(--tm-muted); margin-left: auto; }

.tm2-faq details { border-bottom: 1px solid var(--tm-border); }
.tm2-faq details:last-child { border-bottom: 0; }
.tm2-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 4px; cursor: pointer; list-style: none; font-weight: 600; font-size: 15.5px; color: var(--tm-ink); transition: color .15s ease; }
.tm2-faq summary::-webkit-details-marker { display: none; }
.tm2-faq summary::after { content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; color: var(--tm-muted); transition: transform .2s ease; flex: 0 0 auto; }
.tm2-faq details[open] summary { color: var(--tm-brand-dark); }
.tm2-faq details[open] summary::after { transform: rotate(180deg); }
.tm2-faq details p { margin: 0; padding: 0 4px 18px; font-size: 14.5px; color: var(--tm-ink-2); line-height: 1.7; }

.tm2-split { display: grid; gap: 26px; }
@media (min-width: 1024px) { .tm2-split { grid-template-columns: 1.25fr 1fr; gap: 28px; align-items: start; } }

/* ---------- Footer ---------- */
.tm2-footer { margin-top: 90px; background: #0d1226; color: #b7bfd6; position: relative; overflow: hidden; }
.tm2-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--tm-brand), var(--tm-brand-2), #a855f7); }
.tm2-footer-grid { display: grid; gap: 34px; padding: 60px 0 40px; }
@media (min-width: 768px) { .tm2-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } }
.tm2-footer h4 { margin: 0 0 16px; font-family: var(--tm-font-display); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.tm2-footer a { color: #b7bfd6; font-size: 14px; }
.tm2-footer a:hover { color: #fff; }
.tm2-footer .flinks { display: grid; gap: 10px; }
.tm2-footer-brand .tm2-brand-name { color: #fff; font-size: 1.35rem; }
.tm2-footer-brand p { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: #93a; color: #98a1bd; max-width: 300px; }
.tm2-footer select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #e7eaf5; font-size: 14px; font-weight: 600; cursor: pointer; }
.tm2-footer select option { color: #0f172a; }
.tm2-footer .fsocials { display: flex; gap: 14px; margin-top: 18px; font-size: 18px; }
.tm2-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 22px 0 26px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #7e88a5; }
.tm2-footer-bottom a { color: #98a1bd; }

/* ---------- Prose / content pages ---------- */
.tm2-prose { color: var(--tm-ink-2); font-size: 16px; line-height: 1.8; }
.tm2-prose h1, .tm2-prose h2, .tm2-prose h3, .tm2-prose h4 { font-family: var(--tm-font-display); color: var(--tm-ink); line-height: 1.3; margin: 1.6em 0 .6em; letter-spacing: -.01em; }
.tm2-prose h2 { font-size: 1.55rem; } .tm2-prose h3 { font-size: 1.25rem; }
.tm2-prose p { margin: 0 0 1.15em; }
.tm2-prose a { color: var(--tm-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(79,70,229,.35); }
.tm2-prose a:hover { text-decoration-color: var(--tm-brand); }
.tm2-prose ul, .tm2-prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.tm2-prose li { margin-bottom: .45em; }
.tm2-prose img { border-radius: var(--tm-radius-lg); }
.tm2-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--tm-brand); color: var(--tm-ink); font-style: italic; background: var(--tm-brand-soft); border-radius: 0 14px 14px 0; padding: 14px 18px; }
.tm2-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 14.5px; }
.tm2-prose th, .tm2-prose td { padding: 11px 14px; border: 1px solid var(--tm-border); text-align: left; }
.tm2-prose th { background: var(--tm-surface-2); font-weight: 700; color: var(--tm-ink); }
.tm2-prose code { font-family: var(--tm-font-mono); font-size: .88em; background: var(--tm-brand-soft); color: var(--tm-brand-dark); padding: 2px 7px; border-radius: 7px; }
.tm2-prose pre { background: #0d1226; color: #dbe2f4; padding: 18px; border-radius: var(--tm-radius-lg); overflow-x: auto; }
.tm2-prose pre code { background: none; color: inherit; padding: 0; }

/* ---------- Misc utilities ---------- */
.tm2-skip { position: fixed; top: -60px; left: 16px; z-index: 9999; background: var(--tm-ink); color: #fff; padding: 10px 18px; border-radius: 0 0 12px 12px; font-size: 13px; font-weight: 700; transition: top .2s ease; }
.tm2-skip:focus { top: 0; color: #fff; }

.tm2-reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.tm2-reveal.is-in { opacity: 1; transform: none; }

.tm2-skeleton { position: relative; overflow: hidden; background: #e9edf5; border-radius: 12px; }
.tm2-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: tm2-shimmer 1.4s infinite; }
@keyframes tm2-shimmer { to { transform: translateX(100%); } }

#copy-toast {
    position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 16px); z-index: 9990;
    display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px;
    background: var(--tm-ink); color: #fff; border-radius: 999px; box-shadow: var(--tm-shadow-lg);
    font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
#copy-toast.show { opacity: 1; transform: translate(-50%, 0); }
#copy-toast .ok { color: #4ade80; }

.tm2-cookie { position: fixed; inset: auto 0 0 0; z-index: 9980; padding: 14px; }
.tm2-cookie-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; max-width: 880px; margin-inline: auto; padding: 18px 22px; background: var(--tm-surface); border: 1px solid var(--tm-border); border-radius: 20px; box-shadow: var(--tm-shadow-lg); }
.tm2-cookie-inner p { margin: 0; font-size: 13.5px; color: var(--tm-ink-2); line-height: 1.6; flex: 1 1 320px; }

.tm2-imap-error { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 300px; padding: 30px; text-align: center; }
.tm2-imap-error .box { max-width: 420px; }
.tm2-imap-error .ic { width: 52px; height: 52px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: #fef2f2; color: var(--tm-danger); font-size: 20px; }

.tm2-anchor-pad { display: none; }
/* On mobile the anchor ad sits ABOVE the 56px bottom nav, so the footer needs
   ~112px of clearance for it in addition to the bottom-nav pad. */
@media (max-width: 1023px) { body.tm2.has-anchor .tm2-anchor-pad { display: block; height: calc(112px + env(safe-area-inset-bottom, 0px)); } }

body.tm2 [x-cloak] { display: none !important; }


/* ==========================================================================
   Dark theme — toggled via <html class="tm2-dark"> (persisted in localStorage)
   Only the design tokens change; every component inherits through var().
   ========================================================================== */
html.tm2-dark { color-scheme: dark; }
html.tm2-dark body.tm2 {
    --tm-brand:        #818cf8;
    --tm-brand-2:      #a78bfa;
    --tm-brand-dark:   #c7d2fe;
    --tm-brand-soft:   rgba(129, 140, 248, .16);
    --tm-accent:       #fbbf24;
    --tm-bg:           #0a0f1e;
    --tm-surface:      #111a30;
    --tm-surface-2:    #0d1526;
    --tm-border:       #22304e;
    --tm-border-2:     #2d3f63;
    --tm-ink:          #e8edf8;
    --tm-ink-2:        #a4b1cc;
    --tm-muted:        #8492aa; /* ≥6:1 on --tm-bg (was #66748f = 4.05:1) */
    --tm-shadow-sm:    0 1px 2px rgba(0, 0, 0, .4);
    --tm-shadow:       0 6px 24px -6px rgba(0, 0, 0, .5);
    --tm-shadow-lg:    0 24px 60px -12px rgba(0, 0, 0, .6);
    --tm-ring:         0 0 0 4px rgba(129, 140, 248, .25);
}
html.tm2-dark body.tm2 .tm2-cookie-inner { background: var(--tm-surface); }
html.tm2-dark body.tm2 .tm2-imap-error .ic { background: rgba(220, 38, 38, .15); }

/* Theme toggle button in the header */
.tm2-theme-toggle {
    width: 38px; height: 38px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--tm-border); border-radius: 12px;
    background: var(--tm-surface); color: var(--tm-ink-2);
    cursor: pointer; font-size: 15px;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.tm2-theme-toggle:hover { color: var(--tm-brand); border-color: var(--tm-brand); transform: translateY(-1px); }
.tm2-theme-toggle .fa-sun { display: none; }
html.tm2-dark .tm2-theme-toggle .fa-sun { display: inline-block; }
html.tm2-dark .tm2-theme-toggle .fa-moon { display: none; }

/* New-mail toast */
#tm2-mail-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 9995;
    display: flex; align-items: center; gap: 10px;
    background: var(--tm-ink); color: var(--tm-bg);
    padding: 12px 18px; border-radius: 14px; box-shadow: var(--tm-shadow-lg);
    font-size: 14px; font-weight: 600;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
}
#tm2-mail-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
#tm2-mail-toast .ic { color: var(--tm-brand-2); }
#tm2-mail-toast .msg { white-space: nowrap; }
#tm2-mail-toast .tm2-mail-toast-open {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 4px; padding: 6px 12px; border-radius: 999px;
    background: var(--tm-brand-2); color: #0b1020;
    font-weight: 800; text-decoration: none; white-space: nowrap;
    transition: transform .15s ease, filter .15s ease;
}
#tm2-mail-toast .tm2-mail-toast-open:hover { transform: translateY(-1px); filter: brightness(1.05); }
#tm2-mail-toast .tm2-mail-toast-open i { font-size: 11px; }
/* Keep the toast clear of the mobile bottom nav / anchor ad. */
@media (max-width: 1023px) {
    #tm2-mail-toast {
        left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom, 0px));
        justify-content: space-between;
    }
    #tm2-mail-toast .msg { white-space: normal; }
}

/* ==========================================================================
   Inbox skeleton — matches live inbox metrics (no layout jump on swap)
   ========================================================================== */
.tm2-skel { padding: 14px 22px 22px; min-height: 300px; }
.tm2-skel-row {
    height: 58px; margin-bottom: 12px; border-radius: 14px;
    background: linear-gradient(90deg,
        var(--tm-surface-2) 25%,
        var(--tm-border) 50%,
        var(--tm-surface-2) 75%);
    background-size: 200% 100%;
    animation: tm2-skel-shimmer 1.4s ease infinite;
}
.tm2-skel-row:nth-child(2) { animation-delay: .12s; }
.tm2-skel-row:nth-child(3) { animation-delay: .24s; }
@keyframes tm2-skel-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.tm2-skel-noscript { margin-top: 16px; padding: 18px; text-align: center; background: #fef3c7; border-radius: 12px; }
.tm2-skel-noscript p { color: #92400e; font-weight: 600; margin: 0; }

/* ==========================================================================
   Ad slots — collapse unfilled / blocked units (no ghost vertical space)
   ========================================================================== */
/* AdSense marks no-fill units with data-ad-status="unfilled"; ad blockers
   remove the ins entirely. In both cases the wrapper must give its space
   back. The :has() rule covers modern browsers; the .is-unfilled class is
   added by nebula-v2.js as a fallback. */
.ad-slot-wrapper:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.ad-slot-wrapper:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]),
.ad-slot-wrapper.is-unfilled {
    display: none !important;
}
.ad-slot-container:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.ad-slot-container:has(ins.adsbygoogle[data-ad-status="unfill-optimized"]) {
    min-height: 0 !important; height: 0 !important; border: 0; padding: 0;
}
ins.adsbygoogle[data-ad-status="unfilled"],
ins.adsbygoogle[data-ad-status="unfill-optimized"] { display: none !important; }

/* ---------- Copy button feedback ---------- */
.tm2-copy-btn { position: relative; min-width: 96px; justify-content: center; }
.tm2-copy-btn .tm2-copy-done { display: none; }
.tm2-copy-btn.is-copied .tm2-copy-idle { display: none; }
.tm2-copy-btn.is-copied .tm2-copy-done { display: inline-flex; align-items: center; gap: 6px; }
.tm2-copy-btn.is-copied { background: var(--tm-success); border-color: var(--tm-success); color: #fff; }

/* ---------- Inbox empty-state hint ---------- */
.tm2-inbox-empty-hint {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    margin-top: 14px; font-size: 13px; color: var(--tm-muted);
    background: var(--tm-surface-2); border: 1px dashed var(--tm-border-2);
    border-radius: 12px; padding: 10px 14px; max-width: 420px; margin-inline: auto;
}
.tm2-inbox-empty-hint i { color: var(--tm-brand); flex: 0 0 auto; }

/* ---------- Unread badge ---------- */
.tm2-unread-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px;
    border-radius: 999px; background: var(--tm-brand); color: #fff;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

/* ---------- Mobile refinements (Agent 07) ---------- */
@media (max-width: 639px) {
    /* Email detail: subject + delete must not overflow on narrow phones */
    .tm2-detail-meta > div:first-child { flex-wrap: wrap; }
    .tm2-detail-meta .sub { font-size: 17px; min-width: 0; flex: 1 1 auto; word-break: break-word; }
    .tm2-detail-meta .sub + .tm2-btn { flex: 0 0 auto; }

    /* Address bar: keep copy button reachable, allow email to truncate */
    .tm2-address-bar { padding-left: 14px; gap: 8px; }
    .tm2-address-bar .env { display: none; }
    .tm2-address-bar #email_id { font-size: 14px; }
    .tm2-copy-btn { min-width: 88px; }

    /* Reader iframe: comfortable reading height on phones */
    .tm2-detail-body iframe { min-height: 60vh; }

    /* Action grid: single column on very narrow phones for big touch targets */
    .tm2-action-grid { grid-template-columns: 1fr 1fr; }
    .tm2-action-grid .tm2-btn { min-height: 48px; }
}

/* ---------- Cookie banner show/hide (Tailwind .hidden/.flex utilities are purged) ---------- */
#cookie.hidden { display: none !important; }
#cookie.flex { display: block !important; }

/* ---------- Mobile menu fallback (vanilla JS, Alpine-independent) ---------- */
.tm2-mobile-menu { display: none; }
.tm2-mobile-menu.is-open { display: block; }
.tm2-mobile-backdrop { display: none; }
.tm2-mobile-backdrop.is-open { display: block; }

/* ---------- Mobile side drawer (native-app-like) ---------- */
.tm2-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: min(300px, 84vw); max-width: 320px;
    background: var(--tm-surface); border-right: 1px solid var(--tm-border);
    box-shadow: var(--tm-shadow-lg); display: flex; flex-direction: column;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.tm2-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--tm-border);
    min-height: 60px; flex: 0 0 auto;
}
.tm2-drawer-close {
    width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--tm-surface-2);
    color: var(--tm-ink-2); cursor: pointer; display: grid; place-items: center; font-size: 16px;
}
.tm2-drawer-close:hover { background: var(--tm-brand-soft); color: var(--tm-brand-dark); }
.tm2-drawer-nav { padding: 8px 12px 24px; flex: 1 1 auto; }
.tm2-drawer-group { display: flex; flex-direction: column; gap: 2px; }
.tm2-drawer-link {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 13px 12px; min-height: 48px; border: 0; border-radius: 12px;
    background: transparent; color: var(--tm-ink-2); font-size: 15px; font-weight: 600;
    text-align: left; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.tm2-drawer-link i { width: 20px; text-align: center; color: var(--tm-muted); font-size: 15px; }
.tm2-drawer-link:hover { background: var(--tm-surface-2); }
.tm2-drawer-link.is-active { background: var(--tm-brand-soft); color: var(--tm-brand-dark); }
.tm2-drawer-link.is-active i { color: var(--tm-brand); }
.tm2-drawer-divider { height: 1px; background: var(--tm-border); margin: 10px 4px; }
.tm2-drawer-locale { padding: 4px 12px 8px; }
.tm2-drawer-locale select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--tm-border); border-radius: 12px;
    background: var(--tm-surface-2); color: var(--tm-ink-2); font-size: 14px; font-weight: 600;
}

/* ---------- Mobile bottom navigation ---------- */
.tm2-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; align-items: stretch; justify-content: space-around;
    background: var(--tm-surface); border-top: 1px solid var(--tm-border);
    box-shadow: 0 -6px 20px -10px rgba(15, 23, 42, .12);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tm2-bottomnav-item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; padding: 6px 4px; border: 0; background: transparent;
    color: var(--tm-muted); font-size: 11px; font-weight: 600; cursor: pointer;
    transition: color .15s ease;
}
.tm2-bottomnav-item i { font-size: 19px; }
.tm2-bottomnav-item.is-active { color: var(--tm-brand); }
.tm2-bottomnav-item:hover { color: var(--tm-brand-dark); }
.tm2-bottomnav-pad { height: calc(56px + env(safe-area-inset-bottom, 0px)); }
body.tm2-bottomnav-pad { height: auto !important; display: block !important; }
@media (min-width: 1024px) {
    .tm2-bottomnav, div.tm2-bottomnav-pad { display: none; }
}

/* ---------- Drawer vanilla fallback (Alpine-independent) ---------- */
.tm2-drawer { display: none; }
.tm2-drawer.is-open { display: flex; }
.tm2-mobile-backdrop { display: none; }
.tm2-mobile-backdrop.is-open { display: block; }

/* ---------- Overflow safety (fix actual sources, not just hide) ---------- */
html, body { max-width: 100%; }
body.tm2 { overflow-x: hidden; } /* final defensive measure after fixing sources */

/* Email reader: contain wide email HTML inside the viewport. The iframe is
   sandboxed (no allow-scripts) and width:100%, so email content cannot push
   the page wider. */
.tm2-detail-body { min-width: 0; max-width: 100%; }
.tm2-detail-body iframe { max-width: 100%; display: block; }

/* Long unbroken content must wrap, never expand the page. */
.tm2-address-bar #email_id,
.tm2-detail-meta .sub,
.tm2-prose,
.tm2-prose p,
.tm2-prose a,
.tm2-prose li,
.tm2-prose td,
.tm2-prose th {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Images never exceed their container. */
.tm2-prose img,
.tm2-prose table,
.tm2-detail-body img { max-width: 100%; height: auto; }

/* Code/pre blocks scroll internally, never the page. */
.tm2-prose pre { max-width: 100%; overflow-x: auto; }

/* Flex children must be allowed to shrink. */
.tm2-main-grid > *,
.tm2-stack > *,
.tm2-split > *,
.tm2-cards > *,
.tm2-steps > * { min-width: 0; }

/* ---------- OTP / verification cards (email reader) ---------- */
.tm2-otp-card {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px 18px; margin-bottom: 14px; border-radius: 16px;
    background: var(--tm-brand-soft); border: 1px solid var(--tm-border-2);
}
.tm2-otp-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tm-muted); width: 100%; }
.tm2-otp-code {
    font-family: var(--tm-font-mono); font-size: 26px; font-weight: 700; letter-spacing: .12em;
    color: var(--tm-brand-dark); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word;
}
.tm2-verify-card { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

/* ---------- Cookie banner actions ---------- */
.tm2-cookie-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }

/* ==========================================================================
   Fixed-bar coordination (mobile) — one coherent stack, no dead overlays
   ========================================================================== */
/* Anchor ad: resurrect as a working mobile anchor ABOVE the bottom nav.
   Previously #ad-anchor carried `hidden` and no script ever revealed it
   (dead slot, zero impressions). Now shown on mobile only. */
#ad-anchor,
.ad-anchor {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 65; /* below cookie (9980) & toasts; above content */
    background: var(--tm-surface); border-top: 1px solid var(--tm-border);
    box-shadow: 0 -6px 20px -10px rgba(15, 23, 42, .18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ad-anchor-inner { position: relative; max-width: 728px; margin-inline: auto; padding: 6px 10px 4px; }
.ad-anchor-close {
    position: absolute; top: 4px; right: 4px; z-index: 2;
    width: 32px; height: 32px; border: 0; border-radius: 50%;
    background: rgba(15, 23, 42, .06); color: var(--tm-ink-2);
    display: grid; place-items: center; cursor: pointer;
}
html.tm2-dark body.tm2 .ad-anchor-close { background: rgba(255,255,255,.1); color: var(--tm-ink-2); }
.ad-anchor-close svg { width: 16px; height: 16px; }
.ad-anchor-unit { display: block; }

/* Spacer so content/footer is never covered */
body.tm2.has-anchor { }
.tm2-anchor-adspace { display: none; }
/* The anchor ad is a fixed bar; the space it occupies at the very end of the
   document is handled by .tm2-anchor-pad above — do not add a mid-page spacer
   (that previously left a blank band between content and the footer). */
body.tm2.has-anchor .tm2-anchor-adspace { display: none; }

/* Mobile: anchor sits ABOVE the 56px bottom nav */
@media (max-width: 1023px) {
    body.tm2.has-anchor #ad-anchor,
    body.tm2.has-anchor .ad-anchor { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}
/* Desktop: no bottom nav -> anchor sits at the very bottom edge */
@media (min-width: 1024px) {
    #ad-anchor, .ad-anchor { display: none; } /* anchor is a mobile-only format */
}

/* When cookie banner or app prompt is visible, they take the bottom layer;
   anchor slides up above them via body classes managed by JS. */
body.tm2.has-cookiebar #ad-anchor,
body.tm2.has-cookiebar .ad-anchor { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 76px); }
body.tm2.has-appprompt #ad-anchor,
body.tm2.has-appprompt .ad-anchor { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 72px); }

/* ==========================================================================
   Header redesign — 3-column desktop grid + compact mobile header
   ========================================================================== */
/* Desktop: brand | centered nav | actions — true visual centering */
@media (min-width: 1024px) {
    .tm2-header-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        height: 68px;
        gap: 24px;
    }
    .tm2-nav { justify-self: center; }
    .tm2-header-actions { justify-self: end; }
}

/* Mobile: compact app-style bar */
@media (max-width: 1023px) {
    .tm2-header-row {
        height: 58px;
        gap: 10px;
    }
    .tm2-brand { gap: 9px; }
    .tm2-brand-mark { width: 34px; height: 34px; border-radius: 10px; }
    .tm2-brand-mark svg { width: 19px; height: 19px; }
    .tm2-brand-name { font-size: 1.08rem; }
    .tm2-header-actions { gap: 8px; }
    .tm2-theme-toggle { width: 42px; height: 42px; font-size: 16px; }
    .tm2-burger { width: 42px; height: 42px; }
    /* Secondary controls live in the drawer on mobile — header stays clean */
    .tm2-header-cta { display: none !important; }
    .tm2-locale { display: none !important; }
}

/* ==========================================================================
   Mobile overflow fixes (verified via headless Chrome at 320–430px)
   Root chain: cookie/p flex-basis 320px + actions > viewport  →  doc widens
   → all left:0/right:0 fixed bars follow, widening to doc width.
   ========================================================================== */

/* 1. Every full-width fixed bar is hard-capped to the visual viewport */
#ad-anchor, .ad-anchor, .tm2-bottomnav, #cookie, .tm2-cookie {
    max-width: 100vw;
}
.tm2-cookie-inner {
    max-width: 100%;
}
@media (max-width: 1023px) {
    /* Cookie text must be allowed to shrink instead of forcing the page wide */
    .tm2-cookie-inner p { flex: 1 1 0 !important; min-width: 0 !important; }
    .tm2-cookie-inner { padding: 14px 16px; gap: 10px; }
    .ad-anchor-inner { max-width: 100%; padding-inline: 8px; }
    #ad-anchor, .ad-anchor { width: 100vw; max-width: 100vw; overflow: hidden; }
    .tm2-bottomnav { width: 100vw; max-width: 100vw; overflow: hidden; }
    .tm2-cookie { width: 100vw; max-width: 100vw; overflow: hidden; }
    .tm2-cookie .tm2-cookie-actions { flex: 0 1 auto; }
}

/* Sidebar panels stack under the main flow on mobile — allow them to shrink
   (their promo link rows have inline flex styles without min-width:0) */
@media (max-width: 1023px) {
    .tm2-side .tm2-panel { min-width: 0; max-width: 100%; overflow: hidden; }
    .tm2-side .tm2-panel a[style] { min-width: 0; }
    .tm2-side .tm2-panel a[style] span:first-child { flex-shrink: 0; }
    .tm2-side .tm2-panel a[style] i { flex-shrink: 0; margin-left: auto !important; }
}

/* Global safety: no element may push the document wider than the viewport */
.tm2-main-grid, .tm2-stack, .tm2-side, .tm2-stack > *, .tm2-side > *,
.tm2-split > *, .tm2-cards > *, .tm2-steps > * {
    max-width: 100%;
}

/* Top-ten rank cards: flex children must shrink on narrow screens
   (rank-number + rank-body overflow at <560px, verified) */
.editorial-rank { min-width: 0; }
.editorial-rank .rank-number { flex: 0 0 auto; }
.editorial-rank .rank-body { min-width: 0; }
.editorial-rank .rank-body > div { min-width: 0; }
.editorial-rank .rank-body .flex.items-center { flex-wrap: wrap; gap: 10px; }
.editorial-rank .rank-title { overflow-wrap: anywhere; word-break: break-word; }
.editorial-rank .rank-meta { overflow-wrap: anywhere; }

/* Top-ten rank card inner rows: emoji icon + meta could exceed 320px cards */
.editorial-rank .rank-body .flex.items-center > div > div { min-width: 0; }
.editorial-rank .rank-body .text-xs.font-semibold { white-space: normal; overflow-wrap: anywhere; }
.editorial-rank .rank-body .text-3xl { flex: 0 0 auto; font-size: 1.75rem; line-height: 1; }
.editorial-rank .rank-body .flex.items-center { flex-wrap: wrap; }

/* ==========================================================================
   Visual polish — subtle gradients & mobile spacing (2026-08)
   ========================================================================== */
:root {
    /* Extra brand stops for richer gradients (used across hero/cards/CTAs) */
    --tm-grad-hero: linear-gradient(135deg, #4f46e5 0%, #6366f1 45%, #8b5cf6 100%);
    --tm-grad-card: linear-gradient(180deg, #ffffff 0%, #f6f7ff 100%);
    --tm-grad-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
}
html.tm2-dark body.tm2 {
    --tm-grad-card: linear-gradient(180deg, #111a30 0%, #0e1730 100%);
    --tm-grad-hero: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
}

/* Richer hero backdrop (keeps existing layout, only paints) */
.tm2-hero::before {
    background:
        radial-gradient(560px 320px at 12% 18%, rgba(99, 102, 241, .20), transparent 62%),
        radial-gradient(520px 300px at 86% 10%, rgba(168, 85, 247, .16), transparent 62%),
        radial-gradient(440px 260px at 52% 48%, rgba(14, 165, 233, .08), transparent 60%);
}
.tm2-hero .tm2-h1 .grad {
    background: linear-gradient(120deg, #4f46e5 8%, #7c3aed 55%, #d946ef 98%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* Address card: subtle top-lit gradient + gradient left rail (already had). */
.tm2-address-card { background: var(--tm-grad-card); }
.tm2-address-card::before { background: var(--tm-grad-accent); }

/* Inbox panel: faint surface gradient for depth without noise */
.tm2-inbox-card { background: var(--tm-grad-card); }

/* Primary CTA + brand mark share the accent gradient for cohesion */
.tm2-btn-primary { background: var(--tm-grad-accent); }
/* Ensure white text wins over the generic `body.tm2 a` link color rule
   (which has higher specificity for <a class="tm2-btn-primary">). */
body.tm2 a.tm2-btn-primary,
body.tm2 button.tm2-btn-primary,
body.tm2 .tm2-btn-primary { color: #fff; }
body.tm2 a.tm2-btn-primary:hover { color: #fff; }
.tm2-brand-mark { background: var(--tm-grad-accent); }

/* Section eyebrows/step numbers pick up a soft accent */
.tm2-step .num {
    background: var(--tm-grad-accent);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- Mobile spacing & responsiveness ---------- */
@media (max-width: 639px) {
    .tm2-section { margin-top: 34px; }
    .tm2-hero { padding: 26px 0 4px; }
    .tm2-hero .tm2-h1 { font-size: clamp(1.7rem, 8vw, 2.1rem); }
    .tm2-hero-sub { font-size: 15px; margin-top: 12px; }
    .tm2-hero-chips { margin-bottom: 12px; }
    .tm2-main-grid { margin-top: 18px; gap: 18px; }
    .tm2-stack { gap: 16px; }
    .tm2-address-card { padding: 18px; border-radius: 22px; }
    .tm2-inbox-card { border-radius: 22px; }
    .tm2-ad-band, .tm2-ad-inline { margin-top: 20px; }
    .tm2-cards { gap: 12px; }
    .tm2-step { padding: 20px; }
}

/* Mobile: reduce the large footer top margin so there is no long blank
   band between content and the footer (was 90px). */
@media (max-width: 1023px) { .tm2-footer { margin-top: 40px; } }

/* ============================================================
   Dark mode for public / editorial pages (SEO guides, tools,
   directory). editorial.css is authored for a light "paper" look and
   uses --ed-* tokens plus several hardcoded white surfaces; map them
   onto the dark palette when <html> has .tm2-dark.
   ============================================================ */
html.tm2-dark {
    --ed-paper: #0a0f1e;
    --ed-paper-2: #111a30;
    --ed-ink: #e8edf8;
    --ed-muted: #a4b1cc;
    --ed-line: rgba(255, 255, 255, 0.12);
    --ed-accent: #fbbf24;
    --ed-accent-2: #a78bfa;
    --ed-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    --ed-panel: rgba(17, 26, 48, 0.82);

    /* dashboard.css tokens — its .public-panel / body rules use these with
       !important, so overriding the variables is the only way in. */
    --bg: #0a0f1e;
    --surface: #111a30;
    --surface-alt: #0d1526;
    --border: #22304e;
    --border-strong: #2d3f63;
    --ink: #e8edf8;
    --ink-2: #a4b1cc;
    --muted: #8492aa;
    --brand-light: rgba(129, 140, 248, .16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 4px 16px rgba(0, 0, 0, .5);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);
}

/* Page background */
html.tm2-dark body.tm2,
html.tm2-dark .public-shell {
    background: linear-gradient(180deg, #0a0f1e 0%, #0d1526 48%, #0a1120 100%);
    background-attachment: fixed;
    color: var(--ed-ink);
}
html.tm2-dark .public-shell::before,
html.tm2-dark .public-shell::after { opacity: .4; }

/* Hardcoded light surfaces inside the editorial components */
html.tm2-dark .public-chip,
html.tm2-dark .editorial-chip,
html.tm2-dark .editorial-card,
html.tm2-dark .editorial-faq,
html.tm2-dark .editorial-rank,
html.tm2-dark .editorial-hero-image,
html.tm2-dark .editorial-chip--muted {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--ed-line);
    color: var(--ed-ink);
}
html.tm2-dark .editorial-search {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ed-line);
}
html.tm2-dark .editorial-search input {
    background: transparent;
    color: var(--ed-ink);
}
html.tm2-dark .editorial-search input::placeholder { color: var(--ed-muted); }
html.tm2-dark .editorial-search svg { color: var(--ed-muted); }
html.tm2-dark .editorial-cta--ghost { color: var(--ed-ink); border-color: var(--ed-line); }
html.tm2-dark .editorial-cta--ghost:hover { background: rgba(255, 255, 255, 0.1); }
html.tm2-dark .editorial-faq summary { color: var(--ed-ink); }
html.tm2-dark .editorial-faq-body { color: var(--ed-muted); }
html.tm2-dark .public-panel { color: var(--ed-ink); }

/* Ad placeholders should not glare white in dark mode */
html.tm2-dark .ad-slot-container {
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, rgba(255,255,255,.045) 12px 24px);
    border-color: var(--ed-line);
}
html.tm2-dark .ad-slot-label { color: var(--ed-muted); }

/* Tailwind light utilities used inside the editorial/public markup
   (e.g. the "Why people use this page" feature cards use bg-white/65). */
html.tm2-dark .public-shell [class*="bg-white"] {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
html.tm2-dark .public-shell [class*="border-black/"] {
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html.tm2-dark .public-shell .text-gray-900 { color: #eef2fb !important; }
html.tm2-dark .public-shell .text-gray-800 { color: #e2e8f5 !important; }
html.tm2-dark .public-shell .text-gray-700 { color: #cdd6e8 !important; }
html.tm2-dark .public-shell .text-gray-600 { color: #a4b1cc !important; }
html.tm2-dark .public-shell .text-gray-500 { color: #8b98b0 !important; }
html.tm2-dark .public-shell .text-gray-400 { color: #6f7d97 !important; }

/* ==========================================================================
   Responsive Service Screens (/temp-mail-for/*, /services, /top-ten)
   Clean, unified Nebula v2 layout across Mobile, Tablet, Laptop & Desktop.
   ========================================================================== */

.tm2-service-wrap {
    width: 100%;
    max-width: 1220px;
    margin-inline: auto;
    padding: 20px 16px 48px;
}
@media (min-width: 640px) {
    .tm2-service-wrap { padding: 28px 24px 56px; }
}
@media (min-width: 1024px) {
    .tm2-service-wrap { padding: 36px 28px 64px; }
}

/* Service Hero Banner */
.tm2-service-hero {
    background: var(--tm-grad-card, var(--tm-surface));
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
    padding: 20px 18px;
    margin-bottom: 22px;
}
@media (min-width: 640px) {
    .tm2-service-hero { padding: 26px 28px; margin-bottom: 26px; }
}
@media (min-width: 1024px) {
    .tm2-service-hero { padding: 30px 34px; margin-bottom: 28px; }
}

.tm2-service-hero-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.tm2-service-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.tm2-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    border: 1px solid rgba(79, 70, 229, 0.14);
}
.tm2-service-badge--live {
    background: rgba(22, 163, 74, 0.1);
    color: var(--tm-success);
    border-color: rgba(22, 163, 74, 0.2);
}

.tm2-service-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
@media (min-width: 640px) {
    .tm2-service-head { gap: 18px; }
}
.tm2-service-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    box-shadow: var(--tm-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex: 0 0 auto;
}
@media (min-width: 640px) {
    .tm2-service-icon {
        width: 58px;
        height: 58px;
        border-radius: 16px;
        font-size: 30px;
    }
}
.tm2-service-title-wrap {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-service-title {
    font-family: var(--tm-font-display);
    font-size: clamp(1.35rem, 3.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.02em;
    color: var(--tm-ink);
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tm2-service-sub {
    margin: 10px 0 0;
    font-size: clamp(0.92rem, 1.4vw, 1.04rem);
    line-height: 1.65;
    color: var(--tm-ink-2);
    max-width: 780px;
}

/* Main 2-column Service Layout (Main + 340px Sidebar on >=1024px) */
.tm2-service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}
@media (min-width: 1024px) {
    .tm2-service-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 28px;
    }
}
@media (min-width: 1280px) {
    .tm2-service-grid {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: 32px;
    }
}
.tm2-service-main,
.tm2-service-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    width: 100%;
}
@media (min-width: 768px) {
    .tm2-service-main,
    .tm2-service-side { gap: 24px; }
}
@media (min-width: 1024px) {
    .tm2-service-side {
        position: sticky;
        top: 88px;
    }
}

/* Service Content Panel */
.tm2-service-card {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
    padding: 20px 18px;
    min-width: 0;
    overflow: hidden;
}
@media (min-width: 640px) {
    .tm2-service-card { padding: 24px 26px; }
}
@media (min-width: 1024px) {
    .tm2-service-card { padding: 28px 30px; }
}

/* Feature Checklist inside Service Page */
.tm2-feature-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
}
@media (min-width: 640px) and (max-width: 1023px) {
    .tm2-feature-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tm2-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--tm-ink);
}
.tm2-feature-item i {
    color: var(--tm-success);
    font-size: 14px;
    margin-top: 2px;
    flex: 0 0 auto;
}

/* Related Service Compact Links */
.tm2-related-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 14px;
}
@media (min-width: 640px) and (max-width: 1023px) {
    .tm2-related-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tm2-related-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink);
    text-decoration: none;
    transition: all 0.18s ease;
    min-width: 0;
}
.tm2-related-item:hover {
    border-color: var(--tm-brand);
    background: var(--tm-brand-soft);
    transform: translateY(-1px);
}
.tm2-related-item .r-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex: 0 0 auto;
}
.tm2-related-item .r-body {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-related-item .r-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--tm-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tm2-related-item .r-desc {
    font-size: 12px;
    color: var(--tm-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.tm2-related-item .r-arrow {
    color: var(--tm-muted);
    font-size: 12px;
    flex: 0 0 auto;
}

/* Directory & Featured Service Cards (/services) */
.tm2-dir-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
@media (min-width: 640px) {
    .tm2-dir-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}
@media (min-width: 1024px) {
    .tm2-dir-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
}

.tm2-dir-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    border-radius: 18px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    box-shadow: var(--tm-shadow-sm);
    color: var(--tm-ink);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-width: 0;
}
.tm2-dir-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-brand);
}
.tm2-dir-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}
.tm2-dir-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex: 0 0 auto;
}
.tm2-dir-card-title {
    font-family: var(--tm-font-display);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.3;
    color: var(--tm-ink);
    margin: 0;
    overflow-wrap: anywhere;
}
.tm2-dir-card-desc {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tm-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm2-dir-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--tm-border);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tm-muted);
}
.tm2-dir-card-foot .cta {
    color: var(--tm-brand);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Top 10 Rank Cards (/top-ten) */
.tm2-rank-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
@media (min-width: 768px) {
    .tm2-rank-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}
.tm2-rank-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    box-shadow: var(--tm-shadow-sm);
    color: var(--tm-ink);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-width: 0;
}
@media (min-width: 640px) {
    .tm2-rank-card { padding: 20px 22px; gap: 16px; }
}
.tm2-rank-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-brand);
}
.tm2-rank-badge {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    border-radius: 12px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    font-family: var(--tm-font-display);
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.tm2-rank-body {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-rank-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.tm2-rank-icon {
    font-size: 24px;
    line-height: 1;
    flex: 0 0 auto;
}
.tm2-rank-title {
    font-family: var(--tm-font-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.25;
    color: var(--tm-ink);
    margin: 0;
    overflow-wrap: anywhere;
}
.tm2-rank-views {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tm-muted);
    margin-top: 2px;
}
.tm2-rank-desc {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tm-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Directory Letter Accordion */
.tm2-letter-group {
    border: 1px solid var(--tm-border);
    background: var(--tm-surface-2);
    border-radius: 18px;
    padding: 14px 16px;
    transition: border-color 0.15s ease;
}
@media (min-width: 640px) {
    .tm2-letter-group { padding: 16px 20px; }
}
.tm2-letter-group[open] {
    background: var(--tm-surface);
    border-color: var(--tm-border-2);
}
.tm2-letter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}
.tm2-letter-summary::-webkit-details-marker { display: none; }
.tm2-letter-badge {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    font-family: var(--tm-font-display);
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.tm2-letter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    font-size: 12px;
    font-weight: 700;
    color: var(--tm-ink-2);
}

/* Internal Links 2-col Grid inside Service Page */
.tm2-explore-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 14px;
}
@media (min-width: 640px) {
    .tm2-explore-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tm2-explore-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 11px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--tm-ink-2);
    text-decoration: none;
    transition: all 0.15s ease;
    min-width: 0;
}
.tm2-explore-link:hover {
    background: var(--tm-brand-soft);
    border-color: var(--tm-brand);
    color: var(--tm-brand-dark);
}
.tm2-explore-link span.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive fixes for editorial-prose on small/medium screens */
@media (max-width: 639px) {
    .editorial-prose { font-size: 0.96rem; line-height: 1.72; }
    .editorial-prose h2 { font-size: 1.35rem; margin-top: 1.75rem; }
    .editorial-prose h3 { font-size: 1.15rem; }
    .editorial-faq { padding: 14px 16px; border-radius: 14px; }
    .editorial-faq summary { font-size: 0.96rem; }
}

/* ==========================================================================
   BLOG INDEX, SINGLE ARTICLE & COMMENTS (Responsive Mobile / Tablet / Laptop)
   ========================================================================== */

/* Featured Blog Card on /blog */
.tm2-blog-featured {
    display: flex;
    flex-direction: column;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-width: 0;
}
.tm2-blog-featured:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-brand);
}
.tm2-blog-featured-media {
    position: relative;
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--tm-brand) 0%, #0d9488 100%);
    overflow: hidden;
    display: block;
}
@media (min-width: 640px) {
    .tm2-blog-featured-media { height: 260px; }
}
@media (min-width: 1024px) {
    .tm2-blog-featured-media { height: 300px; }
}
.tm2-blog-featured-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}
.tm2-blog-featured:hover .tm2-blog-featured-media img {
    transform: scale(1.02);
}
.tm2-blog-featured-body {
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (min-width: 640px) {
    .tm2-blog-featured-body { padding: 26px 28px; gap: 12px; }
}
.tm2-blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-muted);
}
.tm2-blog-featured-title {
    font-family: var(--tm-font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.28;
    color: var(--tm-ink);
    margin: 0;
    overflow-wrap: anywhere;
}
.tm2-blog-featured-title a {
    color: inherit;
    text-decoration: none;
}
.tm2-blog-featured-title a:hover {
    color: var(--tm-brand);
}
.tm2-blog-featured-excerpt {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--tm-ink-2);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blog Posts 2-Col Grid inside Main Column */
.tm2-blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}
@media (min-width: 640px) {
    .tm2-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

.tm2-blog-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    box-shadow: var(--tm-shadow-sm);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    min-width: 0;
    height: 100%;
}
.tm2-blog-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tm-shadow);
    border-color: var(--tm-brand);
}
.tm2-blog-card-thumb {
    display: block;
    width: 100%;
    height: 165px;
    background: var(--tm-surface-2);
    overflow: hidden;
    border-bottom: 1px solid var(--tm-border);
}
.tm2-blog-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.tm2-blog-card:hover .tm2-blog-card-thumb img {
    transform: scale(1.03);
}
.tm2-blog-card-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
@media (min-width: 640px) {
    .tm2-blog-card-body { padding: 20px 22px; }
}
.tm2-blog-card-title {
    font-family: var(--tm-font-display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
    color: var(--tm-ink);
    margin: 8px 0 0;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm2-blog-card-title a {
    color: inherit;
    text-decoration: none;
}
.tm2-blog-card-title a:hover {
    color: var(--tm-brand);
}
.tm2-blog-card-excerpt {
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tm-ink-2);
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tm2-blog-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--tm-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-muted);
}
.tm2-blog-card-foot .read-cta {
    color: var(--tm-brand);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Single Blog Article Container & Rich Typography */
.tm2-blog-article {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow-sm);
    padding: 20px 16px;
    min-width: 0;
    overflow: hidden;
}
@media (min-width: 640px) {
    .tm2-blog-article { padding: 28px 30px; }
}
@media (min-width: 1024px) {
    .tm2-blog-article { padding: 36px 40px; }
}

.tm2-blog-hero-img {
    margin: 20px 0 24px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--tm-border);
    background: var(--tm-surface-2);
}
.tm2-blog-hero-img img {
    width: 100% !important;
    max-height: 440px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.tm2-blog-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    margin: 16px 0 20px;
    border-top: 1px solid var(--tm-border);
    border-bottom: 1px solid var(--tm-border);
}
.tm2-blog-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--tm-border);
    background: var(--tm-surface-2);
    color: var(--tm-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.tm2-blog-share-btn:hover {
    background: var(--tm-brand-soft);
    border-color: var(--tm-brand);
    color: var(--tm-brand-dark);
}

/* Rich Blog Body Typography (.tm2-blog-prose) */
.tm2-blog-prose {
    font-size: 15.5px;
    line-height: 1.78;
    color: var(--tm-ink-2);
    overflow-wrap: anywhere;
    word-break: break-word;
}
@media (min-width: 640px) {
    .tm2-blog-prose { font-size: 16.5px; line-height: 1.82; }
}
.tm2-blog-prose > *:first-child { margin-top: 0; }
.tm2-blog-prose p { margin: 1.15em 0; }
.tm2-blog-prose h1,
.tm2-blog-prose h2,
.tm2-blog-prose h3,
.tm2-blog-prose h4 {
    font-family: var(--tm-font-display);
    color: var(--tm-ink);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    scroll-margin-top: 90px;
}
.tm2-blog-prose h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    margin: 2em 0 0.65em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid var(--tm-border);
}
.tm2-blog-prose h3 {
    font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    margin: 1.6em 0 0.5em;
}
.tm2-blog-prose h4 {
    font-size: 1.05rem;
    margin: 1.4em 0 0.4em;
}
.tm2-blog-prose a {
    color: var(--tm-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tm2-blog-prose a:hover { color: var(--tm-brand-dark); }
.tm2-blog-prose strong, .tm2-blog-prose b {
    color: var(--tm-ink);
    font-weight: 700;
}
.tm2-blog-prose ul, .tm2-blog-prose ol {
    margin: 1.1em 0;
    padding-left: 1.4em;
}
.tm2-blog-prose ul { list-style-type: disc; }
.tm2-blog-prose ol { list-style-type: decimal; }
.tm2-blog-prose li { margin: 0.45em 0; }
.tm2-blog-prose blockquote {
    margin: 1.5em 0;
    padding: 14px 18px;
    border-left: 4px solid var(--tm-brand);
    background: var(--tm-surface-2);
    border-radius: 0 14px 14px 0;
    color: var(--tm-ink);
    font-style: italic;
}
.tm2-blog-prose code {
    font-family: var(--tm-font-mono);
    font-size: 0.88em;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    color: var(--tm-brand-dark);
}
.tm2-blog-prose pre {
    margin: 1.4em 0;
    padding: 16px;
    border-radius: 14px;
    background: #0f172a;
    color: #e2e8f0;
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.6;
}
.tm2-blog-prose pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
}
.tm2-blog-prose img, .tm2-blog-prose video, .tm2-blog-prose iframe {
    max-width: 100% !important;
    height: auto;
    border-radius: 14px;
    margin: 1.4em auto;
    display: block;
}
.tm2-blog-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 14px;
    display: block;
    overflow-x: auto;
}
.tm2-blog-prose th, .tm2-blog-prose td {
    padding: 10px 12px;
    border: 1px solid var(--tm-border);
    text-align: left;
}
.tm2-blog-prose th {
    background: var(--tm-surface-2);
    color: var(--tm-ink);
    font-weight: 700;
}

/* Table of Contents Box */
.tm2-blog-toc-box {
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 22px;
}
.tm2-blog-toc-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}
.tm2-blog-toc-list a {
    display: block;
    padding: 6px 10px;
    border-left: 2px solid var(--tm-border-2);
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--tm-ink-2);
    text-decoration: none;
    border-radius: 0 8px 8px 0;
    transition: all 0.15s ease;
}
.tm2-blog-toc-list a:hover,
.tm2-blog-toc-list a.is-active {
    color: var(--tm-brand);
    font-weight: 700;
    border-left-color: var(--tm-brand);
    background: var(--tm-brand-soft);
}

/* Sidebar Search & Category Lists */
.tm2-blog-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.tm2-blog-search-input {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--tm-border-2);
    background: var(--tm-surface-2);
    color: var(--tm-ink);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tm2-blog-search-input:focus {
    border-color: var(--tm-brand);
    background: var(--tm-surface);
    box-shadow: 0 0 0 3px var(--tm-brand-soft);
}
.tm2-blog-cat-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tm2-blog-cat-list li {
    margin: 0;
    padding: 0;
}
.tm2-blog-cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.tm2-blog-cat-list a:hover {
    background: var(--tm-brand-soft);
    border-color: var(--tm-brand);
    color: var(--tm-brand-dark);
}
.tm2-blog-cat-list ul {
    list-style: none;
    padding-left: 14px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Author Card */
.tm2-blog-author {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: 18px;
    box-shadow: var(--tm-shadow-sm);
}
.tm2-blog-author-avatar {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--tm-brand), #0d9488);
    color: #fff;
    font-family: var(--tm-font-display);
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Comments & Comment Form */
.tm2-comment-card {
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.tm2-comment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tm-ink);
    margin-bottom: 6px;
}
.tm2-comment-time {
    font-size: 12px;
    font-weight: 500;
    color: var(--tm-muted);
}
.tm2-comment-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--tm-ink-2);
    margin: 0;
}
.add_comment_area {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--tm-border);
}
.add_comment_area .form-group {
    margin-bottom: 14px;
}
.add_comment_area label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--tm-ink);
    margin-bottom: 6px;
}
.add_comment_area label small {
    font-weight: 500;
    color: var(--tm-muted);
}
.add_comment_area .form-control {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--tm-border-2);
    background: var(--tm-surface-2);
    color: var(--tm-ink);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.add_comment_area .form-control:focus {
    border-color: var(--tm-brand);
    background: var(--tm-surface);
    box-shadow: 0 0 0 3px var(--tm-brand-soft);
}
.add_comment_area .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}
@media (min-width: 640px) {
    .add_comment_area .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.add_comment_area input[type="submit"] {
    width: auto !important;
    padding: 10px 22px !important;
    border-radius: 12px !important;
    background: var(--tm-brand) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: 0 !important;
    cursor: pointer;
}
.add_comment_area input[type="submit"]:hover {
    background: var(--tm-brand-dark) !important;
}

/* Pagination */
.tm2-pagination nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tm2-pagination a,
.tm2-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}
.tm2-pagination a {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink);
}
.tm2-pagination a:hover {
    border-color: var(--tm-brand);
    color: var(--tm-brand);
}
.tm2-pagination svg {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   Homescreen & Live Inbox Workspace Overhaul (Mobile, Tablet, Laptop, Desktop)
   ========================================================================== */

/* 1. Above-the-fold Hero & Workspace spacing */
.tm2-home-top {
    margin-top: 0;
}
.tm2-home-top .tm2-hero {
    padding: 20px 0 8px;
}
@media (min-width: 768px) {
    .tm2-home-top .tm2-hero {
        padding: 28px 0 12px;
    }
}
@media (min-width: 1280px) {
    .tm2-home-top .tm2-hero {
        padding: 34px 0 14px;
    }
}
.tm2-home-top .tm2-hero-inner {
    max-width: 860px;
    margin-inline: auto;
    text-align: center;
}
.tm2-home-top .tm2-hero-chips {
    margin-bottom: 14px;
}
.tm2-home-top .tm2-h1 {
    font-size: clamp(1.65rem, 3.4vw, 2.75rem);
    line-height: 1.15;
}
.tm2-home-top .tm2-hero-sub {
    margin: 12px auto 0;
    max-width: 680px;
    font-size: clamp(0.92rem, 1.35vw, 1.05rem);
    line-height: 1.6;
}
.tm2-home-top .tm2-main-grid {
    margin-top: 18px;
}
@media (min-width: 768px) {
    .tm2-home-top .tm2-main-grid {
        margin-top: 22px;
    }
}

/* 2. Address Generator Card & Click-to-Copy Bar */
.tm2-env-badge {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
    border: 1px solid rgba(79, 70, 229, 0.14);
}
.tm2-inbox-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    border: 1px solid rgba(79, 70, 229, 0.16);
}
.tm2-address-bar {
    padding: 8px 8px 8px 12px;
    gap: 12px;
    background: var(--tm-surface);
    border: 1.5px solid var(--tm-border-2);
    border-radius: 16px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.15s ease;
}
.tm2-address-bar:hover {
    border-color: var(--tm-brand);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.10);
}
@media (max-width: 479px) {
    .tm2-address-bar {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 10px;
    }
    .tm2-address-bar #email_id {
        width: calc(100% - 52px);
        font-size: 14.5px;
    }
    .tm2-address-bar .tm2-copy-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* 3. Custom Address Builder Row */
.tm2-custom-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (min-width: 640px) {
    .tm2-custom-row {
        flex-direction: row;
        align-items: stretch;
    }
}
.tm2-custom-input-wrap {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-custom-domain-wrap {
    position: relative;
    flex: 0 0 auto;
}
@media (min-width: 640px) {
    .tm2-custom-domain-wrap {
        width: 220px;
    }
}
.tm2-custom-input-wrap input[type="text"],
.tm2-custom-domain-wrap select {
    margin-bottom: 0 !important;
    height: 48px;
    min-height: 48px;
    font-family: var(--tm-font-mono);
    font-size: 14px;
    font-weight: 600;
}
.tm2-custom-domain-wrap select {
    padding-right: 36px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.tm2-select-caret {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--tm-muted);
    pointer-events: none;
}
.tm2-custom-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

/* 4. Multi-Inbox Switcher Pills */
.tm2-multi-inboxes {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--tm-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.tm2-multi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tm-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 4px;
}
.tm2-multi-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}
.tm2-multi-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-family: var(--tm-font-mono);
    font-size: 12px;
    font-weight: 600;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink-2);
    cursor: pointer;
    max-width: 220px;
    transition: all 0.15s ease;
}
.tm2-multi-pill span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm2-multi-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tm-muted);
    flex: 0 0 auto;
}
.tm2-multi-pill:hover {
    border-color: var(--tm-brand);
    color: var(--tm-brand);
}
.tm2-multi-pill.is-active {
    background: var(--tm-brand-soft);
    border-color: var(--tm-brand);
    color: var(--tm-brand-dark);
}
.tm2-multi-pill.is-active .dot {
    background: var(--tm-success);
}

/* 5. QR Code Inline Drawer */
.tm2-qr-drawer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--tm-border);
}
.tm2-qr-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
}
@media (max-width: 479px) {
    .tm2-qr-box {
        flex-direction: column;
        text-align: center;
    }
}
.tm2-qr-img {
    width: 112px;
    height: 112px;
    border-radius: 12px;
    background: #ffffff;
    padding: 6px;
    border: 1px solid var(--tm-border);
    flex: 0 0 auto;
}
.tm2-qr-meta {
    flex: 1 1 0;
    min-width: 0;
}
.tm2-qr-title {
    font-family: var(--tm-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-ink);
    margin-bottom: 4px;
}
.tm2-qr-sub {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tm-ink-2);
}
.tm2-btn.is-active {
    border-color: var(--tm-brand);
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
}

/* 6. Live Inbox Header, Manual Refresh Button & Message Avatars */
.tm2-msg-total-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--tm-brand);
    color: #ffffff;
}
.tm2-inbox-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    color: var(--tm-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tm2-inbox-refresh-btn:hover {
    border-color: var(--tm-brand);
    color: var(--tm-brand);
    background: var(--tm-brand-soft);
}
.tm2-inbox-refresh-btn svg {
    animation: tm2-spin 2.2s linear infinite;
    color: var(--tm-brand);
}

.tm2-msg-from-row {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.tm2-msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    font-family: var(--tm-font-display);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(79, 70, 229, 0.15);
}
.tm2-msg-from-text {
    min-width: 0;
    flex: 1 1 0;
}
.tm2-msg-arrow {
    color: var(--tm-muted);
    font-size: 11px;
    margin-left: 6px;
    transition: transform 0.15s ease, color 0.15s ease;
}
.tm2-msg:hover .tm2-msg-arrow {
    transform: translateX(3px);
    color: var(--tm-brand);
}
@media (max-width: 639px) {
    .tm2-msg .c-subj {
        padding-left: 47px;
        margin-top: 2px;
    }
}

/* 7. Empty Inbox 3-Step Pills */
.tm2-empty-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.tm2-empty-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-ink-2);
}
.tm2-empty-step .n {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--tm-brand-soft);
    color: var(--tm-brand-dark);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 8. Tablet 2-Column Sidebar Grid & Step Icon */
.tm2-side-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}
@media (min-width: 640px) and (max-width: 1023px) {
    .tm2-side-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.tm2-step-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--tm-brand-soft);
    color: var(--tm-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

/* 9. FontAwesome 6 Compatibility for FAQ Chevrons */
.tm2-faq summary::after {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
}

/* 10. Dark Mode Refinements for New Homescreen Components */
html.tm2-dark .tm2-address-bar {
    background: rgba(15, 23, 42, 0.65);
    border-color: var(--tm-border-2);
}
html.tm2-dark .tm2-inbox-refresh-btn,
html.tm2-dark .tm2-multi-pill,
html.tm2-dark .tm2-empty-step,
html.tm2-dark .tm2-qr-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--tm-border);
}
html.tm2-dark .tm2-msg-avatar,
html.tm2-dark .tm2-env-badge {
    background: rgba(99, 102, 241, 0.16);
    color: #a5b4fc;
    border-color: rgba(129, 140, 248, 0.25);
}
html.tm2-dark .tm2-inbox-count-pill,
html.tm2-dark .tm2-multi-pill.is-active {
    background: rgba(99, 102, 241, 0.2);
    color: #c7d2fe;
    border-color: rgba(129, 140, 248, 0.4);
}




/* ─── Ad Containers ─────────────────────────────────────────────────────── */

.ad-container {
    position: relative;
    width: 100%;
    transition: all 0.3s ease;
}

.ad-container::before {
    content: 'Advertisement';
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #d1d5db;
    z-index: 1;
}

/* Lazy load placeholder */
.ad-placeholder {
    width: 100%;
    height: 100%;
    min-height: inherit;
}

/* Responsive ad containers */
@media (max-width: 768px) {
    .ad-container.leaderboard {
        min-height: 50px;
    }
    .ad-container.rectangle {
        min-height: 100px;
    }
}

/* ============================================================
   Editorial Design System — shared across nebula + public layouts
   Loaded alongside tailwind.css + modern-redesign.css.
   Contains: ad-slot wrapper, editorial article typography,
   shared tokens (mirrors of layouts/public.blade.php inline vars).
   ============================================================ */

:root {
    --ed-paper: #f7f2e8;
    --ed-paper-2: #fffdfa;
    --ed-ink: #111827;
    --ed-muted: #5b6474;
    --ed-line: rgba(17, 24, 39, 0.12);
    --ed-accent: #de6b1f;
    --ed-accent-2: #0f766e;
    --ed-shadow: 0 24px 80px rgba(17, 24, 39, 0.12);
    --ed-panel: rgba(255, 251, 245, 0.82);
}

/* ---------- Body background (editorial paper) ---------- */
body.antialiased,
body.font-inter {
    font-family: "Inter", "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(222, 107, 31, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(15, 118, 110, 0.12), transparent 24%),
        linear-gradient(180deg, #fdf9f2 0%, #f4f0e8 48%, #edf3f1 100%);
    background-attachment: fixed;
    color: var(--ed-ink);
    min-height: 100vh;
}

/* ---------- Public shell (decorative blobs container) ---------- */
.public-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}
.public-shell::before,
.public-shell::after {
    content: "";
    position: fixed;
    width: 24rem;
    height: 24rem;
    border-radius: 999px;
    filter: blur(84px);
    opacity: 0.24;
    pointer-events: none;
    z-index: 0;
}
.public-shell::before {
    top: -7rem;
    right: -6rem;
    background: rgba(222, 107, 31, 0.46);
}
.public-shell::after {
    bottom: 3rem;
    left: -5rem;
    background: rgba(15, 118, 110, 0.32);
}
@media (max-width: 1023px) {
    .public-shell::before,
    .public-shell::after {
        width: 16rem;
        height: 16rem;
    }
}

/* ---------- Public panel (card surface) ---------- */
.public-panel {
    background: var(--ed-panel);
    border: 1px solid var(--ed-line);
    box-shadow: var(--ed-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ---------- Public chip ---------- */
.public-chip {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(17, 24, 39, 0.1);
}

/* ---------- Public nav link ---------- */
.public-nav-link:hover,
.public-nav-link:focus-visible {
    color: var(--ed-accent);
}

/* ---------- Public grid (subtle background grid) ---------- */
.public-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(17, 24, 39, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 24, 39, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
    pointer-events: none;
}

/* ---------- Public prose (long-form article body) ---------- */
.public-prose {
    color: var(--ed-muted);
    line-height: 1.8;
}
.public-prose h1,
.public-prose h2,
.public-prose h3,
.public-prose h4,
.public-prose h5,
.public-prose h6,
.public-prose ul,
.public-prose ol,
.public-prose li {
    all: revert;
}
.public-prose h2,
.public-prose h3 {
    color: var(--ed-ink);
}

/* ---------- Pause spinner (Livewire refresh indicator) ---------- */
.pause-spinner {
    animation-play-state: paused;
}

/* ---------- Ad slot wrapper (AdSense compliant) ---------- */
.ad-slot-wrapper {
    margin: 2rem auto;
    max-width: 100%;
    text-align: center;
}
.ad-slot-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.5rem;
}
.ad-slot-container {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid rgba(17, 24, 39, 0.08);
    background: rgba(255, 255, 255, 0.6);
    padding: 0.5rem;
    width: 100%;
}

.ad-slot-container .adsbygoogle[style*="height:600px"],
.ad-slot-container .adsbygoogle-lazy[style*="height:600px"] {
    width: 160px;
    max-width: 100%;
    height: 600px;
    margin: 0 auto;
}

/* ---------- Editorial article typography (blog single post, SEO page body) ---------- */
.editorial-prose {
    color: var(--ed-muted);
    line-height: 1.85;
    font-size: 1.0625rem;
}
.editorial-prose > * + * { margin-top: 1.25rem; }
.editorial-prose h1,
.editorial-prose h2,
.editorial-prose h3,
.editorial-prose h4,
.editorial-prose h5,
.editorial-prose h6 {
    color: var(--ed-ink);
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -0.025em;
    line-height: 1.2;
    margin-top: 2rem;
}
.editorial-prose h1 { font-size: clamp(2rem, 1.2rem + 2vw, 3rem); }
.editorial-prose h2 { font-size: 1.75rem; margin-top: 2.5rem; }
.editorial-prose h3 { font-size: 1.375rem; }
.editorial-prose p { margin: 1.25rem 0; }
.editorial-prose a { color: var(--ed-accent); text-decoration: underline; text-underline-offset: 2px; }
.editorial-prose a:hover { color: var(--ed-accent-2); }
.editorial-prose ul,
.editorial-prose ol { padding-left: 1.5rem; margin: 1.25rem 0; }
.editorial-prose ul { list-style: disc; }
.editorial-prose ol { list-style: decimal; }
.editorial-prose li { margin: 0.5rem 0; }
.editorial-prose blockquote {
    border-left: 3px solid var(--ed-accent);
    padding: 0.5rem 0 0.5rem 1.25rem;
    margin: 1.5rem 0;
    color: var(--ed-ink);
    font-style: italic;
}
.editorial-prose pre {
    background: #1f2937;
    color: #f3f4f6;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    font-size: 0.875rem;
}
.editorial-prose code {
    background: rgba(17, 24, 39, 0.06);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}
.editorial-prose pre code { background: transparent; padding: 0; }
.editorial-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 1.5rem 0;
}
.editorial-prose hr {
    border: none;
    border-top: 1px solid var(--ed-line);
    margin: 2rem 0;
}

/* ---------- Article meta row (blog post) ---------- */
.editorial-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    color: var(--ed-muted);
    font-size: 0.875rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--ed-line);
    margin-bottom: 2rem;
}
.editorial-meta .dot {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.5;
}
.editorial-meta .author { font-weight: 600; color: var(--ed-ink); }

/* ---------- Article hero image ---------- */
.editorial-hero-image {
    width: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    margin: 2rem 0;
    border: 1px solid var(--ed-line);
    background: rgba(255, 255, 255, 0.6);
}
.editorial-hero-image img { width: 100%; height: auto; display: block; }

/* ---------- Card hover treatment (blog index, SEO cards) ---------- */
.editorial-card {
    display: block;
    border: 1px solid var(--ed-line);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1.25rem;
    padding: 1.25rem;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    color: inherit;
    text-decoration: none;
}
.editorial-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(17, 24, 39, 0.1);
    border-color: rgba(222, 107, 31, 0.4);
}
.editorial-card .card-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ed-accent);
}
.editorial-card .card-title {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -0.025em;
    color: var(--ed-ink);
    font-size: 1.5rem;
    line-height: 1.2;
    margin-top: 0.75rem;
}
.editorial-card .card-excerpt {
    color: var(--ed-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-top: 0.75rem;
}
.editorial-card .card-meta {
    margin-top: 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9ca3af;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ---------- Pagination ---------- */
.editorial-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}
.editorial-pagination a,
.editorial-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--ed-ink);
    font-size: 0.875rem;
    font-weight: 600;
}
.editorial-pagination a:hover {
    border-color: var(--ed-accent);
    color: var(--ed-accent);
}
.editorial-pagination .active span,
.editorial-pagination .current {
    background: var(--ed-ink);
    color: #fff;
    border-color: var(--ed-ink);
}

/* ---------- Numbered ranking cards (SEO top ten) ---------- */
.editorial-rank {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    border: 1px solid var(--ed-line);
    background: rgba(255, 255, 255, 0.75);
    border-radius: 1.5rem;
    padding: 1.5rem;
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    color: inherit;
    text-decoration: none;
}
.editorial-rank:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(17, 24, 39, 0.1);
    border-color: rgba(15, 118, 110, 0.4);
}
.editorial-rank .rank-number {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--ed-accent);
    font-weight: 700;
    letter-spacing: -0.04em;
    min-width: 3rem;
}
.editorial-rank .rank-body { flex: 1; }
.editorial-rank .rank-title {
    font-family: Georgia, "Times New Roman", serif;
    color: var(--ed-ink);
    font-size: 1.5rem;
    line-height: 1.2;
}
.editorial-rank .rank-meta {
    margin-top: 0.5rem;
    color: var(--ed-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ---------- Search input (SEO directory + blog search) ---------- */
.editorial-search {
    position: relative;
    border: 1px solid var(--ed-line);
    background: rgba(255, 255, 255, 0.85);
    border-radius: 1.5rem;
    box-shadow: var(--ed-shadow);
}
.editorial-search input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 1rem 1rem 1rem 3.5rem;
    border-radius: 1.5rem;
    font-size: 1rem;
    color: var(--ed-ink);
    outline: none;
}
.editorial-search input::placeholder { color: #9ca3af; }
.editorial-search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

/* ---------- Chip / tag ---------- */
.editorial-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #374151;
}
.editorial-chip--accent { color: var(--ed-accent); }
.editorial-chip--teal { color: var(--ed-accent-2); }
.editorial-chip--muted { color: #6b7280; }

/* ---------- FAQ details (SEO page + blog post) ---------- */
.editorial-faq {
    border: 1px solid var(--ed-line);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 1.25rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.75rem;
}
.editorial-faq summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: var(--ed-ink);
    font-size: 1.0625rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.editorial-faq summary::-webkit-details-marker { display: none; }
.editorial-faq summary::after {
    content: "+";
    font-size: 1.5rem;
    color: var(--ed-accent);
    font-weight: 300;
    transition: transform 200ms ease;
}
.editorial-faq[open] summary::after { content: "−"; }
.editorial-faq .editorial-faq-body {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ed-line);
    color: var(--ed-muted);
    line-height: 1.8;
}

/* ---------- Section eyebrow ---------- */
.editorial-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6b7280;
}

/* ---------- Display heading ---------- */
.editorial-heading {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -0.045em;
    color: var(--ed-ink);
    line-height: 1.05;
}

/* ---------- CTA button ---------- */
.editorial-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--ed-ink);
    color: #fff;
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 200ms ease, transform 200ms ease;
}
.editorial-cta:hover {
    background: var(--ed-accent);
    transform: translateY(-1px);
}
.editorial-cta--ghost {
    background: transparent;
    color: var(--ed-ink);
    border: 1px solid var(--ed-line);
}
.editorial-cta--ghost:hover {
    background: rgba(255, 255, 255, 0.8);
    color: var(--ed-accent);
    border-color: var(--ed-accent);
}

/* ============================================================
   Inbox panel (Livewire frontend.actions + frontend.app)
   Override the stock Tailwind blue/gray with editorial palette.
   ============================================================ */
.editorial-inbox {
    position: relative;
}
.editorial-inbox::before {
    content: "Your disposable inbox";
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

/* Email address display — make it prominent */
.editorial-inbox #email_id,
.editorial-inbox [id="email_id"] {
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ed-ink);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.editorial-inbox .in-app-actions > form > .relative,
.editorial-inbox .in-app-actions form .relative {
    margin-bottom: 1rem;
}
.editorial-inbox .in-app-actions [class*="rounded-xl"][class*="border"][class*="border-gray-300"] {
    border-color: var(--ed-line) !important;
    background: #fff;
    padding: 0.875rem 1rem;
    border-radius: 1rem !important;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

/* Action buttons — Copy / Change / New */
.editorial-inbox .in-app-actions .flex > button,
.editorial-inbox .app-action .flex > button,
.editorial-inbox .in-app-actions form .flex button[type="button"],
.editorial-inbox .app-action form button[type="submit"],
.editorial-inbox .app-action form input[type="submit"],
.editorial-inbox .app-action form button[type="button"] {
    border-radius: 999px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: all 200ms ease;
    border: 1px solid transparent;
}
.editorial-inbox .in-app-actions .flex > button[class*="bg-gray-100"],
.editorial-inbox .app-action form input[type="submit"][class*="bg-gray-100"],
.editorial-inbox .app-action form button[type="button"][class*="bg-gray-100"] {
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--ed-ink) !important;
    border-color: var(--ed-line) !important;
}
.editorial-inbox .in-app-actions .flex > button[class*="bg-gray-100"]:hover,
.editorial-inbox .app-action form input[type="submit"][class*="bg-gray-100"]:hover {
    background: #fff !important;
    border-color: var(--ed-accent) !important;
    color: var(--ed-accent) !important;
}
.editorial-inbox .in-app-actions .flex > button[class*="bg-blue-600"],
.editorial-inbox .app-action form input[type="submit"][class*="bg-blue-600"],
.editorial-inbox .app-action form button[class*="bg-blue-600"] {
    background: var(--ed-accent) !important;
    color: #fff !important;
}
.editorial-inbox .in-app-actions .flex > button[class*="bg-blue-600"]:hover,
.editorial-inbox .app-action form input[type="submit"][class*="bg-blue-600"]:hover {
    background: #c95f15 !important;
}

/* Inputs (username, domain selector) */
.editorial-inbox .app-action input[type="text"][class*="border-gray-300"] {
    border-color: var(--ed-line) !important;
    background: #fff;
    border-radius: 1rem !important;
    color: var(--ed-ink);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.editorial-inbox .app-action input[type="text"][class*="border-gray-300"]:focus {
    border-color: var(--ed-accent) !important;
    box-shadow: 0 0 0 3px rgba(222, 107, 31, 0.15) !important;
    outline: none;
}

/* "Get back to MailBox" link */
.editorial-inbox .app-action a[class*="bg-gray-100"] {
    background: rgba(255, 255, 255, 0.85) !important;
    color: var(--ed-ink) !important;
    border: 1px solid var(--ed-line) !important;
    border-radius: 999px !important;
}
.editorial-inbox .app-action a[class*="bg-gray-100"]:hover {
    border-color: var(--ed-accent) !important;
    color: var(--ed-accent) !important;
}

/* Delete button (red) — keep red but editorial */
.editorial-inbox .in-app-actions button[class*="text-red-500"] {
    color: #b91c1c !important;
    border-radius: 999px !important;
}
.editorial-inbox .in-app-actions button[class*="text-red-500"]:hover {
    background: rgba(185, 28, 28, 0.08) !important;
}

/* ---------- Inbox message list (frontend.app) ---------- */
.editorial-inbox .mailbox.email-list {
    border: 1px solid var(--ed-line);
    border-radius: 1.25rem;
    overflow: hidden;
    background: #fff;
    margin-top: 1rem;
}
.editorial-inbox .mailbox .list > div:first-child,
.editorial-inbox .mailbox .list > .flex.items-center.gap-3 {
    background: rgba(247, 242, 232, 0.6) !important;
    border-bottom: 1px solid var(--ed-line) !important;
    padding: 0.875rem 1.25rem !important;
}
.editorial-inbox .mailbox .list > div:first-child > div {
    color: #6b7280 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}
.editorial-inbox .mailbox .messages {
    max-height: 360px;
    overflow-y: auto;
}
.editorial-inbox .email-item {
    border-bottom: 1px solid var(--ed-line) !important;
    padding: 1rem 1.25rem !important;
    transition: background 200ms ease, transform 200ms ease;
    background: #fff;
}
.editorial-inbox .email-item:hover {
    background: rgba(222, 107, 31, 0.06) !important;
    transform: translateX(2px);
}
.editorial-inbox .email-item .font-semibold {
    color: var(--ed-ink) !important;
    font-weight: 700 !important;
}
.editorial-inbox .email-item .text-gray-400,
.editorial-inbox .email-item .text-xs {
    color: #9ca3af !important;
}

/* ---------- Email detail view ---------- */
.editorial-inbox .email-detail {
    background: #fff;
    border: 1px solid var(--ed-line);
    border-radius: 1.25rem;
    overflow: hidden;
    margin-top: 1rem;
}
.editorial-inbox .email-detail > .flex.items-center:first-child {
    background: rgba(247, 242, 232, 0.6) !important;
    border-bottom: 1px solid var(--ed-line) !important;
    padding: 0.875rem 1.25rem !important;
}
.editorial-inbox .email-detail button[class*="text-gray-600"] {
    color: var(--ed-ink) !important;
    border-radius: 999px !important;
    padding: 0.5rem 0.875rem !important;
    transition: all 200ms ease;
}
.editorial-inbox .email-detail button[class*="text-gray-600"]:hover {
    background: rgba(222, 107, 31, 0.1) !important;
    color: var(--ed-accent) !important;
}
.editorial-inbox .email-detail .font-bold.text-gray-900 {
    color: var(--ed-ink) !important;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -0.02em;
}

/* ---------- Empty inbox state ---------- */
.editorial-inbox .flex.items-center.justify-center[style*="min-height: 400px"] > div {
    color: #6b7280 !important;
}
.editorial-inbox .flex.items-center.justify-center[style*="min-height: 400px"] svg {
    color: var(--ed-accent-2) !important;
    opacity: 0.6;
}
.editorial-inbox .flex.items-center.justify-center[style*="min-height: 400px"] .text-lg {
    color: var(--ed-ink) !important;
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -0.02em;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}
.editorial-inbox .flex.items-center.justify-center[style*="min-height: 400px"] .text-sm {
    color: #6b7280 !important;
    font-size: 0.9375rem !important;
    max-width: 360px;
    text-align: center;
    margin-top: 0.5rem !important;
}

/* ---------- Mailbox label on the panel ---------- */
.editorial-inbox .in-app-actions {
    padding-top: 0.5rem;
}
/* ============================================================
   TmpMailer Dashboard Theme
   Modern, clean, professional. Blue + amber palette.
   Fully responsive. CLS-safe ad slots.
   ============================================================ */

:root {
    --brand:        #007BFF;
    --brand-dark:   #0056B3;
    --brand-light:  #e7f1ff;
    --accent:       #FFC107;
    --accent-dark:  #d39e00;
    --bg:           #F8F9FA;
    --surface:      #FFFFFF;
    --surface-alt:  #fcfdff;
    --border:       #E0E0E0;
    --border-strong:#cfd6dd;
    --ink:          #212529;
    --ink-2:        #495057;
    --muted:        #6c757d;
    --success:      #28A745;
    --danger:       #dc3545;
    --shadow-sm:    0 1px 2px rgba(33, 37, 41, 0.06);
    --shadow:       0 4px 16px rgba(33, 37, 41, 0.08);
    --shadow-lg:    0 12px 40px rgba(33, 37, 41, 0.12);
    --radius:       14px;
    --radius-lg:    20px;
    --radius-xl:    24px;
    --ring:         0 0 0 3px rgba(0, 123, 255, 0.18);
}

/* ============================================================
   Base — typography + background
   ============================================================ */
body {
    font-family: "Roboto", "Open Sans", "Segoe UI", system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.dash-heading,
.editorial-heading {
    font-family: "Inter", "Poppins", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--ink);
    font-weight: 700;
}

.dash-eyebrow {
    font-family: "Inter", "Poppins", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ============================================================
   Public shell — drop the editorial blobs/paper gradient
   ============================================================ */
.public-shell {
    position: relative;
    min-height: 100vh;
    background: var(--bg);
}
.public-shell::before,
.public-shell::after { display: none !important; }

body {
    background: var(--bg) !important;
}

/* ============================================================
   Header — clean white sticky
   ============================================================ */
.dash-header,
.public-shell > .relative > header,
.public-shell header.sticky {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border) !important;
}
.public-shell header.sticky .truncate.text-lg,
.public-shell header.sticky .truncate.font-black {
    font-family: "Inter", "Poppins", system-ui, sans-serif;
    color: var(--ink) !important;
    font-weight: 700;
}
.public-shell header.sticky .truncate.text-\[11px\] {
    color: var(--muted) !important;
    letter-spacing: 0.28em;
}
.public-nav-link {
    color: var(--ink-2) !important;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    transition: color 180ms ease, background 180ms ease;
}
.public-nav-link:hover,
.public-nav-link:focus-visible {
    color: var(--brand) !important;
    background: var(--brand-light);
}
.public-chip {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--ink-2) !important;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 500;
}
.public-chip:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}

/* Brand logo chip */
.public-shell header .flex.h-11.w-11 {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
    font-family: "Inter", system-ui, sans-serif;
}

/* ============================================================
   Panels / cards — clean white surfaces
   ============================================================ */
.public-panel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important;
    border-radius: var(--radius-lg) !important;
}
.editorial-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink-2);
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
}
.editorial-chip--muted { color: var(--muted); }
.editorial-chip--teal {
    color: var(--brand-dark);
    background: var(--brand-light);
    border-color: transparent;
}
.editorial-eyebrow {
    color: var(--brand) !important;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* CTA buttons */
.editorial-cta,
a.editorial-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff !important;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid var(--brand);
    transition: background 180ms ease, transform 180ms ease;
}
.editorial-cta:hover {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    transform: translateY(-1px);
}

/* Editorial card → dashboard card */
.editorial-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
    text-decoration: none;
}
.editorial-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.editorial-card .card-eyebrow {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand);
}
.editorial-card .card-title {
    font-family: "Inter", "Poppins", system-ui, sans-serif;
    font-weight: 700;
    color: var(--ink);
    font-size: 1.0625rem;
    margin-top: 6px;
}
.editorial-card .card-excerpt {
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-top: 6px;
}

/* ============================================================
   Dashboard layout — main + sticky sidebar
   ============================================================ */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 1024px) {
    .dash-grid--sidebar {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
    }
}
@media (min-width: 1280px) {
    .dash-grid--sidebar {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

.dash-sidebar-sticky {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dash-section {
    margin-top: 40px;
}
.dash-section:first-of-type { margin-top: 0; }

.dash-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 768px) {
    .dash-container { padding: 0 24px; }
}
@media (min-width: 1024px) {
    .dash-container { padding: 0 32px; }
}

/* ============================================================
   Inbox panel — blue dashboard palette
   ============================================================ */
.editorial-inbox {
    position: relative;
    background: var(--surface);
}
.editorial-inbox::before {
    content: "Your disposable inbox";
    display: block;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

.editorial-inbox #email_id,
.editorial-inbox [id="email_id"] {
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--brand);
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.editorial-inbox .in-app-actions [class*="rounded-xl"][class*="border"][class*="border-gray-300"] {
    border-color: var(--border) !important;
    background: var(--surface);
    padding: 14px 16px;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
}

.editorial-inbox .in-app-actions .flex > button,
.editorial-inbox .app-action .flex > button,
.editorial-inbox .in-app-actions form .flex button[type="button"],
.editorial-inbox .app-action form button[type="submit"],
.editorial-inbox .app-action form input[type="submit"],
.editorial-inbox .app-action form button[type="button"] {
    border-radius: 999px !important;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600 !important;
    letter-spacing: 0;
    transition: all 180ms ease;
    border: 1px solid transparent;
}
.editorial-inbox .in-app-actions .flex > button[class*="bg-gray-100"],
.editorial-inbox .app-action form input[type="submit"][class*="bg-gray-100"],
.editorial-inbox .app-action form button[type="button"][class*="bg-gray-100"] {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}
.editorial-inbox .in-app-actions .flex > button[class*="bg-gray-100"]:hover,
.editorial-inbox .app-action form input[type="submit"][class*="bg-gray-100"]:hover {
    background: var(--brand-light) !important;
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}
.editorial-inbox .in-app-actions .flex > button[class*="bg-blue-600"],
.editorial-inbox .app-action form input[type="submit"][class*="bg-blue-600"],
.editorial-inbox .app-action form button[class*="bg-blue-600"] {
    background: var(--brand) !important;
    color: #fff !important;
    border-color: var(--brand) !important;
}
.editorial-inbox .in-app-actions .flex > button[class*="bg-blue-600"]:hover,
.editorial-inbox .app-action form input[type="submit"][class*="bg-blue-600"]:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
}

.editorial-inbox .app-action input[type="text"][class*="border-gray-300"] {
    border-color: var(--border) !important;
    background: var(--surface);
    border-radius: var(--radius) !important;
    color: var(--ink);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.editorial-inbox .app-action input[type="text"][class*="border-gray-300"]:focus {
    border-color: var(--brand) !important;
    box-shadow: var(--ring) !important;
    outline: none;
}
.editorial-inbox .app-action a[class*="bg-gray-100"] {
    background: var(--surface) !important;
    color: var(--ink) !important;
    border: 1px solid var(--border) !important;
    border-radius: 999px !important;
}
.editorial-inbox .app-action a[class*="bg-gray-100"]:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
    background: var(--brand-light) !important;
}
.editorial-inbox .in-app-actions button[class*="text-red-500"] {
    color: var(--danger) !important;
    border-radius: 999px !important;
}
.editorial-inbox .in-app-actions button[class*="text-red-500"]:hover {
    background: rgba(220, 53, 69, 0.08) !important;
}

/* Inbox message list */
.editorial-inbox .mailbox.email-list {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    margin-top: 12px;
}
.editorial-inbox .mailbox .list > div:first-child,
.editorial-inbox .mailbox .list > .flex.items-center.gap-3 {
    background: var(--surface-alt) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 20px !important;
}
.editorial-inbox .mailbox .list > div:first-child > div {
    color: var(--muted) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}
.editorial-inbox .mailbox .messages {
    max-height: 380px;
    overflow-y: auto;
}
.editorial-inbox .email-item {
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 20px !important;
    transition: background 180ms ease;
    background: var(--surface);
}
.editorial-inbox .email-item:hover {
    background: var(--brand-light) !important;
}
.editorial-inbox .email-item .font-semibold {
    color: var(--ink) !important;
    font-weight: 600 !important;
}
.editorial-inbox .email-item .text-gray-400,
.editorial-inbox .email-item .text-xs {
    color: var(--muted) !important;
}

/* Email detail view */
.editorial-inbox .email-detail {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-top: 12px;
}
.editorial-inbox .email-detail > .flex.items-center:first-child {
    background: var(--surface-alt) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 20px !important;
}
.editorial-inbox .email-detail button[class*="text-gray-600"] {
    color: var(--ink) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    transition: all 180ms ease;
}
.editorial-inbox .email-detail button[class*="text-gray-600"]:hover {
    background: var(--brand-light) !important;
    color: var(--brand) !important;
}
.editorial-inbox .email-detail .font-bold.text-gray-900 {
    color: var(--ink) !important;
    font-family: "Inter", "Poppins", system-ui, sans-serif;
    font-weight: 700;
}

/* Empty inbox state */
.editorial-inbox .flex.items-center.justify-center[style*="min-height: 400px"] > div {
    color: var(--muted) !important;
}
.editorial-inbox .flex.items-center.justify-center[style*="min-height: 400px"] svg {
    color: var(--brand) !important;
    opacity: 0.5;
}
.editorial-inbox .flex.items-center.justify-center[style*="min-height: 400px"] .text-lg {
    color: var(--ink) !important;
    font-family: "Inter", "Poppins", system-ui, sans-serif;
    letter-spacing: -0.02em;
    font-size: 1.375rem !important;
    font-weight: 700 !important;
}

/* ============================================================
   Ad slots — labeled, CLS-safe, palette-aligned
   ============================================================ */
.ad-slot-wrapper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ad-slot-label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}
.ad-slot-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ad-slot-container ins.adsbygoogle,
.ad-slot-container ins.adsbygoogle-lazy {
    max-width: 100%;
}

/* Position-specific wrappers */
.ad-slot-wrapper[data-position="leaderboard"] {
    padding: 8px 12px;
    background: var(--surface-alt);
}
.ad-slot-wrapper[data-position="sidebar"] {
    padding: 12px;
    position: sticky;
    top: 84px;
}
.ad-slot-wrapper[data-position="in-article"] {
    padding: 12px 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* ============================================================
   Blog/FAQ section
   ============================================================ */
.dash-faq {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px;
}
.dash-faq details {
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
}
.dash-faq details:last-of-type { border-bottom: none; }
.dash-faq summary {
    font-family: "Inter", "Poppins", system-ui, sans-serif;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dash-faq summary::-webkit-details-marker { display: none; }
.dash-faq summary::after {
    content: "+";
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--brand);
    transition: transform 200ms ease;
}
.dash-faq details[open] summary::after {
    content: "−";
}
.dash-faq details > p {
    color: var(--ink-2);
    line-height: 1.7;
    margin-top: 12px;
    font-size: 0.9375rem;
}

.dash-blog-list {
    display: grid;
    gap: 16px;
}
@media (min-width: 640px) {
    .dash-blog-list { grid-template-columns: repeat(2, 1fr); }
}

.dash-blog-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.dash-blog-card:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow);
}
.dash-blog-card .meta {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand);
}
.dash-blog-card .title {
    font-family: "Inter", "Poppins", system-ui, sans-serif;
    font-weight: 700;
    color: var(--ink);
    font-size: 1.0625rem;
    margin-top: 8px;
}
.dash-blog-card .excerpt {
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-top: 8px;
}

/* ============================================================
   Responsive helpers
   ============================================================ */
@media (max-width: 1023px) {
    .dash-sidebar-sticky {
        position: static;
        top: auto;
    }
    .ad-slot-wrapper[data-position="sidebar"] {
        position: static;
        top: auto;
        min-height: auto !important;
    }
}

/* Footer */
footer .editorial-eyebrow,
footer .text-\[11px\] {
    color: var(--muted) !important;
    font-family: "Inter", system-ui, sans-serif;
    letter-spacing: 0.22em;
}
footer .editorial-heading,
footer .text-3xl {
    color: var(--ink) !important;
    font-family: "Inter", "Poppins", system-ui, sans-serif;
    font-weight: 700;
}
footer a:hover { color: var(--brand) !important; }

/* ============================================================
   Dashboard Header — brand + dropdown nav
   ============================================================ */
.dash-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    flex-wrap: nowrap;
}
.dash-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}
.dash-brand .dash-brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: 0.25em;
    font-size: 14px;
    flex-shrink: 0;
}
.dash-brand .dash-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
}
.dash-brand .dash-brand-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.dash-brand .dash-brand-eyebrow {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-brand .dash-brand-name {
    font-family: "Inter", "Poppins", system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav actions area */
.dash-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Dropdown trigger */
.dash-nav-dropdown {
    position: relative;
    display: inline-block;
}
.dash-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink);
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.dash-nav-trigger:hover,
.dash-nav-trigger:focus-visible,
.dash-nav-dropdown.is-open .dash-nav-trigger {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-light);
}
.dash-nav-trigger .dash-nav-caret {
    font-size: 10px;
    transition: transform 180ms ease;
}
.dash-nav-dropdown.is-open .dash-nav-trigger .dash-nav-caret {
    transform: rotate(180deg);
}

/* Dropdown menu panel */
.dash-nav-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 10px;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.dash-nav-dropdown.is-open .dash-nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dash-nav-section-label {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 12px 6px;
}
.dash-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}
.dash-nav-link:hover,
.dash-nav-link:focus-visible {
    background: var(--brand-light);
    color: var(--brand);
}
.dash-nav-link i,
.dash-nav-link svg {
    color: var(--muted);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.dash-nav-link:hover i,
.dash-nav-link:hover svg {
    color: var(--brand);
}
.dash-nav-link .dash-nav-link-desc {
    font-size: 11px;
    color: var(--muted);
    font-weight: 400;
    margin-top: 2px;
    display: block;
}

/* Admin badge */
.dash-admin-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
}

/* Mobile chip row */
.dash-mobile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.dash-mobile-row::-webkit-scrollbar { display: none; }
.dash-mobile-row .public-chip {
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8125rem;
    flex-shrink: 0;
}
.dash-mobile-row .dash-nav-trigger {
    padding: 8px 14px;
    font-size: 0.8125rem;
    flex-shrink: 0;
}
.dash-mobile-row .dash-nav-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    min-width: 240px;
}

/* Responsive */
@media (max-width: 1023px) {
    .dash-desktop-only { display: none !important; }
}
@media (min-width: 1024px) {
    .dash-mobile-only { display: none !important; }
}

/* When dropdown is open and menu is in mobile row, prevent clipping */
.dash-mobile-row .dash-nav-dropdown {
    position: relative;
    flex-shrink: 0;
}

/* === Header polish (shared across home / blog / tools / SEO pages) === */
.dash-header {
    box-shadow: 0 1px 0 rgba(33, 37, 41, 0.04), 0 6px 24px rgba(33, 37, 41, 0.05);
    transition: box-shadow 200ms ease;
}
.dash-brand {
    transition: opacity 160ms ease;
}
.dash-brand:hover .dash-brand-name {
    color: var(--brand);
    transition: color 160ms ease;
}
/* Logo badge: gradient + hairline ring (image logos keep object-fit) */
.dash-brand .dash-brand-logo {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.dash-brand:hover .dash-brand-logo {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 10px 22px rgba(0, 123, 255, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
/* Trigger: clearer focus ring for keyboard users */
.dash-nav-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-light), 0 0 0 1px var(--brand);
}
/* Trigger: glowing state when the current page lives inside this dropdown */
.dash-nav-trigger.is-active-trigger {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-light);
}
/* Dropdown panel: brand accent bar + softer, deeper shadow */
.dash-nav-menu {
    box-shadow: 0 18px 48px rgba(33, 37, 41, 0.16), 0 2px 6px rgba(33, 37, 41, 0.06);
    overflow: hidden;
}
.dash-nav-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-dark) 100%);
    opacity: 0.9;
}
.dash-nav-dropdown.is-open .dash-nav-menu .dash-nav-link {
    animation: dash-nav-in 220ms ease both;
}
@keyframes dash-nav-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Active section link */
.dash-nav-link.is-active {
    background: var(--brand-light);
    color: var(--brand);
    font-weight: 600;
}
.dash-nav-link.is-active i,
.dash-nav-link.is-active svg {
    color: var(--brand);
}
/* Admin badge: brand gradient instead of flat ink */
.dash-admin-badge {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.26);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.dash-admin-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 123, 255, 0.34);
    color: #fff;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dash-brand:hover .dash-brand-logo,
    .dash-admin-badge:hover,
    .dash-nav-dropdown.is-open .dash-nav-menu .dash-nav-link {
        transform: none;
        animation: none;
    }
}

/* ============================================================
   Global Navigation V3 — editorial utility bar
   ============================================================ */
[x-cloak] { display: none !important; }

.site-nav,
.site-nav *,
.site-nav *::before,
.site-nav *::after {
    box-sizing: border-box;
}
.site-nav button,
.site-nav select {
    margin: 0;
    font: inherit;
    line-height: inherit;
    text-transform: none;
}
.site-nav button {
    -webkit-appearance: none;
    appearance: none;
}
.site-nav a,
.site-nav button {
    -webkit-tap-highlight-color: transparent;
}
.site-nav img {
    display: block;
    max-width: 100%;
}

.site-nav {
    --brand: #007bff;
    --brand-dark: #0056b3;
    --brand-light: #e7f1ff;
    --ink: #212529;
    --muted: #6c757d;
    isolation: isolate;
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(255, 253, 249, 0.92);
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 14px 40px rgba(17, 24, 39, 0.06);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}
.site-nav > .dash-container {
    width: min(100% - 32px, 1180px);
    margin-inline: auto;
}
.site-nav-accent {
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, var(--brand) 0 13%, #f59e0b 13% 25%, transparent 25% 100%);
}
.site-nav-row {
    min-height: 78px;
    display: grid;
    grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
    align-items: center;
    gap: 24px;
}
.site-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    justify-self: start;
    text-decoration: none;
}
.site-nav-mark {
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 15px;
    background: var(--ink);
    color: #fff;
    box-shadow: 0 9px 24px rgba(17, 24, 39, 0.18);
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.site-nav-mark::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: -8px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: var(--brand);
}
.site-nav-mark > span {
    position: relative;
    z-index: 1;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
}
.site-nav-mark img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}
.site-nav-brand:hover .site-nav-mark {
    transform: translateY(-2px) rotate(-2deg);
    box-shadow: 0 13px 28px rgba(17, 24, 39, 0.22);
}
.site-nav-brand-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.05;
}
.site-nav-brand-name {
    overflow: hidden;
    color: var(--ink);
    font-family: "Poppins", "Inter", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-nav-brand-note {
    margin-top: 5px;
    overflow: hidden;
    color: var(--muted);
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-nav-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 5px 18px rgba(17, 24, 39, 0.05);
}
.site-nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 15px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #4b5563;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.site-nav-item i {
    font-size: 9px;
    transition: transform 160ms ease;
}
.site-nav-item:hover,
.site-nav-item:focus-visible {
    color: var(--ink);
    background: rgba(17, 24, 39, 0.055);
    outline: none;
}
.site-nav-item.is-active {
    color: #fff;
    background: var(--ink);
    box-shadow: 0 7px 18px rgba(17, 24, 39, 0.17);
}
.site-nav-popover {
    position: relative;
}
.site-nav-popover:has(> [aria-expanded="true"]) .site-nav-item i {
    transform: rotate(180deg);
}
.site-nav-mega,
.site-nav-discover {
    position: absolute;
    top: calc(100% + 17px);
    left: 50%;
    width: min(680px, calc(100vw - 32px));
    padding: 18px;
    transform: translateX(-38%);
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 24px;
    background: rgba(255, 253, 249, 0.98);
    box-shadow: 0 28px 80px rgba(17, 24, 39, 0.18), 0 4px 12px rgba(17, 24, 39, 0.06);
    backdrop-filter: blur(24px);
}
.site-nav-mega::before,
.site-nav-discover::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 43%;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    border-top: 1px solid rgba(17, 24, 39, 0.1);
    border-left: 1px solid rgba(17, 24, 39, 0.1);
    background: #fffdf9;
}
.site-nav-mega-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 4px 15px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}
.site-nav-mega-head strong {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font-family: "Poppins", sans-serif;
    font-size: 1.05rem;
}
.site-nav-mega-head > a {
    color: var(--brand-dark);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.site-nav-mega-head > a i { margin-left: 5px; }
.site-nav-kicker {
    display: block;
    color: var(--muted);
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.23em;
    text-transform: uppercase;
}
.site-nav-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 0;
}
.site-nav-tool-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border-radius: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
}
.site-nav-tool-link:hover {
    color: var(--ink);
    background: var(--brand-light);
    transform: translateY(-1px);
}
.site-nav-tool-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: #fff;
    color: var(--brand-dark);
    border: 1px solid rgba(17, 24, 39, 0.08);
}
.site-nav-tool-link strong,
.site-nav-tool-link small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-nav-tool-link strong { font-size: 12px; }
.site-nav-tool-link small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.site-nav-category-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid rgba(17, 24, 39, 0.08);
}
.site-nav-category-row a {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.045);
    color: #5b6474;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}
.site-nav-category-row a:hover { background: var(--brand-light); color: var(--brand-dark); }
.site-nav-discover {
    left: auto;
    right: -18px;
    width: 330px;
    transform: none;
    padding: 12px;
}
.site-nav-discover::before { left: auto; right: 46px; }
.site-nav-discover > .site-nav-kicker { padding: 8px 10px 10px; }
.site-nav-discover > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    border-radius: 13px;
    color: var(--ink);
    text-decoration: none;
    transition: background 150ms ease;
}
.site-nav-discover > a:hover { color: var(--ink); background: var(--brand-light); }
.site-nav-discover > a > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: #fff;
    border: 1px solid rgba(17, 24, 39, 0.08);
    color: var(--brand-dark);
}
.site-nav-discover strong,
.site-nav-discover small { display: block; }
.site-nav-discover strong { font-size: 12px; }
.site-nav-discover small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.site-nav-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 9px;
}
.site-nav-live .visitor-analytics-widget > div {
    min-height: 38px;
}
.visitor-analytics-widget {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 11px;
    border: 1px solid rgba(17, 24, 39, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.66);
    font-family: "Inter", sans-serif;
}
.visitor-status-dot {
    position: relative;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}
.visitor-status-dot::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: inherit;
    animation: visitor-pulse 2s ease-out infinite;
}
.visitor-status-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    line-height: 1;
}
.visitor-status-copy strong { color: var(--ink); font-size: 11px; font-weight: 800; }
.visitor-status-copy small { color: var(--muted); font-size: 9px; font-weight: 600; }
@keyframes visitor-pulse {
    0% { transform: scale(0.75); opacity: 0.9; }
    100% { transform: scale(1.55); opacity: 0; }
}
.site-nav-locale {
    min-height: 38px;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--muted);
}
.site-nav-locale i { font-size: 11px; }
.site-nav-locale select {
    appearance: none;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
}
.site-nav-cta,
.site-nav-admin {
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 30%, transparent);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.site-nav-cta:hover,
.site-nav-admin:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 25px color-mix(in srgb, var(--brand) 38%, transparent);
}
.site-nav-cta i { font-size: 10px; }
.site-nav-mobile-toggle {
    width: 42px;
    height: 42px;
    display: none;
    place-items: center;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}
.site-nav-mobile-toggle span {
    display: block;
    width: 18px;
    height: 1.5px;
    border-radius: 99px;
    background: var(--ink);
}
.site-nav-mobile {
    border-top: 1px solid rgba(17, 24, 39, 0.08);
    background: rgba(255, 253, 249, 0.98);
}
.site-nav-mobile-inner { padding: 24px max(20px, calc((100vw - 1180px) / 2)); }
.site-nav-mobile-lead strong {
    display: block;
    margin-top: 6px;
    color: var(--ink);
    font-family: "Poppins", sans-serif;
    font-size: 1.25rem;
}
.site-nav-mobile-links { margin-top: 20px; border-top: 1px solid rgba(17, 24, 39, 0.08); }
.site-nav-mobile-links a {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 15px 2px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    color: var(--ink);
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 650;
    text-decoration: none;
}
.site-nav-mobile-links a > span {
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
}
.site-nav-mobile-links a > i { color: var(--muted); font-size: 11px; }
.site-nav-mobile-links a.is-active { color: var(--brand-dark); }
.site-nav-mobile-links a.is-active > span,
.site-nav-mobile-links a.is-active > i { color: var(--brand); }
.site-nav-mobile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 20px;
}
.site-nav-socials { display: flex; gap: 8px; }
.site-nav-socials a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 50%;
    background: #fff;
    color: var(--muted);
}
.site-nav-socials a:hover { color: var(--brand); }

@media (max-width: 1180px) {
    .site-nav-row { grid-template-columns: minmax(175px, 1fr) auto minmax(120px, 1fr); gap: 14px; }
    .site-nav-item { padding-inline: 12px; }
    .site-nav-live { display: none !important; }
}
@media (max-width: 920px) {
    .site-nav-row { grid-template-columns: 1fr auto; min-height: 70px; }
    .site-nav-primary { display: none; }
    .site-nav-mobile-toggle { display: grid; }
}
@media (max-width: 560px) {
    .site-nav-row { min-height: 66px; gap: 10px; }
    .site-nav-mark { width: 40px; height: 40px; border-radius: 13px; }
    .site-nav-brand-note { max-width: 130px; }
    .site-nav-brand-name { font-size: 0.95rem; }
    .site-nav-cta { display: none !important; }
    .site-nav-mobile-inner { padding: 20px 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-nav-mark,
    .site-nav-tool-link,
    .site-nav-cta,
    .site-nav-admin { transition: none; }
}