npm - @m13v/seo-components - Versions diffs - 0.19.1 → 0.20.1 - Mend

@m13v/seo-components 0.19.1 → 0.20.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/dist/styles.css +1 -1
package/package.json +1 -1
package/src/components/AnimatedBeam.tsx +1 -1
package/src/components/AnimatedChecklist.tsx +2 -2
package/src/components/AnimatedDemo.tsx +2 -2
package/src/components/BackgroundGrid.tsx +1 -1
package/src/components/BeforeAfter.tsx +3 -3
package/src/components/BentoGrid.tsx +1 -1
package/src/components/BookCallCTA.tsx +1 -1
package/src/components/ClaudeMeterCta.tsx +203 -0
package/src/components/CodeComparison.tsx +4 -4
package/src/components/ComparisonTable.tsx +3 -3
package/src/components/FaqSection.tsx +1 -1
package/src/components/FlowDiagram.tsx +2 -2
package/src/components/GetStartedCTA.tsx +1 -1
package/src/components/GlowCard.tsx +1 -1
package/src/components/GuideChatPanel.tsx +17 -17
package/src/components/HorizontalStepper.tsx +2 -2
package/src/components/HtmlSitemap.tsx +3 -3
package/src/components/InlineTestimonial.tsx +1 -1
package/src/components/IntegrationsGrid.tsx +1 -1
package/src/components/LottiePlayer.tsx +1 -1
package/src/components/MetricsRow.tsx +1 -1
package/src/components/MotionSequence.tsx +2 -2
package/src/components/NewsletterSignup.tsx +2 -2
package/src/components/OrbitingCircles.tsx +2 -2
package/src/components/ProofBanner.tsx +1 -1
package/src/components/RelatedPostsGrid.tsx +1 -1
package/src/components/RemotionClip.tsx +1 -1
package/src/components/SeoPageComments.tsx +4 -4
package/src/components/SeoPageReactions.tsx +1 -1
package/src/components/SequenceDiagram.tsx +1 -1
package/src/components/ShineBorder.tsx +1 -1
package/src/components/SitemapSidebar.tsx +6 -6
package/src/components/StepTimeline.tsx +1 -1
package/src/components/StickyBottomCta.tsx +1 -1
package/src/components/Team.tsx +2 -2
package/src/index.ts +2 -0

package/dist/styles.css CHANGED Viewed

@@ -1,2 +1,2 @@
 *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
-/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-left-8{left:-2rem}.bottom-0{bottom:0}.bottom-2{bottom:.5rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-1\/2{left:50%}.left-2\.5{left:.625rem}.left-3{left:.75rem}.left-4{left:1rem}.right-0{right:0}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-2{top:.5rem}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[1\]{z-index:1}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.m-1{margin:.25rem}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.my-12{margin-top:3rem;margin-bottom:3rem}.my-16{margin-top:4rem;margin-bottom:4rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.-ml-px{margin-left:-1px}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-auto{margin-top:auto}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-16{height:4rem}.h-2\.5{height:.625rem}.h-28{height:7rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[14px\]{height:14px}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-32{max-height:8rem}.min-h-0{min-height:0}.min-h-\[120px\]{min-height:120px}.min-h-\[180px\]{min-height:180px}.min-h-\[200px\]{min-height:200px}.min-h-\[280px\]{min-height:280px}.min-h-\[60px\]{min-height:60px}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-5{width:1.25rem}.w-5\/6{width:83.333333%}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-\[7px\]{width:7px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[300px\]{min-width:300px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-\[180px\]{max-width:180px}.max-w-\[85\%\]{max-width:85%}.max-w-\[90\%\]{max-width:90%}.max-w-\[9rem\]{max-width:9rem}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-screen-xl{max-width:1280px}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0,.shrink-0{flex-shrink:0}.origin-left{transform-origin:left}.origin-top{transform-origin:top}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-x-0{--tw-translate-x:0px}.transform,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-\[shimmer_2\.2s_infinite\]{animation:shimmer 2.2s infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-zinc-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(228 228 231/var(--tw-divide-opacity,1))}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[color-mix\(in_srgb\2c currentColor_10\%\2c transparent\)\]{border-color:color-mix(in srgb,currentColor 10%,transparent)}.border-\[color-mix\(in_srgb\2c currentColor_14\%\2c transparent\)\]{border-color:color-mix(in srgb,currentColor 14%,transparent)}.border-\[var\(--seo-accent\2c \#14b8a6\)\]{border-color:var(--seo-accent,#14b8a6)}.border-emerald-500\/30{border-color:rgba(16,185,129,.3)}.border-teal-100{--tw-border-opacity:1;border-color:rgb(204 251 241/var(--tw-border-opacity,1))}.border-teal-200{--tw-border-opacity:1;border-color:rgb(153 246 228/var(--tw-border-opacity,1))}.border-teal-400{--tw-border-opacity:1;border-color:rgb(45 212 191/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-zinc-100{--tw-border-opacity:1;border-color:rgb(244 244 245/var(--tw-border-opacity,1))}.border-zinc-200{--tw-border-opacity:1;border-color:rgb(228 228 231/var(--tw-border-opacity,1))}.border-zinc-300{--tw-border-opacity:1;border-color:rgb(212 212 216/var(--tw-border-opacity,1))}.border-zinc-800{--tw-border-opacity:1;border-color:rgb(39 39 42/var(--tw-border-opacity,1))}.bg-\[\#0d1117\]{--tw-bg-opacity:1;background-color:rgb(13 17 23/var(--tw-bg-opacity,1))}.bg-\[var\(--seo-accent-light\2c rgba\(20\2c 184\2c 166\2c 0\.08\)\)\]{background-color:var(--seo-accent-light,rgba(20,184,166,.08))}.bg-amber-400\/60{background-color:rgba(251,191,36,.6)}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-emerald-400\/60{background-color:rgba(52,211,153,.6)}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-500\/10{background-color:rgba(16,185,129,.1)}.bg-emerald-500\/20{background-color:rgba(16,185,129,.2)}.bg-green-400\/80{background-color:rgba(74,222,128,.8)}.bg-red-400\/60{background-color:hsla(0,91%,71%,.6)}.bg-red-400\/80{background-color:hsla(0,91%,71%,.8)}.bg-teal-300{--tw-bg-opacity:1;background-color:rgb(94 234 212/var(--tw-bg-opacity,1))}.bg-teal-400{--tw-bg-opacity:1;background-color:rgb(45 212 191/var(--tw-bg-opacity,1))}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.bg-teal-50\/30{background-color:rgba(240,253,250,.3)}.bg-teal-50\/40{background-color:rgba(240,253,250,.4)}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity,1))}.bg-teal-500\/10{background-color:rgba(20,184,166,.1)}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/50{background-color:hsla(0,0%,100%,.5)}.bg-white\/90{background-color:hsla(0,0%,100%,.9)}.bg-yellow-400\/80{background-color:rgba(250,204,21,.8)}.bg-zinc-100{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.bg-zinc-200{--tw-bg-opacity:1;background-color:rgb(228 228 231/var(--tw-bg-opacity,1))}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.bg-zinc-400{--tw-bg-opacity:1;background-color:rgb(161 161 170/var(--tw-bg-opacity,1))}.bg-zinc-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.bg-zinc-900\/50{background-color:rgba(24,24,27,.5)}.bg-zinc-950{--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-cyan-500{--tw-gradient-from:#06b6d4 var(--tw-gradient-from-position);--tw-gradient-to:rgba(6,182,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-400{--tw-gradient-from:#2dd4bf var(--tw-gradient-from-position);--tw-gradient-to:rgba(45,212,191,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-400\/20{--tw-gradient-from:rgba(45,212,191,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(45,212,191,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-400\/30{--tw-gradient-from:rgba(45,212,191,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(45,212,191,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-50{--tw-gradient-from:#f0fdfa var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,253,250,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-500\/40{--tw-gradient-from:rgba(20,184,166,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,184,166,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-zinc-100{--tw-gradient-from:#f4f4f5 var(--tw-gradient-from-position);--tw-gradient-to:hsla(240,5%,96%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-zinc-50{--tw-gradient-from:#fafafa var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-cyan-400\/15{--tw-gradient-to:rgba(34,211,238,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(34,211,238,.15) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-teal-300{--tw-gradient-to:rgba(94,234,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#5eead4 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-teal-600\/80{--tw-gradient-to:rgba(13,148,136,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,148,136,.8) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/40{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-50\%{--tw-gradient-via-position:50%}.to-cyan-50{--tw-gradient-to:#ecfeff var(--tw-gradient-to-position)}.to-cyan-500\/30{--tw-gradient-to:rgba(6,182,212,.3) var(--tw-gradient-to-position)}.to-teal-500{--tw-gradient-to:#14b8a6 var(--tw-gradient-to-position)}.to-teal-500\/10{--tw-gradient-to:rgba(20,184,166,.1) var(--tw-gradient-to-position)}.to-teal-600{--tw-gradient-to:#0d9488 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.to-zinc-100{--tw-gradient-to:#f4f4f5 var(--tw-gradient-to-position)}.to-zinc-200{--tw-gradient-to:#e4e4e7 var(--tw-gradient-to-position)}.to-zinc-50{--tw-gradient-to:#fafafa var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-no-repeat{background-repeat:no-repeat}.fill-white{fill:#fff}.fill-zinc-900{fill:#18181b}.stroke-amber-400{stroke:#fbbf24}.stroke-emerald-500{stroke:#10b981}.stroke-red-400{stroke:#f87171}.stroke-teal-500{stroke:#14b8a6}.stroke-zinc-200{stroke:#e4e4e7}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[40pt\]{font-size:40pt}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[5rem\]{line-height:5rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#8b949e\]{--tw-text-opacity:1;color:rgb(139 148 158/var(--tw-text-opacity,1))}.text-\[var\(--seo-accent\2c \#14b8a6\)\]{color:var(--seo-accent,#14b8a6)}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-teal-300{--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-teal-700{--tw-text-opacity:1;color:rgb(15 118 110/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-100{--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.text-zinc-200{--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.text-zinc-300{--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-800{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-zinc-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(161 161 170/var(--tw-placeholder-opacity,1))}.placeholder-zinc-400::placeholder{--tw-placeholder-opacity:1;color:rgb(161 161 170/var(--tw-placeholder-opacity,1))}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-teal-500\/30{--tw-shadow-color:rgba(20,184,166,.3);--tw-shadow:var(--tw-shadow-colored)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow-sm{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)}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.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-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-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)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[-moz-osx-font-smoothing\:grayscale\]{-moz-osx-font-smoothing:grayscale}.\[-webkit-font-smoothing\:antialiased\]{-webkit-font-smoothing:antialiased}.\[animation-delay\:150ms\]{animation-delay:.15s}.\[animation-delay\:300ms\]{animation-delay:.3s}.\[background-position\:0_0\]{background-position:0 0}.\[background-size\:var\(--shimmer-width\)_100\%\]{background-size:var(--shimmer-width) 100%}.\[font-smooth\:antialiased\]{font-smooth:antialiased}.\[text-rendering\:optimizeLegibility\]{text-rendering:optimizeLegibility}.\[transition\:background-position_1s_cubic-bezier\(\.6\2c \.6\2c 0\2c 1\)_infinite\]{transition:background-position infinite 1s cubic-bezier(.6,.6,0,1)}.\[will-change\:filter\2c opacity\]{will-change:filter,opacity}:root{--seo-accent:#14b8a6;--seo-accent-light:#2dd4bf;--seo-accent-dark:#0d9488;--seo-accent-rgb:20,184,166;--seo-accent-gradient-from:#06b6d4;--seo-accent-gradient-to:#14b8a6}.placeholder\:text-zinc-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.placeholder\:text-zinc-400::placeholder{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:inset-\[0\]:before{content:var(--tw-content);inset:0}.before\:aspect-square:before{content:var(--tw-content);aspect-ratio:1/1}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:rounded-\[--border-radius\]:before{content:var(--tw-content);border-radius:var(--border-radius)}.before\:p-\[--border-width\]:before{content:var(--tw-content);padding:var(--border-width)}.before\:will-change-\[background-position\]:before{content:var(--tw-content);will-change:background-position}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\!\[-webkit-mask-composite\:xor\]:before{content:var(--tw-content);-webkit-mask-composite:xor!important}.before\:\[background-image\:var\(--background-radial-gradient\)\]:before{content:var(--tw-content);background-image:var(--background-radial-gradient)}.before\:\[background-size\:300\%_300\%\]:before{content:var(--tw-content);background-size:300% 300%}.before\:\!\[mask-composite\:exclude\]:before{content:var(--tw-content);-webkit-mask-composite:xor!important;mask-composite:exclude!important}.before\:\[mask\:var\(--mask-linear-gradient\)\]:before{content:var(--tw-content);-webkit-mask:var(--mask-linear-gradient);mask:var(--mask-linear-gradient)}.focus-within\:border-teal-300:focus-within{--tw-border-opacity:1;border-color:rgb(94 234 212/var(--tw-border-opacity,1))}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-teal-500\/20:focus-within{--tw-ring-color:rgba(20,184,166,.2)}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-teal-300:hover{--tw-border-opacity:1;border-color:rgb(94 234 212/var(--tw-border-opacity,1))}.hover\:border-zinc-300:hover{--tw-border-opacity:1;border-color:rgb(212 212 216/var(--tw-border-opacity,1))}.hover\:bg-\[color-mix\(in_srgb\2c currentColor_8\%\2c transparent\)\]:hover{background-color:color-mix(in srgb,currentColor 8%,transparent)}.hover\:bg-teal-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.hover\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.hover\:bg-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110/var(--tw-bg-opacity,1))}.hover\:bg-zinc-100:hover{--tw-bg-opacity:1;background-color:rgb(244 244 245/var(--tw-bg-opacity,1))}.hover\:bg-zinc-50:hover{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.hover\:text-teal-700:hover{--tw-text-opacity:1;color:rgb(15 118 110/var(--tw-text-opacity,1))}.hover\:text-zinc-600:hover{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.hover\:text-zinc-700:hover{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.hover\:text-zinc-800:hover{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.hover\:text-zinc-900:hover{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.hover\:opacity-70:hover{opacity:.7}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-\[var\(--seo-accent\2c \#14b8a6\)\]:focus{border-color:var(--seo-accent,#14b8a6)}.focus\:border-teal-500:focus{--tw-border-opacity:1;border-color:rgb(20 184 166/var(--tw-border-opacity,1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-teal-500\/40:focus{--tw-ring-color:rgba(20,184,166,.4)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-zinc-300:disabled{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.disabled\:opacity-60:disabled{opacity:.6}.group[open] .group-open\:rotate-45{--tw-rotate:45deg}.group:hover .group-hover\:translate-x-0\.5,.group[open] .group-open\:rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-0\.5{--tw-translate-x:0.125rem}.group:hover .group-hover\:gap-2{gap:.5rem}.group:hover .group-hover\:text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-70{opacity:.7}@media (prefers-reduced-motion:no-preference){.motion-safe\:before\:animate-\[shine-pulse_var\(--shine-pulse-duration\)_infinite_linear\]:before{content:var(--tw-content);animation:shine-pulse var(--shine-pulse-duration) infinite linear}}.dark\:divide-zinc-800:is(.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(39 39 42/var(--tw-divide-opacity,1))}.dark\:border-teal-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(17 94 89/var(--tw-border-opacity,1))}.dark\:border-teal-800\/60:is(.dark *){border-color:rgba(17,94,89,.6)}.dark\:border-teal-900:is(.dark *){--tw-border-opacity:1;border-color:rgb(19 78 74/var(--tw-border-opacity,1))}.dark\:border-zinc-700:is(.dark *){--tw-border-opacity:1;border-color:rgb(63 63 70/var(--tw-border-opacity,1))}.dark\:border-zinc-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(39 39 42/var(--tw-border-opacity,1))}.dark\:border-zinc-900:is(.dark *){--tw-border-opacity:1;border-color:rgb(24 24 27/var(--tw-border-opacity,1))}.dark\:bg-teal-900\/30:is(.dark *){background-color:rgba(19,78,74,.3)}.dark\:bg-teal-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(4 47 46/var(--tw-bg-opacity,1))}.dark\:bg-teal-950\/60:is(.dark *){background-color:rgba(4,47,46,.6)}.dark\:bg-zinc-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(82 82 91/var(--tw-bg-opacity,1))}.dark\:bg-zinc-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\:bg-zinc-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.dark\:bg-zinc-900\/50:is(.dark *){background-color:rgba(24,24,27,.5)}.dark\:bg-zinc-900\/60:is(.dark *){background-color:rgba(24,24,27,.6)}.dark\:bg-zinc-900\/90:is(.dark *){background-color:rgba(24,24,27,.9)}.dark\:bg-zinc-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.dark\:bg-zinc-950\/50:is(.dark *){background-color:rgba(9,9,11,.5)}.dark\:from-teal-900\/20:is(.dark *){--tw-gradient-from:rgba(19,78,74,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(19,78,74,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-teal-950\/70:is(.dark *){--tw-gradient-from:rgba(4,47,46,.7) var(--tw-gradient-from-position);--tw-gradient-to:rgba(4,47,46,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:to-zinc-900:is(.dark *){--tw-gradient-to:#18181b var(--tw-gradient-to-position)}.dark\:to-zinc-950:is(.dark *){--tw-gradient-to:#09090b var(--tw-gradient-to-position)}.dark\:fill-zinc-800:is(.dark *){fill:#27272a}.dark\:stroke-zinc-700:is(.dark *){stroke:#3f3f46}.dark\:text-teal-200:is(.dark *){--tw-text-opacity:1;color:rgb(153 246 228/var(--tw-text-opacity,1))}.dark\:text-teal-300:is(.dark *){--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.dark\:text-teal-400:is(.dark *){--tw-text-opacity:1;color:rgb(45 212 191/var(--tw-text-opacity,1))}.dark\:text-zinc-100:is(.dark *){--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.dark\:text-zinc-200:is(.dark *){--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.dark\:text-zinc-300:is(.dark *){--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.dark\:text-zinc-400:is(.dark *){--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.dark\:text-zinc-500:is(.dark *){--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:text-zinc-600:is(.dark *){--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.dark\:placeholder\:text-zinc-500:is(.dark *)::-moz-placeholder{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:placeholder\:text-zinc-500:is(.dark *)::placeholder{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:focus-within\:border-teal-700:focus-within:is(.dark *){--tw-border-opacity:1;border-color:rgb(15 118 110/var(--tw-border-opacity,1))}.dark\:hover\:border-teal-700:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(15 118 110/var(--tw-border-opacity,1))}.dark\:hover\:border-zinc-700:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(63 63 70/var(--tw-border-opacity,1))}.dark\:hover\:bg-teal-950\/60:hover:is(.dark *){background-color:rgba(4,47,46,.6)}.dark\:hover\:bg-zinc-800:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\:hover\:bg-zinc-900:hover:is(.dark *){--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.dark\:hover\:text-teal-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.dark\:hover\:text-zinc-100:hover:is(.dark *){--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.dark\:hover\:text-zinc-200:hover:is(.dark *){--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.dark\:disabled\:bg-zinc-700:disabled:is(.dark *){--tw-bg-opacity:1;background-color:rgb(63 63 70/var(--tw-bg-opacity,1))}.group:hover .dark\:group-hover\:text-teal-400:is(.dark *){--tw-text-opacity:1;color:rgb(45 212 191/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:mb-12{margin-bottom:3rem}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:block{display:block}.md\:h-24{height:6rem}.md\:min-w-\[340px\]{min-width:340px}.md\:flex-initial{flex:0 1 auto}.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\:p-12{padding:3rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-12{width:3rem}.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.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\:text-\[6rem\]{font-size:6rem}}@media (min-width:1280px){.xl\:flex{display:flex}}@media (min-width:1536px){.\32xl\:w-96{width:24rem}}
+/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-bottom-24{bottom:-6rem}.-left-16{left:-4rem}.-left-8{left:-2rem}.-right-16{right:-4rem}.-top-24{top:-6rem}.bottom-0{bottom:0}.bottom-2{bottom:.5rem}.bottom-4{bottom:1rem}.left-0{left:0}.left-1\/2{left:50%}.left-2\.5{left:.625rem}.left-3{left:.75rem}.left-4{left:1rem}.right-0{right:0}.top-0{top:0}.top-1{top:.25rem}.top-1\/2{top:50%}.top-2{top:.5rem}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[1\]{z-index:1}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.row-span-1{grid-row:span 1/span 1}.row-span-2{grid-row:span 2/span 2}.m-1{margin:.25rem}.m-auto{margin:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.my-12{margin-top:3rem;margin-bottom:3rem}.my-16{margin-top:4rem;margin-bottom:4rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.-ml-px{margin-left:-1px}.mb-0{margin-bottom:0}.mb-0\.5{margin-bottom:.125rem}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-0\.5{margin-left:.125rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-auto{margin-top:auto}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-0\.5{height:.125rem}.h-1{height:.25rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-16{height:4rem}.h-2{height:.5rem}.h-2\.5{height:.625rem}.h-28{height:7rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[14px\]{height:14px}.h-auto{height:auto}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-32{max-height:8rem}.min-h-0{min-height:0}.min-h-\[120px\]{min-height:120px}.min-h-\[180px\]{min-height:180px}.min-h-\[200px\]{min-height:200px}.min-h-\[280px\]{min-height:280px}.min-h-\[60px\]{min-height:60px}.w-1{width:.25rem}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-2\.5{width:.625rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-3\/4{width:75%}.w-4{width:1rem}.w-5{width:1.25rem}.w-5\/6{width:83.333333%}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-\[7px\]{width:7px}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.w-px{width:1px}.min-w-0{min-width:0}.min-w-\[300px\]{min-width:300px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-\[180px\]{max-width:180px}.max-w-\[85\%\]{max-width:85%}.max-w-\[90\%\]{max-width:90%}.max-w-\[9rem\]{max-width:9rem}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-screen-xl{max-width:1280px}.flex-1{flex:1 1 0%}.flex-none{flex:none}.flex-shrink-0,.shrink-0{flex-shrink:0}.origin-left{transform-origin:left}.origin-top{transform-origin:top}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y:-50%}.translate-x-0{--tw-translate-x:0px}.transform,.translate-x-0{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.animate-\[shimmer_2\.2s_infinite\]{animation:shimmer 2.2s infinite}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize-none{resize:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0{gap:0}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.space-y-0\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.125rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem*var(--tw-space-y-reverse))}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px*var(--tw-divide-x-reverse));border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)))}.divide-\[color-mix\(in_srgb\2c currentColor_14\%\2c transparent\)\]>:not([hidden])~:not([hidden]){border-color:color-mix(in srgb,currentColor 14%,transparent)}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-l{border-left-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-\[color-mix\(in_srgb\2c currentColor_10\%\2c transparent\)\]{border-color:color-mix(in srgb,currentColor 10%,transparent)}.border-\[color-mix\(in_srgb\2c currentColor_14\%\2c transparent\)\]{border-color:color-mix(in srgb,currentColor 14%,transparent)}.border-\[color-mix\(in_srgb\2c currentColor_16\%\2c transparent\)\]{border-color:color-mix(in srgb,currentColor 16%,transparent)}.border-\[color-mix\(in_srgb\2c currentColor_20\%\2c transparent\)\]{border-color:color-mix(in srgb,currentColor 20%,transparent)}.border-\[var\(--seo-accent\2c \#14b8a6\)\]{border-color:var(--seo-accent,#14b8a6)}.border-emerald-500\/30{border-color:rgba(16,185,129,.3)}.border-teal-100{--tw-border-opacity:1;border-color:rgb(204 251 241/var(--tw-border-opacity,1))}.border-teal-200{--tw-border-opacity:1;border-color:rgb(153 246 228/var(--tw-border-opacity,1))}.border-teal-200\/70{border-color:rgba(153,246,228,.7)}.border-teal-400{--tw-border-opacity:1;border-color:rgb(45 212 191/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-zinc-800{--tw-border-opacity:1;border-color:rgb(39 39 42/var(--tw-border-opacity,1))}.bg-\[\#0d1117\]{--tw-bg-opacity:1;background-color:rgb(13 17 23/var(--tw-bg-opacity,1))}.bg-\[color-mix\(in_srgb\2c currentColor_3\%\2c transparent\)\]{background-color:color-mix(in srgb,currentColor 3%,transparent)}.bg-\[color-mix\(in_srgb\2c currentColor_4\%\2c transparent\)\]{background-color:color-mix(in srgb,currentColor 4%,transparent)}.bg-\[color-mix\(in_srgb\2c currentColor_6\%\2c transparent\)\]{background-color:color-mix(in srgb,currentColor 6%,transparent)}.bg-\[color-mix\(in_srgb\2c currentColor_8\%\2c transparent\)\]{background-color:color-mix(in srgb,currentColor 8%,transparent)}.bg-\[var\(--seo-accent-light\2c rgba\(20\2c 184\2c 166\2c 0\.08\)\)\]{background-color:var(--seo-accent-light,rgba(20,184,166,.08))}.bg-amber-400\/60{background-color:rgba(251,191,36,.6)}.bg-black\/30{background-color:rgba(0,0,0,.3)}.bg-cyan-400\/40{background-color:rgba(34,211,238,.4)}.bg-emerald-400\/60{background-color:rgba(52,211,153,.6)}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-emerald-500\/10{background-color:rgba(16,185,129,.1)}.bg-emerald-500\/20{background-color:rgba(16,185,129,.2)}.bg-green-400\/80{background-color:rgba(74,222,128,.8)}.bg-red-400\/60{background-color:hsla(0,91%,71%,.6)}.bg-red-400\/80{background-color:hsla(0,91%,71%,.8)}.bg-teal-100\/70{background-color:rgba(204,251,241,.7)}.bg-teal-300{--tw-bg-opacity:1;background-color:rgb(94 234 212/var(--tw-bg-opacity,1))}.bg-teal-400{--tw-bg-opacity:1;background-color:rgb(45 212 191/var(--tw-bg-opacity,1))}.bg-teal-400\/40{background-color:rgba(45,212,191,.4)}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.bg-teal-50\/30{background-color:rgba(240,253,250,.3)}.bg-teal-50\/40{background-color:rgba(240,253,250,.4)}.bg-teal-500{--tw-bg-opacity:1;background-color:rgb(20 184 166/var(--tw-bg-opacity,1))}.bg-teal-500\/10{background-color:rgba(20,184,166,.1)}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-yellow-400\/80{background-color:rgba(250,204,21,.8)}.bg-zinc-200{--tw-bg-opacity:1;background-color:rgb(228 228 231/var(--tw-bg-opacity,1))}.bg-zinc-300{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.bg-zinc-400{--tw-bg-opacity:1;background-color:rgb(161 161 170/var(--tw-bg-opacity,1))}.bg-zinc-800{--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.bg-zinc-900{--tw-bg-opacity:1;background-color:rgb(24 24 27/var(--tw-bg-opacity,1))}.bg-zinc-900\/50{background-color:rgba(24,24,27,.5)}.bg-zinc-950{--tw-bg-opacity:1;background-color:rgb(9 9 11/var(--tw-bg-opacity,1))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-cyan-500{--tw-gradient-from:#06b6d4 var(--tw-gradient-from-position);--tw-gradient-to:rgba(6,182,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-400{--tw-gradient-from:#2dd4bf var(--tw-gradient-from-position);--tw-gradient-to:rgba(45,212,191,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-400\/20{--tw-gradient-from:rgba(45,212,191,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(45,212,191,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-400\/30{--tw-gradient-from:rgba(45,212,191,.3) var(--tw-gradient-from-position);--tw-gradient-to:rgba(45,212,191,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-50{--tw-gradient-from:#f0fdfa var(--tw-gradient-from-position);--tw-gradient-to:rgba(240,253,250,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-500{--tw-gradient-from:#14b8a6 var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,184,166,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-teal-500\/40{--tw-gradient-from:rgba(20,184,166,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(20,184,166,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-transparent{--tw-gradient-from:transparent var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-zinc-100{--tw-gradient-from:#f4f4f5 var(--tw-gradient-from-position);--tw-gradient-to:hsla(240,5%,96%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-zinc-50{--tw-gradient-from:#fafafa var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,98%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-cyan-400\/15{--tw-gradient-to:rgba(34,211,238,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(34,211,238,.15) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-teal-300{--tw-gradient-to:rgba(94,234,212,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#5eead4 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-teal-600\/80{--tw-gradient-to:rgba(13,148,136,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(13,148,136,.8) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#fff var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/40{--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),hsla(0,0%,100%,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-50\%{--tw-gradient-via-position:50%}.to-cyan-50{--tw-gradient-to:#ecfeff var(--tw-gradient-to-position)}.to-cyan-500\/30{--tw-gradient-to:rgba(6,182,212,.3) var(--tw-gradient-to-position)}.to-cyan-600{--tw-gradient-to:#0891b2 var(--tw-gradient-to-position)}.to-teal-500{--tw-gradient-to:#14b8a6 var(--tw-gradient-to-position)}.to-teal-500\/10{--tw-gradient-to:rgba(20,184,166,.1) var(--tw-gradient-to-position)}.to-teal-600{--tw-gradient-to:#0d9488 var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}.to-zinc-100{--tw-gradient-to:#f4f4f5 var(--tw-gradient-to-position)}.to-zinc-200{--tw-gradient-to:#e4e4e7 var(--tw-gradient-to-position)}.to-zinc-50{--tw-gradient-to:#fafafa var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-no-repeat{background-repeat:no-repeat}.fill-white{fill:#fff}.fill-zinc-900{fill:#18181b}.stroke-amber-400{stroke:#fbbf24}.stroke-emerald-500{stroke:#10b981}.stroke-red-400{stroke:#f87171}.stroke-teal-500{stroke:#14b8a6}.stroke-zinc-200{stroke:#e4e4e7}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0\.5{padding:.125rem}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-8{padding-left:2rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[40pt\]{font-size:40pt}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-\[5rem\]{line-height:5rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[-0\.02em\]{letter-spacing:-.02em}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-\[\#8b949e\]{--tw-text-opacity:1;color:rgb(139 148 158/var(--tw-text-opacity,1))}.text-\[var\(--seo-accent\2c \#14b8a6\)\]{color:var(--seo-accent,#14b8a6)}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-emerald-500{--tw-text-opacity:1;color:rgb(16 185 129/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-teal-300{--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-teal-700{--tw-text-opacity:1;color:rgb(15 118 110/var(--tw-text-opacity,1))}.text-teal-800{--tw-text-opacity:1;color:rgb(17 94 89/var(--tw-text-opacity,1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-zinc-100{--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.text-zinc-200{--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.text-zinc-300{--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.text-zinc-400{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.text-zinc-500{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.text-zinc-700{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.text-zinc-800{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.text-zinc-900{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-zinc-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(161 161 170/var(--tw-placeholder-opacity,1))}.placeholder-zinc-400::placeholder{--tw-placeholder-opacity:1;color:rgb(161 161 170/var(--tw-placeholder-opacity,1))}.opacity-50{opacity:.5}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-teal-500\/30{--tw-shadow-color:rgba(20,184,166,.3);--tw-shadow:var(--tw-shadow-colored)}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.blur{--tw-blur:blur(8px)}.blur,.blur-3xl{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)}.blur-3xl{--tw-blur:blur(64px)}.drop-shadow-sm{--tw-drop-shadow:drop-shadow(0 1px 1px rgba(0,0,0,.05))}.drop-shadow-sm,.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-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-sm,.backdrop-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)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.\[-moz-osx-font-smoothing\:grayscale\]{-moz-osx-font-smoothing:grayscale}.\[-webkit-font-smoothing\:antialiased\]{-webkit-font-smoothing:antialiased}.\[animation-delay\:150ms\]{animation-delay:.15s}.\[animation-delay\:300ms\]{animation-delay:.3s}.\[background-position\:0_0\]{background-position:0 0}.\[background-size\:var\(--shimmer-width\)_100\%\]{background-size:var(--shimmer-width) 100%}.\[font-smooth\:antialiased\]{font-smooth:antialiased}.\[text-rendering\:optimizeLegibility\]{text-rendering:optimizeLegibility}.\[transition\:background-position_1s_cubic-bezier\(\.6\2c \.6\2c 0\2c 1\)_infinite\]{transition:background-position infinite 1s cubic-bezier(.6,.6,0,1)}.\[will-change\:filter\2c opacity\]{will-change:filter,opacity}:root{--seo-accent:#14b8a6;--seo-accent-light:#2dd4bf;--seo-accent-dark:#0d9488;--seo-accent-rgb:20,184,166;--seo-accent-gradient-from:#06b6d4;--seo-accent-gradient-to:#14b8a6}.placeholder\:text-zinc-400::-moz-placeholder{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.placeholder\:text-zinc-400::placeholder{--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:inset-\[0\]:before{content:var(--tw-content);inset:0}.before\:aspect-square:before{content:var(--tw-content);aspect-ratio:1/1}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:rounded-\[--border-radius\]:before{content:var(--tw-content);border-radius:var(--border-radius)}.before\:p-\[--border-width\]:before{content:var(--tw-content);padding:var(--border-width)}.before\:will-change-\[background-position\]:before{content:var(--tw-content);will-change:background-position}.before\:content-\[\'\'\]:before{--tw-content:"";content:var(--tw-content)}.before\:\!\[-webkit-mask-composite\:xor\]:before{content:var(--tw-content);-webkit-mask-composite:xor!important}.before\:\[background-image\:var\(--background-radial-gradient\)\]:before{content:var(--tw-content);background-image:var(--background-radial-gradient)}.before\:\[background-size\:300\%_300\%\]:before{content:var(--tw-content);background-size:300% 300%}.before\:\!\[mask-composite\:exclude\]:before{content:var(--tw-content);-webkit-mask-composite:xor!important;mask-composite:exclude!important}.before\:\[mask\:var\(--mask-linear-gradient\)\]:before{content:var(--tw-content);-webkit-mask:var(--mask-linear-gradient);mask:var(--mask-linear-gradient)}.focus-within\:border-teal-300:focus-within{--tw-border-opacity:1;border-color:rgb(94 234 212/var(--tw-border-opacity,1))}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-within\:ring-teal-500\/20:focus-within{--tw-ring-color:rgba(20,184,166,.2)}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:border-\[color-mix\(in_srgb\2c currentColor_18\%\2c transparent\)\]:hover{border-color:color-mix(in srgb,currentColor 18%,transparent)}.hover\:border-\[color-mix\(in_srgb\2c currentColor_25\%\2c transparent\)\]:hover{border-color:color-mix(in srgb,currentColor 25%,transparent)}.hover\:border-teal-300:hover{--tw-border-opacity:1;border-color:rgb(94 234 212/var(--tw-border-opacity,1))}.hover\:bg-\[color-mix\(in_srgb\2c currentColor_4\%\2c transparent\)\]:hover{background-color:color-mix(in srgb,currentColor 4%,transparent)}.hover\:bg-\[color-mix\(in_srgb\2c currentColor_8\%\2c transparent\)\]:hover{background-color:color-mix(in srgb,currentColor 8%,transparent)}.hover\:bg-teal-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.hover\:bg-teal-600:hover{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.hover\:bg-teal-700:hover{--tw-bg-opacity:1;background-color:rgb(15 118 110/var(--tw-bg-opacity,1))}.hover\:text-teal-700:hover{--tw-text-opacity:1;color:rgb(15 118 110/var(--tw-text-opacity,1))}.hover\:text-zinc-600:hover{--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.hover\:text-zinc-700:hover{--tw-text-opacity:1;color:rgb(63 63 70/var(--tw-text-opacity,1))}.hover\:text-zinc-800:hover{--tw-text-opacity:1;color:rgb(39 39 42/var(--tw-text-opacity,1))}.hover\:text-zinc-900:hover{--tw-text-opacity:1;color:rgb(24 24 27/var(--tw-text-opacity,1))}.hover\:opacity-70:hover{opacity:.7}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-md:hover,.hover\:shadow-xl:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.hover\:shadow-teal-500\/40:hover{--tw-shadow-color:rgba(20,184,166,.4);--tw-shadow:var(--tw-shadow-colored)}.focus\:border-\[var\(--seo-accent\2c \#14b8a6\)\]:focus{border-color:var(--seo-accent,#14b8a6)}.focus\:border-teal-500:focus{--tw-border-opacity:1;border-color:rgb(20 184 166/var(--tw-border-opacity,1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-teal-500\/40:focus{--tw-ring-color:rgba(20,184,166,.4)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-zinc-300:disabled{--tw-bg-opacity:1;background-color:rgb(212 212 216/var(--tw-bg-opacity,1))}.disabled\:opacity-60:disabled{opacity:.6}.group[open] .group-open\:rotate-45{--tw-rotate:45deg}.group:hover .group-hover\:translate-x-0\.5,.group[open] .group-open\:rotate-45{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:translate-x-0\.5{--tw-translate-x:0.125rem}.group:hover .group-hover\:gap-2{gap:.5rem}.group:hover .group-hover\:text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-70{opacity:.7}@media (prefers-reduced-motion:no-preference){.motion-safe\:before\:animate-\[shine-pulse_var\(--shine-pulse-duration\)_infinite_linear\]:before{content:var(--tw-content);animation:shine-pulse var(--shine-pulse-duration) infinite linear}}.dark\:border-teal-700\/50:is(.dark *){border-color:rgba(15,118,110,.5)}.dark\:border-teal-800:is(.dark *){--tw-border-opacity:1;border-color:rgb(17 94 89/var(--tw-border-opacity,1))}.dark\:border-teal-800\/60:is(.dark *){border-color:rgba(17,94,89,.6)}.dark\:border-teal-900:is(.dark *){--tw-border-opacity:1;border-color:rgb(19 78 74/var(--tw-border-opacity,1))}.dark\:bg-cyan-500\/20:is(.dark *){background-color:rgba(6,182,212,.2)}.dark\:bg-teal-500\/20:is(.dark *){background-color:rgba(20,184,166,.2)}.dark\:bg-teal-900\/30:is(.dark *){background-color:rgba(19,78,74,.3)}.dark\:bg-teal-900\/50:is(.dark *){background-color:rgba(19,78,74,.5)}.dark\:bg-teal-950:is(.dark *){--tw-bg-opacity:1;background-color:rgb(4 47 46/var(--tw-bg-opacity,1))}.dark\:bg-teal-950\/60:is(.dark *){background-color:rgba(4,47,46,.6)}.dark\:bg-zinc-600:is(.dark *){--tw-bg-opacity:1;background-color:rgb(82 82 91/var(--tw-bg-opacity,1))}.dark\:bg-zinc-800:is(.dark *){--tw-bg-opacity:1;background-color:rgb(39 39 42/var(--tw-bg-opacity,1))}.dark\:from-teal-900\/20:is(.dark *){--tw-gradient-from:rgba(19,78,74,.2) var(--tw-gradient-from-position);--tw-gradient-to:rgba(19,78,74,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-teal-950\/70:is(.dark *){--tw-gradient-from:rgba(4,47,46,.7) var(--tw-gradient-from-position);--tw-gradient-to:rgba(4,47,46,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:from-teal-950\/80:is(.dark *){--tw-gradient-from:rgba(4,47,46,.8) var(--tw-gradient-from-position);--tw-gradient-to:rgba(4,47,46,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.dark\:via-zinc-950:is(.dark *){--tw-gradient-to:rgba(9,9,11,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#09090b var(--tw-gradient-via-position),var(--tw-gradient-to)}.dark\:to-cyan-950\/60:is(.dark *){--tw-gradient-to:rgba(8,51,68,.6) var(--tw-gradient-to-position)}.dark\:to-zinc-900:is(.dark *){--tw-gradient-to:#18181b var(--tw-gradient-to-position)}.dark\:to-zinc-950:is(.dark *){--tw-gradient-to:#09090b var(--tw-gradient-to-position)}.dark\:fill-zinc-800:is(.dark *){fill:#27272a}.dark\:stroke-zinc-700:is(.dark *){stroke:#3f3f46}.dark\:text-teal-200:is(.dark *){--tw-text-opacity:1;color:rgb(153 246 228/var(--tw-text-opacity,1))}.dark\:text-teal-300:is(.dark *){--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.dark\:text-teal-400:is(.dark *){--tw-text-opacity:1;color:rgb(45 212 191/var(--tw-text-opacity,1))}.dark\:text-white:is(.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:text-zinc-100:is(.dark *){--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.dark\:text-zinc-200:is(.dark *){--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.dark\:text-zinc-300:is(.dark *){--tw-text-opacity:1;color:rgb(212 212 216/var(--tw-text-opacity,1))}.dark\:text-zinc-400:is(.dark *){--tw-text-opacity:1;color:rgb(161 161 170/var(--tw-text-opacity,1))}.dark\:text-zinc-500:is(.dark *){--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:text-zinc-600:is(.dark *){--tw-text-opacity:1;color:rgb(82 82 91/var(--tw-text-opacity,1))}.dark\:placeholder\:text-zinc-500:is(.dark *)::-moz-placeholder{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:placeholder\:text-zinc-500:is(.dark *)::placeholder{--tw-text-opacity:1;color:rgb(113 113 122/var(--tw-text-opacity,1))}.dark\:focus-within\:border-teal-700:focus-within:is(.dark *){--tw-border-opacity:1;border-color:rgb(15 118 110/var(--tw-border-opacity,1))}.dark\:hover\:border-teal-700:hover:is(.dark *){--tw-border-opacity:1;border-color:rgb(15 118 110/var(--tw-border-opacity,1))}.dark\:hover\:bg-teal-950\/60:hover:is(.dark *){background-color:rgba(4,47,46,.6)}.dark\:hover\:text-teal-300:hover:is(.dark *){--tw-text-opacity:1;color:rgb(94 234 212/var(--tw-text-opacity,1))}.dark\:hover\:text-zinc-100:hover:is(.dark *){--tw-text-opacity:1;color:rgb(244 244 245/var(--tw-text-opacity,1))}.dark\:hover\:text-zinc-200:hover:is(.dark *){--tw-text-opacity:1;color:rgb(228 228 231/var(--tw-text-opacity,1))}.dark\:disabled\:bg-zinc-700:disabled:is(.dark *){--tw-bg-opacity:1;background-color:rgb(63 63 70/var(--tw-bg-opacity,1))}.group:hover .dark\:group-hover\:text-teal-400:is(.dark *){--tw-text-opacity:1;color:rgb(45 212 191/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:mb-12{margin-bottom:3rem}.sm\:block{display:block}.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:p-10{padding:2.5rem}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-16{padding-top:4rem;padding-bottom:4rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:block{display:block}.md\:h-24{height:6rem}.md\:min-w-\[340px\]{min-width:340px}.md\:flex-initial{flex:0 1 auto}.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\:p-12{padding:3rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:w-12{width:3rem}.lg\:translate-x-0{--tw-translate-x:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.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\:flex-row{flex-direction:row}.lg\:items-end{align-items:flex-end}.lg\:items-center{align-items:center}.lg\:justify-between{justify-content:space-between}.lg\:text-right{text-align:right}.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}.lg\:text-\[6rem\]{font-size:6rem}}@media (min-width:1280px){.xl\:flex{display:flex}}@media (min-width:1536px){.\32xl\:w-96{width:24rem}}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@m13v/seo-components",
-  "version": "0.19.1",
+  "version": "0.20.1",
   "scripts": {
     "build:css": "tailwind -i src/_build.css -o dist/styles.css --minify",
     "bump:consumers": "bash scripts/bump-consumers.sh",

package/src/components/AnimatedBeam.tsx CHANGED Viewed

@@ -51,7 +51,7 @@ export function AnimatedBeam({
   return (
     <div
-      className={`my-10 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 ${className}`}
+      className={`my-10 rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] p-6 ${className}`}
     >
       {title && (
         <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-4">{title}</h3>

package/src/components/AnimatedChecklist.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ interface AnimatedChecklistProps {
 export function AnimatedChecklist({ title, items }: AnimatedChecklistProps) {
   return (
     <motion.div
-      className="my-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6"
+      className="my-8 rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] p-6"
       initial={{ opacity: 0, y: 12 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
@@ -42,7 +42,7 @@ export function AnimatedChecklist({ title, items }: AnimatedChecklistProps) {
               className={`mt-0.5 flex items-center justify-center w-5 h-5 rounded-md border shrink-0 ${
                 item.checked !== false
                   ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-500"
-                  : "border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400"
+                  : "border-[color-mix(in_srgb,currentColor_16%,transparent)] bg-[color-mix(in_srgb,currentColor_6%,transparent)] text-zinc-500 dark:text-zinc-400"
               }`}
               initial={{ scale: 0 }}
               whileInView={{ scale: 1 }}

package/src/components/AnimatedDemo.tsx CHANGED Viewed

@@ -82,7 +82,7 @@ export function AnimatedDemo({
       </div>
       {/* Demo screen */}
-      <div className="rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-zinc-950 overflow-hidden shadow-lg">
+      <div className="rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-zinc-950 overflow-hidden shadow-lg">
         {/* Title bar */}
         <div className="flex items-center gap-1.5 px-4 py-2.5 bg-zinc-900 border-b border-zinc-800">
           <div className="w-2.5 h-2.5 rounded-full bg-red-400/80" />
@@ -166,7 +166,7 @@ export function AnimatedDemo({
           transition={{ duration: 0.3 }}
           className="mt-4"
         >
-          <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-950 overflow-hidden">
+          <div className="rounded-xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-zinc-950 overflow-hidden">
             <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-800">
               <span className="text-[11px] text-zinc-500 font-mono">
                 {codeLanguage}

package/src/components/BackgroundGrid.tsx CHANGED Viewed

@@ -31,7 +31,7 @@ export function BackgroundGrid({
   return (
     <div
-      className={`relative overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-800 my-10 ${className}`}
+      className={`relative overflow-hidden rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] my-10 ${className}`}
     >
       <div
         className="absolute inset-0 pointer-events-none"

package/src/components/BeforeAfter.tsx CHANGED Viewed

@@ -31,12 +31,12 @@ export function BeforeAfter({
       )}
       {/* Toggle */}
-      <div className="flex items-center gap-1 mb-4 bg-zinc-100 dark:bg-zinc-900 rounded-lg p-1 w-fit">
+      <div className="flex items-center gap-1 mb-4 bg-[color-mix(in_srgb,currentColor_6%,transparent)] rounded-lg p-1 w-fit">
         <button
           onClick={() => setShowAfter(false)}
           className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
             !showAfter
-              ? "bg-white dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 shadow-sm"
+              ? "bg-[color-mix(in_srgb,currentColor_6%,transparent)] text-zinc-900 dark:text-zinc-100 shadow-sm"
               : "text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"
           }`}
         >
@@ -55,7 +55,7 @@ export function BeforeAfter({
       </div>
       {/* Content panel */}
-      <div className="relative rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-950/50 overflow-hidden min-h-[200px]">
+      <div className="relative rounded-xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)] overflow-hidden min-h-[200px]">
         <AnimatePresence mode="wait">
           {!showAfter ? (
             <motion.div

package/src/components/BentoGrid.tsx CHANGED Viewed

@@ -43,7 +43,7 @@ export function BentoGrid({ cards, className = "" }: BentoGridProps) {
           className={`${SIZE_CLASSES[card.size || "1x1"]} rounded-2xl border ${
             card.accent
               ? "border-teal-200 dark:border-teal-800 bg-gradient-to-br from-teal-50 dark:from-teal-900/20 to-cyan-50"
-              : "border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/50"
+              : "border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)]"
           } p-6 flex flex-col justify-between group hover:border-teal-300 hover:shadow-md transition-all duration-300`}
         >
           <div>

package/src/components/BookCallCTA.tsx CHANGED Viewed

@@ -241,7 +241,7 @@ function StickyBookCall({
           animate={{ y: 0 }}
           exit={{ y: "100%" }}
           transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
-          className="fixed bottom-0 left-0 right-0 z-40 border-t border-zinc-200 dark:border-zinc-800 backdrop-blur-xl py-3 px-6"
+          className="fixed bottom-0 left-0 right-0 z-40 border-t border-[color-mix(in_srgb,currentColor_14%,transparent)] backdrop-blur-xl py-3 px-6"
           style={{ backgroundColor: "var(--mobile-bg)" }}
         >
           <div className="mx-auto max-w-7xl flex items-center justify-between">

package/src/components/ClaudeMeterCta.tsx ADDED Viewed

@@ -0,0 +1,203 @@
+"use client";
+import { motion } from "framer-motion";
+import { trackGetStartedClick } from "../lib/track";
+export interface ClaudeMeterCtaProps {
+  /** Placement tag, kept in analytics payload. */
+  placement?: "top" | "bottom" | "inline";
+  /** Override the destination URL. Defaults to the install page. */
+  href?: string;
+  /** Site slug for canonical analytics (e.g. "fazm"). */
+  site?: string;
+  /** Section label for canonical analytics. */
+  section?: string;
+}
+const FEATURES = [
+  "Rolling 5-hour window",
+  "Weekly quota %",
+  "Extra-usage $ balance",
+  "Free · MIT · no telemetry",
+];
+export function ClaudeMeterCta({
+  placement = "inline",
+  href = "https://claude-meter.com/install",
+  site,
+  section,
+}: ClaudeMeterCtaProps) {
+  const sectionLabel = section ?? `claude-meter-cta-${placement}`;
+  const handleClick = () => {
+    trackGetStartedClick({
+      destination: href,
+      site,
+      section: sectionLabel,
+      text: "Install Claude Meter",
+      component: "ClaudeMeterCta",
+      extra: { placement },
+    });
+  };
+  return (
+    <motion.aside
+      className="not-prose my-10 mx-auto w-full max-w-4xl"
+      initial={{ opacity: 0, y: 24 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true, margin: "0px 0px -80px 0px" }}
+      transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
+      aria-label="Claude Meter promotion"
+    >
+      <div className="relative overflow-hidden rounded-3xl border border-teal-200/70 dark:border-teal-700/50 bg-gradient-to-br from-teal-50 via-white to-cyan-50 dark:from-teal-950/80 dark:via-zinc-950 dark:to-cyan-950/60 p-6 sm:p-10 shadow-xl">
+        <ShimmerBorder />
+        <GlowBlob className="-top-24 -left-16 bg-teal-400/40 dark:bg-teal-500/20" />
+        <GlowBlob
+          className="-bottom-24 -right-16 bg-cyan-400/40 dark:bg-cyan-500/20"
+          delay={1.2}
+        />
+        <div className="relative flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 mb-4">
+              <LiveDot />
+              <span className="text-xs font-semibold uppercase tracking-wider text-teal-700 dark:text-teal-300">
+                Claude Meter
+              </span>
+            </div>
+            <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tight text-zinc-900 dark:text-white leading-tight mb-3">
+              Stop guessing when your Claude limit resets.
+            </h2>
+            <p className="text-base sm:text-lg text-zinc-600 dark:text-zinc-300 leading-relaxed mb-6 max-w-2xl">
+              A free macOS menu bar app and browser extension that shows your{" "}
+              <strong className="text-zinc-900 dark:text-white">
+                live Claude Pro and Max usage
+              </strong>
+              : rolling 5-hour window, weekly quota percent, and extra-usage
+              dollar balance. Same server-truth numbers as{" "}
+              <code className="text-sm px-1.5 py-0.5 rounded bg-teal-100/70 dark:bg-teal-900/50 text-teal-800 dark:text-teal-200">
+                claude.ai/settings/usage
+              </code>
+              , matched exactly.
+            </p>
+            <ul className="flex flex-wrap gap-2 mb-0">
+              {FEATURES.map((f) => (
+                <li
+                  key={f}
+                  className="text-xs font-medium px-3 py-1.5 rounded-full bg-[color-mix(in_srgb,currentColor_4%,transparent)] border border-teal-200/70 dark:border-teal-800/60 text-zinc-700 dark:text-zinc-200"
+                >
+                  {f}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="flex flex-col items-start lg:items-end gap-3 shrink-0">
+            <motion.a
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={handleClick}
+              whileHover={{ y: -2, scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              transition={{ duration: 0.15 }}
+              className="relative inline-flex items-center justify-center gap-2.5 px-7 py-4 rounded-2xl bg-gradient-to-br from-teal-500 to-cyan-600 text-white text-base sm:text-lg font-semibold shadow-lg shadow-teal-500/30 hover:shadow-xl hover:shadow-teal-500/40 transition-shadow overflow-hidden"
+            >
+              <ButtonShimmer />
+              <span className="relative z-10">Install Claude Meter</span>
+              <ArrowGlyph />
+            </motion.a>
+            <p className="text-xs text-zinc-500 dark:text-zinc-400 lg:text-right">
+              macOS 12+ · Chrome, Arc, Brave, Edge
+            </p>
+          </div>
+        </div>
+      </div>
+    </motion.aside>
+  );
+}
+function ShimmerBorder() {
+  return (
+    <motion.div
+      aria-hidden="true"
+      className="pointer-events-none absolute inset-0 rounded-3xl"
+      style={{
+        background:
+          "linear-gradient(120deg, transparent 30%, rgba(45, 212, 191, 0.35) 50%, transparent 70%)",
+        backgroundSize: "200% 200%",
+      }}
+      animate={{ backgroundPosition: ["0% 0%", "100% 100%"] }}
+      transition={{ duration: 6, repeat: Infinity, ease: "linear" }}
+    />
+  );
+}
+function GlowBlob({
+  className,
+  delay = 0,
+}: {
+  className: string;
+  delay?: number;
+}) {
+  return (
+    <motion.div
+      aria-hidden="true"
+      className={`pointer-events-none absolute h-64 w-64 rounded-full blur-3xl ${className}`}
+      animate={{ scale: [1, 1.15, 1], opacity: [0.6, 0.9, 0.6] }}
+      transition={{ duration: 4, repeat: Infinity, delay, ease: "easeInOut" }}
+    />
+  );
+}
+function LiveDot() {
+  return (
+    <span className="relative inline-flex h-2 w-2">
+      <motion.span
+        className="absolute inline-flex h-full w-full rounded-full bg-teal-400"
+        animate={{ scale: [1, 2.2, 1], opacity: [0.7, 0, 0.7] }}
+        transition={{ duration: 1.8, repeat: Infinity, ease: "easeOut" }}
+      />
+      <span className="relative inline-flex h-2 w-2 rounded-full bg-teal-500" />
+    </span>
+  );
+}
+function ButtonShimmer() {
+  return (
+    <motion.span
+      aria-hidden="true"
+      className="absolute inset-0"
+      style={{
+        background:
+          "linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%)",
+        backgroundSize: "250% 100%",
+      }}
+      animate={{ backgroundPosition: ["200% 0%", "-50% 0%"] }}
+      transition={{ duration: 2.4, repeat: Infinity, ease: "linear" }}
+    />
+  );
+}
+function ArrowGlyph() {
+  return (
+    <svg
+      aria-hidden="true"
+      className="relative z-10"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M5 12h14" />
+      <path d="m12 5 7 7-7 7" />
+    </svg>
+  );
+}

package/src/components/CodeComparison.tsx CHANGED Viewed

@@ -29,17 +29,17 @@ export function CodeComparison({
   return (
     <motion.div
-      className="my-8 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-hidden"
+      className="my-8 rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] overflow-hidden"
       initial={{ opacity: 0, y: 12 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}
       transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
     >
-      <div className="flex items-center justify-between px-5 py-3 border-b border-zinc-200 dark:border-zinc-800 bg-white/50">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)]">
         {title && (
           <p className="text-xs font-mono uppercase tracking-widest text-emerald-500">{title}</p>
         )}
-        <div className="flex gap-1 rounded-lg bg-white dark:bg-zinc-900 p-0.5 border border-zinc-200 dark:border-zinc-800">
+        <div className="flex gap-1 rounded-lg bg-[color-mix(in_srgb,currentColor_4%,transparent)] p-0.5 border border-[color-mix(in_srgb,currentColor_14%,transparent)]">
           <button
             onClick={() => setTab("left")}
             className={`text-[11px] font-medium px-3 py-1 rounded-md transition-colors ${
@@ -91,7 +91,7 @@ export function CodeComparison({
         </AnimatePresence>
       </div>
-      <div className="px-5 py-3 border-t border-zinc-200 dark:border-zinc-800 bg-white/50 flex items-center gap-3">
+      <div className="px-5 py-3 border-t border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)] flex items-center gap-3">
         <motion.div
           className="h-1.5 rounded-full bg-emerald-500/20 flex-1 overflow-hidden"
           initial={{ opacity: 0 }}

package/src/components/ComparisonTable.tsx CHANGED Viewed

@@ -35,10 +35,10 @@ export function ComparisonTable({
           {intro}
         </p>
       )}
-      <div className="rounded-2xl bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+      <div className="rounded-2xl bg-[color-mix(in_srgb,currentColor_3%,transparent)] border border-[color-mix(in_srgb,currentColor_14%,transparent)] overflow-hidden">
         <table className="w-full text-left">
           <thead>
-            <tr className="border-b border-zinc-200 dark:border-zinc-800">
+            <tr className="border-b border-[color-mix(in_srgb,currentColor_14%,transparent)]">
               <th className="px-5 py-4 text-zinc-500 dark:text-zinc-400 text-sm font-medium">Feature</th>
               <th className="px-5 py-4 text-zinc-500 dark:text-zinc-400 text-sm font-medium">{competitorName}</th>
               <th className="px-5 py-4 text-teal-600 dark:text-teal-400 text-sm font-medium">{productName}</th>
@@ -48,7 +48,7 @@ export function ComparisonTable({
             {rows.map((row, i) => (
               <tr
                 key={i}
-                className={i < rows.length - 1 ? "border-b border-zinc-200 dark:border-zinc-800" : ""}
+                className={i < rows.length - 1 ? "border-b border-[color-mix(in_srgb,currentColor_14%,transparent)]" : ""}
               >
                 <td className="px-5 py-3 text-zinc-900 dark:text-zinc-100 text-sm font-medium">{row.feature}</td>
                 <td className="px-5 py-3 text-zinc-500 dark:text-zinc-400 text-sm">{row.competitor}</td>

package/src/components/FaqSection.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ export function FaqSection({
         {items.map((faq) => (
           <details
             key={faq.q}
-            className="group p-5 rounded-xl bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800"
+            className="group p-5 rounded-xl bg-[color-mix(in_srgb,currentColor_3%,transparent)] border border-[color-mix(in_srgb,currentColor_14%,transparent)]"
           >
             <summary className="text-zinc-900 dark:text-zinc-100 font-semibold cursor-pointer list-none flex items-center justify-between gap-4">
               <span>{faq.q}</span>

package/src/components/FlowDiagram.tsx CHANGED Viewed

@@ -28,7 +28,7 @@ const icons: Record<string, string> = {
 export function FlowDiagram({ title, steps }: FlowDiagramProps) {
   return (
-    <div className="my-10 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 overflow-x-auto">
+    <div className="my-10 rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] p-6 overflow-x-auto">
       <p className="text-xs font-mono uppercase tracking-widest text-emerald-500 mb-5">
         {title}
       </p>
@@ -47,7 +47,7 @@ export function FlowDiagram({ title, steps }: FlowDiagramProps) {
             }}
           >
             <div className="flex flex-col items-center flex-1 min-w-0 max-w-[180px]">
-              <div className="w-11 h-11 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 flex items-center justify-center text-lg mb-2">
+              <div className="w-11 h-11 rounded-xl bg-[color-mix(in_srgb,currentColor_4%,transparent)] border border-[color-mix(in_srgb,currentColor_14%,transparent)] flex items-center justify-center text-lg mb-2">
                 {step.icon ? icons[step.icon] || "\u2022" : `${i + 1}`}
               </div>
               <p className="text-xs font-medium text-zinc-900 dark:text-zinc-100 text-center leading-tight">

package/src/components/GetStartedCTA.tsx CHANGED Viewed

@@ -244,7 +244,7 @@ function StickyGetStarted({
           animate={{ y: 0 }}
           exit={{ y: "100%" }}
           transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
-          className="fixed bottom-0 left-0 right-0 z-40 border-t border-zinc-200 dark:border-zinc-800 backdrop-blur-xl py-3 px-6"
+          className="fixed bottom-0 left-0 right-0 z-40 border-t border-[color-mix(in_srgb,currentColor_14%,transparent)] backdrop-blur-xl py-3 px-6"
           style={{ backgroundColor: "var(--mobile-bg)" }}
         >
           <div className="mx-auto max-w-7xl flex items-center justify-between">

package/src/components/GlowCard.tsx CHANGED Viewed

@@ -38,7 +38,7 @@ export function GlowCard({
       onMouseMove={handleMouseMove}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      className={`relative rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-hidden transition-shadow duration-300 ${
+      className={`relative rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] overflow-hidden transition-shadow duration-300 ${
         isHovered ? "shadow-lg border-teal-200 dark:border-teal-800" : ""
       } ${className}`}
     >

package/src/components/GuideChatPanel.tsx CHANGED Viewed

@@ -369,19 +369,19 @@ export function GuideChatPanel({
   if (health === "probing") {
     return (
       <aside
-        className="hidden xl:flex flex-col sticky top-0 h-screen shrink-0 w-80 2xl:w-96 bg-white dark:bg-zinc-950 border-l border-zinc-200 dark:border-zinc-800"
+        className="hidden xl:flex flex-col sticky top-0 h-screen shrink-0 w-80 2xl:w-96 border-l border-[color-mix(in_srgb,currentColor_14%,transparent)]"
         aria-hidden="true"
       />
     );
   }
   return (
-    <aside className={`hidden xl:flex flex-col sticky top-0 h-screen shrink-0 ${collapsed ? "w-12" : "w-80 2xl:w-96"} bg-white dark:bg-zinc-950 border-l border-zinc-200 dark:border-zinc-800 transition-all duration-200 ease-out overflow-hidden`}>
+    <aside className={`hidden xl:flex flex-col sticky top-0 h-screen shrink-0 ${collapsed ? "w-12" : "w-80 2xl:w-96"} border-l border-[color-mix(in_srgb,currentColor_14%,transparent)] transition-all duration-200 ease-out overflow-hidden`}>
       {collapsed ? (
         <div className="flex flex-col items-center pt-3 h-full">
           <button
             onClick={toggleCollapse}
-            className="p-2 rounded-md text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+            className="p-2 rounded-md text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-[color-mix(in_srgb,currentColor_8%,transparent)] transition-colors"
             aria-label="Expand page assistant"
           >
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -392,14 +392,14 @@ export function GuideChatPanel({
         </div>
       ) : (
         <>
-          <div className="flex items-center gap-2 px-4 py-3 border-b border-zinc-100 dark:border-zinc-800">
+          <div className="flex items-center gap-2 px-4 py-3 border-b border-[color-mix(in_srgb,currentColor_10%,transparent)]">
             <span className="w-1.5 h-1.5 rounded-full bg-teal-500 inline-block" />
             <span className="font-mono text-xs tracking-tight text-zinc-900 dark:text-zinc-100">
               {label}
             </span>
             <button
               onClick={toggleCollapse}
-              className="ml-auto p-1.5 rounded-md text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
+              className="ml-auto p-1.5 rounded-md text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-[color-mix(in_srgb,currentColor_8%,transparent)] transition-colors"
               aria-label="Collapse page assistant"
             >
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -451,7 +451,7 @@ function ChatThread({
             <TypingIndicator />
           </ThreadPrimitive.If>
         </ThreadPrimitive.Viewport>
-        <div className="px-3 py-3 border-t border-zinc-100 dark:border-zinc-900">
+        <div className="px-3 py-3 border-t border-[color-mix(in_srgb,currentColor_10%,transparent)]">
           <Composer />
         </div>
       </ThreadPrimitive.Root>
@@ -473,12 +473,12 @@ function SummarySection({
   if (summary.loading) {
     return (
       <div className="mb-4 space-y-2 animate-pulse">
-        <div className="h-3 bg-zinc-100 dark:bg-zinc-800 rounded w-3/4" />
-        <div className="h-3 bg-zinc-100 dark:bg-zinc-800 rounded w-full" />
-        <div className="h-3 bg-zinc-100 dark:bg-zinc-800 rounded w-5/6" />
-        <div className="mt-3 h-8 bg-zinc-50 dark:bg-zinc-900 rounded w-full" />
-        <div className="h-8 bg-zinc-50 dark:bg-zinc-900 rounded w-full" />
-        <div className="h-8 bg-zinc-50 dark:bg-zinc-900 rounded w-full" />
+        <div className="h-3 bg-[color-mix(in_srgb,currentColor_8%,transparent)] rounded w-3/4" />
+        <div className="h-3 bg-[color-mix(in_srgb,currentColor_8%,transparent)] rounded w-full" />
+        <div className="h-3 bg-[color-mix(in_srgb,currentColor_8%,transparent)] rounded w-5/6" />
+        <div className="mt-3 h-8 bg-[color-mix(in_srgb,currentColor_4%,transparent)] rounded w-full" />
+        <div className="h-8 bg-[color-mix(in_srgb,currentColor_4%,transparent)] rounded w-full" />
+        <div className="h-8 bg-[color-mix(in_srgb,currentColor_4%,transparent)] rounded w-full" />
       </div>
     );
   }
@@ -487,7 +487,7 @@ function SummarySection({
   return (
     <div className="mb-4 space-y-3">
-      <div className="rounded-lg px-3 py-2.5 bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 text-[13px] text-zinc-900 dark:text-zinc-100 font-mono leading-relaxed whitespace-pre-wrap">
+      <div className="rounded-lg px-3 py-2.5 bg-[color-mix(in_srgb,currentColor_4%,transparent)] border border-[color-mix(in_srgb,currentColor_10%,transparent)] text-[13px] text-zinc-900 dark:text-zinc-100 font-mono leading-relaxed whitespace-pre-wrap">
         {summary.text}
       </div>
       {summary.questions.length > 0 && (
@@ -535,7 +535,7 @@ function QuestionChips({
         <button
           key={i}
           onClick={() => send(q, i)}
-          className="w-full text-left px-3 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-teal-300 dark:hover:border-teal-700 hover:text-teal-700 dark:hover:text-teal-300 transition-colors text-[12px] font-mono text-zinc-600 dark:text-zinc-400 leading-snug"
+          className="w-full text-left px-3 py-2 rounded-lg border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)] hover:border-teal-300 dark:hover:border-teal-700 hover:text-teal-700 dark:hover:text-teal-300 transition-colors text-[12px] font-mono text-zinc-600 dark:text-zinc-400 leading-snug"
         >
           {q}
         </button>
@@ -561,7 +561,7 @@ function UserMessage() {
 function AssistantMessage() {
   return (
     <MessagePrimitive.Root className="mb-3 flex justify-start">
-      <div className="max-w-[90%] rounded-lg px-3 py-2 bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 text-[13px] text-zinc-900 dark:text-zinc-100 font-mono leading-relaxed whitespace-pre-wrap">
+      <div className="max-w-[90%] rounded-lg px-3 py-2 bg-[color-mix(in_srgb,currentColor_4%,transparent)] border border-[color-mix(in_srgb,currentColor_10%,transparent)] text-[13px] text-zinc-900 dark:text-zinc-100 font-mono leading-relaxed whitespace-pre-wrap">
         <MessagePrimitive.Parts />
       </div>
     </MessagePrimitive.Root>
@@ -571,7 +571,7 @@ function AssistantMessage() {
 function TypingIndicator() {
   return (
     <div className="mb-3 flex justify-start">
-      <div className="rounded-lg px-3 py-2 bg-zinc-50 dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 text-[13px] text-zinc-400 dark:text-zinc-600 font-mono">
+      <div className="rounded-lg px-3 py-2 bg-[color-mix(in_srgb,currentColor_4%,transparent)] border border-[color-mix(in_srgb,currentColor_10%,transparent)] text-[13px] text-zinc-400 dark:text-zinc-600 font-mono">
         <span className="inline-flex gap-1">
           <span className="w-1 h-1 bg-zinc-400 dark:bg-zinc-600 rounded-full animate-pulse" />
           <span className="w-1 h-1 bg-zinc-400 dark:bg-zinc-600 rounded-full animate-pulse [animation-delay:150ms]" />
@@ -584,7 +584,7 @@ function TypingIndicator() {
 function Composer() {
   return (
-    <ComposerPrimitive.Root className="flex items-end gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 focus-within:border-teal-300 dark:focus-within:border-teal-700 focus-within:ring-2 focus-within:ring-teal-500/20 transition">
+    <ComposerPrimitive.Root className="flex items-end gap-2 rounded-lg border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)] focus-within:border-teal-300 dark:focus-within:border-teal-700 focus-within:ring-2 focus-within:ring-teal-500/20 transition">
       <ComposerPrimitive.Input
         placeholder="ask a question..."
         className="flex-1 bg-transparent px-3 py-2 text-[13px] font-mono text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none resize-none max-h-32"

package/src/components/HorizontalStepper.tsx CHANGED Viewed

@@ -55,8 +55,8 @@ export function HorizontalStepper({
                     done
                       ? "border-teal-400 bg-teal-400 text-white"
                       : active
-                      ? "border-teal-400 bg-white text-teal-600 dark:bg-zinc-900 dark:text-teal-400"
-                      : "border-zinc-300 bg-zinc-100 text-zinc-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-500"
+                      ? "border-teal-400 bg-[color-mix(in_srgb,currentColor_4%,transparent)] text-teal-600 dark:text-teal-400"
+                      : "border-[color-mix(in_srgb,currentColor_20%,transparent)] bg-[color-mix(in_srgb,currentColor_6%,transparent)] text-zinc-500 dark:text-zinc-500"
                   }`}
                 >
                   {done ? (

package/src/components/HtmlSitemap.tsx CHANGED Viewed

@@ -121,7 +121,7 @@ export function HtmlSitemap({
                 <li key={page.href} className="min-w-0">
                   <a
                     href={page.href}
-                    className="group block py-2 border-b border-zinc-100 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors"
+                    className="group block py-2 border-b border-[color-mix(in_srgb,currentColor_10%,transparent)] hover:border-[color-mix(in_srgb,currentColor_18%,transparent)] transition-colors"
                   >
                     <div className="text-sm font-medium text-zinc-900 dark:text-zinc-100 group-hover:opacity-70 transition-opacity line-clamp-2">
                       {page.title}
@@ -154,7 +154,7 @@ export function HtmlSitemap({
               <li key={link.href} className="min-w-0">
                 <a
                   href={link.href}
-                  className="group block py-2 border-b border-zinc-100 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-700 transition-colors"
+                  className="group block py-2 border-b border-[color-mix(in_srgb,currentColor_10%,transparent)] hover:border-[color-mix(in_srgb,currentColor_18%,transparent)] transition-colors"
                 >
                   <div className="text-sm font-medium text-zinc-900 dark:text-zinc-100 group-hover:opacity-70 transition-opacity">
                     {link.title}
@@ -171,7 +171,7 @@ export function HtmlSitemap({
         </section>
       )}
-      <footer className="mt-16 pt-6 border-t border-zinc-100 dark:border-zinc-800">
+      <footer className="mt-16 pt-6 border-t border-[color-mix(in_srgb,currentColor_10%,transparent)]">
         <p className="text-xs text-zinc-500 dark:text-zinc-400">
           Machine-readable version:{" "}
           <a

package/src/components/InlineTestimonial.tsx CHANGED Viewed

@@ -33,7 +33,7 @@ export function InlineTestimonial({
 }: InlineTestimonialProps) {
   return (
     <figure
-      className={`p-6 sm:p-8 rounded-2xl bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800 ${className}`}
+      className={`p-6 sm:p-8 rounded-2xl bg-[color-mix(in_srgb,currentColor_3%,transparent)] border border-[color-mix(in_srgb,currentColor_14%,transparent)] ${className}`}
     >
       <Stars count={stars} />
       <blockquote className="mt-4 text-lg sm:text-xl leading-relaxed text-zinc-800 dark:text-zinc-200">

package/src/components/IntegrationsGrid.tsx CHANGED Viewed

@@ -70,7 +70,7 @@ export function IntegrationsGrid({
             >
               <Wrapper
                 {...wrapperProps}
-                className="group flex items-center gap-3 rounded-xl border border-zinc-200 bg-zinc-50 p-4 transition-all hover:border-teal-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/50"
+                className="group flex items-center gap-3 rounded-xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)] p-4 transition-all hover:border-teal-300 hover:shadow-md"
               >
                 {it.logoUrl ? (
                   <img

package/src/components/LottiePlayer.tsx CHANGED Viewed

@@ -44,7 +44,7 @@ export function LottiePlayer({
   if (!data) {
     return (
       <div
-        className={`my-6 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 ${className}`}
+        className={`my-6 rounded-xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] ${className}`}
         style={{ height, width }}
       />
     );

package/src/components/MetricsRow.tsx CHANGED Viewed

@@ -18,7 +18,7 @@ interface MetricsRowProps {
 export function MetricsRow({ metrics }: MetricsRowProps) {
   return (
     <motion.div
-      className="my-10 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 grid grid-cols-2 md:grid-cols-4 divide-x divide-zinc-200 dark:divide-zinc-800"
+      className="my-10 rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] grid grid-cols-2 md:grid-cols-4 divide-x divide-[color-mix(in_srgb,currentColor_14%,transparent)]"
       initial={{ opacity: 0, y: 12 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}

package/src/components/MotionSequence.tsx CHANGED Viewed

@@ -68,10 +68,10 @@ export function MotionSequence({
   return (
     <div
       ref={containerRef}
-      className={`my-10 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 overflow-hidden ${className}`}
+      className={`my-10 rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] overflow-hidden ${className}`}
     >
       {title && (
-        <div className="border-b border-zinc-100 dark:border-zinc-900 px-6 py-4 flex items-center justify-between">
+        <div className="border-b border-[color-mix(in_srgb,currentColor_10%,transparent)] px-6 py-4 flex items-center justify-between">
           <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{title}</h3>
           <div className="flex items-center gap-2">
             <div className="flex gap-1">

package/src/components/NewsletterSignup.tsx CHANGED Viewed

@@ -83,7 +83,7 @@ export function NewsletterSignup({
           animate={{ y: 0 }}
           exit={{ y: "100%" }}
           transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
-          className="fixed bottom-0 left-0 right-0 z-40 border-t border-zinc-200 dark:border-zinc-800 backdrop-blur-xl py-3 px-4 sm:px-6 bg-white/90 dark:bg-zinc-900/90"
+          className="fixed bottom-0 left-0 right-0 z-40 border-t border-[color-mix(in_srgb,currentColor_14%,transparent)] backdrop-blur-xl py-3 px-4 sm:px-6 bg-[color-mix(in_srgb,currentColor_4%,transparent)]"
         >
           <div className="mx-auto max-w-7xl flex items-center justify-between gap-3">
             {status === "success" ? (
@@ -105,7 +105,7 @@ export function NewsletterSignup({
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder={placeholder}
-                    className="flex-1 min-w-0 text-sm px-3 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-teal-500/40 focus:border-teal-500 transition-shadow"
+                    className="flex-1 min-w-0 text-sm px-3 py-2 rounded-lg border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-teal-500/40 focus:border-teal-500 transition-shadow"
                     disabled={status === "loading"}
                   />
                   <button

package/src/components/OrbitingCircles.tsx CHANGED Viewed

@@ -39,7 +39,7 @@ export function OrbitingCircles({
     >
       {/* Orbit ring */}
       <div
-        className="absolute rounded-full border border-dashed border-zinc-200 dark:border-zinc-800"
+        className="absolute rounded-full border border-dashed border-[color-mix(in_srgb,currentColor_14%,transparent)]"
         style={{ width: radius * 2, height: radius * 2 }}
       />
@@ -64,7 +64,7 @@ export function OrbitingCircles({
           return (
             <motion.div
               key={i}
-              className="absolute top-1/2 left-1/2 flex items-center justify-center rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 shadow-sm text-xs font-medium text-zinc-700 dark:text-zinc-300"
+              className="absolute top-1/2 left-1/2 flex items-center justify-center rounded-xl bg-[color-mix(in_srgb,currentColor_4%,transparent)] border border-[color-mix(in_srgb,currentColor_14%,transparent)] shadow-sm text-xs font-medium text-zinc-700 dark:text-zinc-300"
               style={{
                 width: 64,
                 height: 64,

package/src/components/ProofBanner.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ interface ProofBannerProps {
 export function ProofBanner({ quote, source, metric }: ProofBannerProps) {
   return (
     <motion.div
-      className="my-8 p-4 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 flex items-start gap-4"
+      className="my-8 p-4 rounded-xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] flex items-start gap-4"
       initial={{ opacity: 0, x: -16 }}
       whileInView={{ opacity: 1, x: 0 }}
       viewport={{ once: true }}

package/src/components/RelatedPostsGrid.tsx CHANGED Viewed

@@ -56,7 +56,7 @@ export function RelatedPostsGrid({
               whileInView={{ opacity: 1, y: 0 }}
               viewport={{ once: true, margin: "-40px" }}
               transition={{ duration: 0.45, ease: [0.16, 1, 0.3, 1], delay: i * 0.06 }}
-              className="group flex flex-col overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50 transition-all hover:border-teal-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/50"
+              className="group flex flex-col overflow-hidden rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)] transition-all hover:border-teal-300 hover:shadow-md"
             >
               <div className="h-28 bg-gradient-to-br from-teal-400/20 via-cyan-400/15 to-zinc-50 dark:to-zinc-900" />
               <div className="flex flex-1 flex-col gap-2 p-5">

package/src/components/RemotionClip.tsx CHANGED Viewed

@@ -240,7 +240,7 @@ export function RemotionClip({
 }: RemotionClipProps) {
   return (
     <div
-      className={`my-10 rounded-2xl overflow-hidden border border-zinc-200 dark:border-zinc-800 shadow-lg ${className}`}
+      className={`my-10 rounded-2xl overflow-hidden border border-[color-mix(in_srgb,currentColor_14%,transparent)] shadow-lg ${className}`}
       style={{ aspectRatio: `${width} / ${height}` }}
     >
       <Player

package/src/components/SeoPageComments.tsx CHANGED Viewed

@@ -164,7 +164,7 @@ export function SeoPageComments({
           </span>
         </h2>
         {!unlocked && (
-          <span className="inline-flex items-center rounded-full border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900/60 px-2.5 py-0.5 text-xs font-medium text-zinc-600 dark:text-zinc-400">
+          <span className="inline-flex items-center rounded-full border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)]/60 px-2.5 py-0.5 text-xs font-medium text-zinc-600 dark:text-zinc-400">
             {lockedMessage}
           </span>
         )}
@@ -186,7 +186,7 @@ export function SeoPageComments({
           placeholder={placeholder}
           rows={3}
           maxLength={4000}
-          className="w-full px-3 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:border-[var(--seo-accent,#14b8a6)]"
+          className="w-full px-3 py-2 rounded-lg border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:border-[var(--seo-accent,#14b8a6)]"
           style={{ outlineColor: "var(--seo-accent, #14b8a6)" }}
           disabled={status === "loading"}
         />
@@ -196,7 +196,7 @@ export function SeoPageComments({
             value={name}
             onChange={(e) => setName(e.target.value.slice(0, 80))}
             placeholder="Name (optional)"
-            className="flex-1 min-w-0 px-3 py-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2"
+            className="flex-1 min-w-0 px-3 py-2 rounded-lg border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2"
             disabled={status === "loading"}
           />
           <button
@@ -222,7 +222,7 @@ export function SeoPageComments({
               <div key={c.id}>
                 <CommentRow c={c} onReply={() => setReplyTo(c.id)} />
                 {(children[c.id] ?? []).length > 0 && (
-                  <div className="mt-3 ml-6 pl-4 border-l border-zinc-200 dark:border-zinc-800 space-y-4">
+                  <div className="mt-3 ml-6 pl-4 border-l border-[color-mix(in_srgb,currentColor_14%,transparent)] space-y-4">
                     {children[c.id].map((r) => (
                       <CommentRow key={r.id} c={r} />
                     ))}

package/src/components/SeoPageReactions.tsx CHANGED Viewed

@@ -105,7 +105,7 @@ export function SeoPageReactions({
               className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-sm transition-colors ${
                 active
                   ? "border-[var(--seo-accent,#14b8a6)] text-[var(--seo-accent,#14b8a6)] bg-[var(--seo-accent-light,rgba(20,184,166,0.08))]"
-                  : "border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50"
+                  : "border-[color-mix(in_srgb,currentColor_14%,transparent)] text-zinc-700 dark:text-zinc-300 hover:bg-[color-mix(in_srgb,currentColor_4%,transparent)]"
               }`}
               aria-pressed={active}
               aria-label={unlocked ? `${r.label}: ${counts[r.key]}` : r.label}

package/src/components/SequenceDiagram.tsx CHANGED Viewed

@@ -31,7 +31,7 @@ export function SequenceDiagram({ title, actors, messages }: SequenceDiagramProp
   return (
     <motion.div
-      className="my-10 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-6 overflow-x-auto"
+      className="my-10 rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_4%,transparent)] p-6 overflow-x-auto"
       initial={{ opacity: 0, y: 16 }}
       whileInView={{ opacity: 1, y: 0 }}
       viewport={{ once: true }}

package/src/components/ShineBorder.tsx CHANGED Viewed

@@ -48,7 +48,7 @@ export function ShineBorder({
 }: ShineBorderProps) {
   const resolvedColor = color ?? "var(--seo-accent, #14b8a6)";
   const outerBase =
-    "relative grid min-h-[60px] w-fit min-w-[300px] place-items-center bg-white dark:bg-zinc-900 p-3 text-zinc-900 dark:text-zinc-100";
+    "relative grid min-h-[60px] w-fit min-w-[300px] place-items-center bg-[color-mix(in_srgb,currentColor_4%,transparent)] p-3 text-zinc-900 dark:text-zinc-100";
   const outerClass = className
     ? `${outerBase} ${className}`
     : outerBase;

package/src/components/SitemapSidebar.tsx CHANGED Viewed

@@ -274,7 +274,7 @@ export function SitemapSidebar({
             )}
             <button
               onClick={toggleDesktopCollapse}
-              className="hidden lg:flex p-1.5 rounded-md text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors ml-auto"
+              className="hidden lg:flex p-1.5 rounded-md text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-[color-mix(in_srgb,currentColor_8%,transparent)] transition-colors ml-auto"
               aria-label="Collapse sidebar"
             >
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -302,7 +302,7 @@ export function SitemapSidebar({
               placeholder="Search pages..."
               value={query}
               onChange={(e) => setQuery(e.target.value)}
-              className="w-full pl-8 pr-3 py-2 text-sm border border-zinc-200 dark:border-zinc-800 rounded-lg bg-zinc-50 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:border-transparent transition"
+              className="w-full pl-8 pr-3 py-2 text-sm border border-[color-mix(in_srgb,currentColor_14%,transparent)] rounded-lg bg-[color-mix(in_srgb,currentColor_4%,transparent)] text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:border-transparent transition"
               style={
                 {
                   "--tw-ring-color":
@@ -339,7 +339,7 @@ export function SitemapSidebar({
                       className={`block px-3 py-2.5 rounded-lg transition-colors ${
                         isActive
                           ? "text-zinc-900 dark:text-zinc-100 font-medium"
-                          : "text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 hover:text-zinc-900 dark:hover:text-zinc-100"
+                          : "text-zinc-600 dark:text-zinc-300 hover:bg-[color-mix(in_srgb,currentColor_4%,transparent)] hover:text-zinc-900 dark:hover:text-zinc-100"
                       }`}
                       style={
                         isActive
@@ -363,7 +363,7 @@ export function SitemapSidebar({
                     {/* Subsections for the active page */}
                     {isActive && page.sections.length > 0 && (
-                      <ul className="mt-1 mb-2 ml-3 border-l border-zinc-200 dark:border-zinc-800 space-y-0.5">
+                      <ul className="mt-1 mb-2 ml-3 border-l border-[color-mix(in_srgb,currentColor_14%,transparent)] space-y-0.5">
                         {page.sections.map((section) => {
                           const isSectionActive =
                             activeSection === section.id;
@@ -377,7 +377,7 @@ export function SitemapSidebar({
                                 className={`block pl-3 pr-2 py-1.5 -ml-px border-l-2 text-[13px] leading-snug transition-colors ${
                                   isSectionActive
                                     ? "font-medium"
-                                    : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:border-zinc-300 dark:hover:border-zinc-700"
+                                    : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 hover:border-[color-mix(in_srgb,currentColor_25%,transparent)]"
                                 }`}
                                 style={
                                   isSectionActive
@@ -405,7 +405,7 @@ export function SitemapSidebar({
         </nav>
         {/* Footer */}
-        <div className="p-4 border-t border-zinc-100 dark:border-zinc-800">
+        <div className="p-4 border-t border-[color-mix(in_srgb,currentColor_10%,transparent)]">
           <a
             href={homeHref}
             className="text-sm font-medium transition-colors"

package/src/components/StepTimeline.tsx CHANGED Viewed

@@ -94,7 +94,7 @@ export function StepTimeline({
                   {step.description}
                 </p>
                 {step.detail && (
-                  <div className="mt-3 rounded-lg border border-zinc-100 dark:border-zinc-900 bg-zinc-50 dark:bg-zinc-900/50 p-3 text-sm">
+                  <div className="mt-3 rounded-lg border border-[color-mix(in_srgb,currentColor_10%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)] p-3 text-sm">
                     {step.detail}
                   </div>
                 )}

package/src/components/StickyBottomCta.tsx CHANGED Viewed

@@ -67,7 +67,7 @@ export function StickyBottomCta({
           animate={{ y: 0 }}
           exit={{ y: "100%" }}
           transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
-          className="fixed bottom-0 left-0 right-0 z-40 border-t border-zinc-200 dark:border-zinc-800 backdrop-blur-xl py-3 px-6"
+          className="fixed bottom-0 left-0 right-0 z-40 border-t border-[color-mix(in_srgb,currentColor_14%,transparent)] backdrop-blur-xl py-3 px-6"
           style={{ backgroundColor: "var(--mobile-bg)" }}
         >
           <div className="mx-auto max-w-7xl flex items-center justify-between">

package/src/components/Team.tsx CHANGED Viewed

@@ -66,13 +66,13 @@ export function Team({ title, subtitle, members, className = "" }: TeamProps) {
             >
               <Wrapper
                 {...wrapperProps}
-                className="group flex flex-col items-center rounded-2xl border border-zinc-200 bg-zinc-50 p-5 text-center transition-all hover:border-teal-300 hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900/50"
+                className="group flex flex-col items-center rounded-2xl border border-[color-mix(in_srgb,currentColor_14%,transparent)] bg-[color-mix(in_srgb,currentColor_3%,transparent)] p-5 text-center transition-all hover:border-teal-300 hover:shadow-md"
               >
                 {m.avatarUrl ? (
                   <img
                     src={m.avatarUrl}
                     alt={m.name}
-                    className="h-16 w-16 rounded-full border-2 border-white object-cover dark:border-zinc-800"
+                    className="h-16 w-16 rounded-full border-2 border-[color-mix(in_srgb,currentColor_14%,transparent)] object-cover"
                   />
                 ) : (
                   <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-teal-400/30 to-cyan-500/30 text-base font-semibold text-teal-700 dark:text-teal-300">

package/src/index.ts CHANGED Viewed

@@ -36,6 +36,8 @@ export { MetricsRow } from "./components/MetricsRow";
 // CTA components
 export { InlineCta } from "./components/InlineCta";
 export { StickyBottomCta } from "./components/StickyBottomCta";
+export { ClaudeMeterCta } from "./components/ClaudeMeterCta";
+export type { ClaudeMeterCtaProps } from "./components/ClaudeMeterCta";
 export { BookCallCTA } from "./components/BookCallCTA";
 export type {
   BookCallCTAProps,