*,: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.17 | 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}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-top-2\.5{top:-.625rem}.-top-3{top:-.75rem}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.left-\[25px\]{left:25px}.right-0{right:0}.top-0{top:0}.top-\[56px\]{top:56px}.top-full{top:100%}.z-10{z-index:10}.z-50{z-index:50}.col-span-12{grid-column:span 12/span 12}.col-span-2{grid-column:span 2/span 2}.col-span-3{grid-column:span 3/span 3}.col-span-9{grid-column:span 9/span 9}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.ml-1{margin-left:.25rem}.ml-11{margin-left:2.75rem}.ml-2{margin-left:.5rem}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-px{margin-top:1px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-video{aspect-ratio:16/9}.h-10{height:2.5rem}.h-16{height:4rem}.h-2\.5{height:.625rem}.h-20{height:5rem}.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-\[52px\]{height:52px}.max-h-\[80vh\]{max-height:80vh}.min-h-\[32px\]{min-height:32px}.w-0\.5{width:.125rem}.w-10{width:2.5rem}.w-16{width:4rem}.w-2\.5{width:.625rem}.w-24{width:6rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-56{width:14rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-80{width:20rem}.w-9{width:2.25rem}.w-\[36rem\]{width:36rem}.w-\[52px\]{width:52px}.w-full{width:100%}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.translate-y-1{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{--tw-translate-y:0.25rem}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-105{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))}.scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-\[52px_1fr\]{grid-template-columns:52px 1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-7{gap:1.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.25rem*var(--tw-space-x-reverse));margin-left:calc(.25rem*(1 - var(--tw-space-x-reverse)))}.space-x-1\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.375rem*var(--tw-space-x-reverse));margin-left:calc(.375rem*(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem*var(--tw-space-y-reverse))}.space-y-14>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(3.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3.5rem*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-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.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-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem*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))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.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-0{border-width:0}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-t{border-top-width:1px}.border-brand-navy{--tw-border-opacity:1;border-color:rgb(15 23 42/var(--tw-border-opacity,1))}.border-brand-orange{--tw-border-opacity:1;border-color:rgb(234 88 12/var(--tw-border-opacity,1))}.border-brand-orange\/40{border-color:rgba(234,88,12,.4)}.border-brand-slate\/20{border-color:rgba(51,65,85,.2)}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-gray-800{--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.border-orange-200{--tw-border-opacity:1;border-color:rgb(254 215 170/var(--tw-border-opacity,1))}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/30{border-color:hsla(0,0%,100%,.3)}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-brand-green{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-brand-navy{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-brand-navy\/80{background-color:rgba(15,23,42,.8)}.bg-brand-navy\/90{background-color:rgba(15,23,42,.9)}.bg-brand-neutral{--tw-bg-opacity:1;background-color:rgb(250 250 252/var(--tw-bg-opacity,1))}.bg-brand-orange{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity,1))}.bg-brand-orange\/15{background-color:rgba(234,88,12,.15)}.bg-brand-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-brand-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.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))}.from-brand-navy{--tw-gradient-from:#0f172a var(--tw-gradient-from-position);--tw-gradient-to:rgba(15,23,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-brand-white{--tw-gradient-from:#fff var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-\[\#1e293b\]{--tw-gradient-to:#1e293b var(--tw-gradient-to-position)}.to-brand-neutral{--tw-gradient-to:#fafafc var(--tw-gradient-to-position)}.p-1{padding:.25rem}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.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-16{padding-top:4rem;padding-bottom:4rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-1{padding-bottom:.25rem}.pb-1\.5{padding-bottom:.375rem}.pb-2{padding-bottom:.5rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-3{padding-left:.75rem}.pr-6{padding-right:1.5rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.text-center{text-align:center}.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-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[9px\]{font-size:9px}.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-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.15\]{line-height:1.15}.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\.18em\]{letter-spacing:.18em}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-brand-green{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-brand-navy{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.text-brand-navy\/80{color:rgba(15,23,42,.8)}.text-brand-orange{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-brand-slate{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity,1))}.text-brand-slate\/70{color:rgba(51,65,85,.7)}.text-brand-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/40{color:hsla(0,0%,100%,.4)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.line-through{text-decoration-line:line-through}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-orange-600{accent-color:#ea580c}.opacity-0{opacity:0}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.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)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.backdrop-blur-md{--tw-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,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-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)}.last\:border-0:last-child{border-width:0}.hover\:-translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:-translate-y-0\.5:hover,.hover\:-translate-y-1:hover{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\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:border-brand-navy:hover{--tw-border-opacity:1;border-color:rgb(15 23 42/var(--tw-border-opacity,1))}.hover\:border-white:hover{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.hover\:bg-\[\#d44f0a\]:hover{--tw-bg-opacity:1;background-color:rgb(212 79 10/var(--tw-bg-opacity,1))}.hover\:bg-brand-navy\/5:hover{background-color:rgba(15,23,42,.05)}.hover\:bg-brand-navy\/90:hover{background-color:rgba(15,23,42,.9)}.hover\:bg-brand-neutral:hover{--tw-bg-opacity:1;background-color:rgb(250 250 252/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:text-brand-navy:hover{--tw-text-opacity:1;color:rgb(15 23 42/var(--tw-text-opacity,1))}.hover\:text-brand-orange:hover{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.hover\:text-brand-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.hover\:shadow-2xl:hover,.hover\:shadow-lg:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-lg:hover{--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)}.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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-brand-orange:focus{--tw-border-opacity:1;border-color:rgb(234 88 12/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1: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(1px + 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-brand-orange:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(234 88 12/var(--tw-ring-opacity,1))}.group:hover .group-hover\:visible{visibility:visible}.group:hover .group-hover\:translate-y-0{--tw-translate-y:0px}.group:hover .group-hover\:rotate-180,.group:hover .group-hover\:translate-y-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))}.group:hover .group-hover\:rotate-180{--tw-rotate:180deg}.group:hover .group-hover\:text-brand-orange{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.sm\:col-span-4{grid-column:span 4/span 4}.sm\:col-span-6{grid-column:span 6/span 6}.sm\:inline-flex{display:inline-flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:gap-6{gap:1.5rem}.sm\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.sm\:space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.sm\:p-10{padding:2.5rem}.sm\:p-14{padding:3.5rem}.sm\:p-6{padding:1.5rem}.sm\:p-7{padding:1.75rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-5xl{font-size:3rem;line-height:1}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:col-span-1{grid-column:span 1/span 1}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-24{top:6rem}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05;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-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-\[1fr_380px\]{grid-template-columns:1fr 380px}.lg\:p-10{padding:2.5rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:py-28{padding-top:7rem;padding-bottom:7rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1280px){.xl\:inline{display:inline}.xl\:hidden{display:none}.xl\:space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.5rem*var(--tw-space-x-reverse));margin-left:calc(1.5rem*(1 - var(--tw-space-x-reverse)))}.xl\:px-5{padding-left:1.25rem;padding-right:1.25rem}.xl\:text-sm{font-size:.875rem;line-height:1.25rem}}

/* ── Section rhythm & definition ─────────────────────────────── */
section{position:relative}
/* Hairline divider between consecutive sections — defines the seam */
section + section::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(100% - 3rem, 80rem);height:1px;
  background:linear-gradient(90deg,transparent,rgba(15,23,42,.12) 12%,rgba(15,23,42,.12) 88%,transparent);
}
/* Dark sections: flip the seam to a light hairline */
section.bg-brand-navy + section::before,
section + section.bg-brand-navy::before{
  background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.14) 12%,hsla(0,0%,100%,.14) 88%,transparent);
}
/* Tighten vertical rhythm ~25% — less dead space, same structure */
section.py-20{padding-top:3.75rem;padding-bottom:3.75rem}
section.py-24{padding-top:4.25rem;padding-bottom:4.25rem}
section.py-16{padding-top:3.25rem;padding-bottom:3.25rem}
section.py-14{padding-top:3rem;padding-bottom:3rem}
@media (min-width:1024px){
  section.lg\:py-28{padding-top:5rem;padding-bottom:5rem}
  section.lg\:py-24{padding-top:4.5rem;padding-bottom:4.5rem}
  section.lg\:py-20{padding-top:4rem;padding-bottom:4rem}
}
/* Eyebrow labels sit closer to their heading */
section .tracking-\[0\.18em\],section .tracking-widest{margin-bottom:.35rem}
/* Trim oversized stack gaps inside sections */
section .space-y-14>:not([hidden])~:not([hidden]){margin-top:2.75rem}
section .space-y-12>:not([hidden])~:not([hidden]){margin-top:2.5rem}
section .mt-12{margin-top:2.5rem}

/* ── Persona card accents (Who It's For) ─────────────────────────
   Text colors and card background stay exactly as designed.
   Only the top sliver + shadow differentiate the cards. */
.persona-card{position:relative;overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(15,23,42,.30),0 2px 5px rgba(15,23,42,.07)!important;
  transition:transform .2s ease,box-shadow .2s ease}
.persona-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#0f172a,#475569)}
.persona-card:hover{transform:translateY(-3px);
  box-shadow:0 20px 42px -14px rgba(15,23,42,.38),0 3px 8px rgba(15,23,42,.10)!important}

/* ── Brand logo in header ────────────────────────────────────── */
.brand-logo{height:38px;width:auto;display:block}
@media (max-width:1023px){.brand-logo{height:32px}}
@media (max-width:400px){.brand-logo{height:27px}}
.brand-logo-footer{height:46px;width:auto;display:block}

/* Prevent incidental horizontal overflow on small screens */
/* `overflow-x:hidden` here turns <body> into a scroll container, and a sticky
   child positions against its nearest scrolling ancestor - so the pinned header
   silently stopped pinning. `clip` prevents the same horizontal overflow without
   creating that scroll container. The @supports block keeps the old behaviour
   for engines without `clip` (pre-16 Safari): no sticky there, but no sideways
   scroll either. */
html,body{max-width:100%;overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}

/* ══ Section headings: slightly larger, uniform ══ */
section h2,section h2.text-2xl,section h2.text-3xl,section h2.text-4xl{
  font-size:2.375rem!important;line-height:1.12!important;letter-spacing:-.02em}
@media (min-width:640px){section h2,section h2.text-2xl,section h2.text-3xl,section h2.text-4xl{font-size:2.875rem!important}}
@media (min-width:1024px){section h2,section h2.text-2xl,section h2.text-3xl,section h2.text-4xl{font-size:3.25rem!important}}
/* Sub-deck under each section heading — nudged up for legibility.
   Excludes the hero tagline (.fancy) and any p that sets its own size utility. */
section > div > div.text-center > p:not(.fancy):not([class*="text-4xl"]):not([class*="text-3xl"]):not([class*="text-2xl"]):not([class*="text-xl"]):not([class*="text-xs"]):not([class*="text-sm"]),
section .text-center > p.text-brand-slate:not(.fancy):not([class*="text-xs"]):not([class*="text-sm"]){font-size:1.125rem;line-height:1.7}
@media (min-width:640px){
section > div > div.text-center > p:not(.fancy):not([class*="text-4xl"]):not([class*="text-3xl"]):not([class*="text-2xl"]):not([class*="text-xl"]):not([class*="text-xs"]):not([class*="text-sm"]),
section .text-center > p.text-brand-slate:not(.fancy):not([class*="text-xs"]):not([class*="text-sm"]){font-size:1.1875rem}}
section .tracking-widest{font-size:.8125rem}

/* ══ Light-grey sections: very light grey (white sections untouched) ══ */
body,body.bg-brand-neutral{background-color:#f7f8fa!important}
section.bg-brand-neutral{background-color:#f7f8fa!important}

/* ══ WHY NEXGRANT WINS: dark heading band only, body stays light ══ */
.wins-head{background:#0f172a;position:relative;
  margin:-6rem calc(50% - 50vw) 0;padding:5rem calc(50vw - 50%) 4.5rem;
  border-bottom:1px solid rgba(255,255,255,.08)}
.wins-head h2{color:#fff!important}
.wins-head .text-brand-navy{color:#fff!important}
/* Capability cards keep their original light styling — sliver of shading on top only */
.cap-card{position:relative;overflow:hidden;
  box-shadow:0 10px 26px -14px rgba(15,23,42,.30),0 2px 5px rgba(15,23,42,.07)!important;
  transition:transform .2s ease,box-shadow .2s ease}
.cap-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#0f172a,#475569)}
.cap-card:hover{transform:translateY(-3px);
  box-shadow:0 20px 42px -14px rgba(15,23,42,.38),0 3px 8px rgba(15,23,42,.10)!important}

/* ══ FAQ: darker question blocks so they separate from the page ══ */
.faq-item{background:#e7eaf0!important;border:1px solid #cdd4e0!important;
  box-shadow:0 2px 6px rgba(15,23,42,.07)}
.faq-item button:hover{background:#dde2eb!important}
.faq-item .accordion-content{background:#f4f6fa}


/* Breathing room above the "One pipeline" block */
section .max-w-6xl.pt-14{padding-top:3.5rem!important}
@media (min-width:1024px){section .max-w-6xl.pt-14{padding-top:5.5rem!important}}

/* ── Section heading scale ───────────────────────────────────── */
.sec-title{font-size:2.35rem;line-height:1.16;letter-spacing:-.02em}
@media (min-width:640px){.sec-title{font-size:2.9rem}}
@media (min-width:1024px){.sec-title{font-size:3.15rem}}
.sec-eyebrow{font-size:.8rem;letter-spacing:.14em}
.sec-sub{font-size:1.075rem;line-height:1.65}
@media (min-width:640px){.sec-sub{font-size:1.15rem}}

/* Lift the standard section headings a step across the page */
section h2.text-3xl{font-size:2.35rem;line-height:1.16}
@media (min-width:640px){section h2.sm\:text-4xl{font-size:2.9rem}}
@media (min-width:1024px){section h2.lg\:text-5xl{font-size:3.15rem}}
/* And nudge the supporting copy under them */
section h2 + p,
section h2 ~ p.text-brand-slate{font-size:1.075rem;line-height:1.65}
@media (min-width:640px){section h2 + p,section h2 ~ p.text-brand-slate{font-size:1.15rem}}

/* ── Dark heading band (Why NexGrant Wins) ───────────────────── */
.head-dark{
  background:#0f172a;
  border-radius:1rem;
  padding:2.75rem 1.5rem;
  margin-bottom:.5rem;
  box-shadow:0 10px 30px -12px rgba(15,23,42,.45);
}
@media (min-width:640px){.head-dark{padding:3.25rem 2rem}}

/* ── Capability cards: shadowing only (background unchanged) ─── */
.cap-card{
  box-shadow:0 10px 26px -10px rgba(15,23,42,.20), 0 3px 8px -4px rgba(15,23,42,.10);
  transition:box-shadow .2s ease, transform .2s ease;
}
.cap-card:hover{
  box-shadow:0 18px 40px -14px rgba(15,23,42,.28), 0 5px 12px -6px rgba(15,23,42,.14);
  transform:translateY(-2px);
}

/* ── FAQ: very light grey blocks ─────────────────────────────── */
.faq-item{background:#f7f8fa !important;border-color:#e8ebf0 !important;
  box-shadow:0 2px 6px -3px rgba(15,23,42,.10)}
.faq-item:hover{background:#f2f4f7 !important}
.faq-item button:hover{background:transparent !important}
.faq-item.is-open{background:#f2f4f7 !important;border-color:#dfe4ec !important}

/* ── Stat cards: keep big figures centered inside the block ──── */
.stat-fig{white-space:normal;overflow-wrap:anywhere;text-align:center;width:100%}
@media (max-width:420px){.stat-fig{font-size:1.75rem}}

/* ── Pricing CTA buttons: three distinct, non-dark treatments ── */
.pbtn{border:2px solid transparent}
.pbtn-primary{background:#fff1e7;color:#c2410c;border-color:#f6c9a8}
.pbtn-primary:hover{background:#ffe6d5;border-color:#ea580c}
.pbtn-alt{background:#eef4ff;color:#1d4ed8;border-color:#c9dcff}
.pbtn-alt:hover{background:#e2edff;border-color:#3b82f6}
.pbtn-ghost{background:#f1f5f2;color:#15803d;border-color:#cfe6d6}
.pbtn-ghost:hover{background:#e7f1ea;border-color:#16a34a}

/* ── Pricing tier bullets (replaces the boxed panel) ─────────── */
.tier-dot{width:6px;height:6px;border-radius:9999px;background:#0f172a;
  flex:0 0 auto;margin-top:.5rem;margin-right:.6rem}
.tier-dot-on-dark{background:#fff}
.tier-dot-accent{background:#ea580c}

/* ── Hire vs Buy / ROI panel (matches Being-straight treatment) ─ */
.roi-panel{background:#0f172a;border:1px solid rgba(255,255,255,.10)}
.roi-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10)}
.roi-card-win{background:rgba(234,88,12,.12);border-color:rgba(234,88,12,.45)}
.roi-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 15%,rgba(255,255,255,.16) 85%,transparent)}

/* ── Pack cards: darker fill so they read against the section ── */
.pack-card{background:#eef1f6;box-shadow:0 4px 14px -6px rgba(15,23,42,.14)}
.pack-card:hover{background:#e8ecf3}

/* ── Software-gap comparison table ───────────────────────────── */
.cmp-table{background:#fff}
.cmp-table th{font-size:10px;white-space:nowrap}
.cmp-table td{vertical-align:middle}
.cmp-row-win{background:#0f172a}
.cmp-row-win td{border-top:1px solid rgba(255,255,255,.08)}
/* Verdict pills */
.cmp-no,.cmp-partial,.cmp-yes{display:inline-block;font-size:12px;font-weight:700;
  padding:.28rem .62rem;border-radius:9999px;white-space:nowrap;line-height:1.1}
.cmp-no{background:#f1f3f7;color:#8a94a6}
.cmp-partial{background:#fff1e7;color:#c2410c}
.cmp-yes{background:#ea580c;color:#fff}
/* Tighten on small screens so 3 columns fit cleanly */
@media (max-width:480px){
  .cmp-table td,.cmp-table th{padding-left:.75rem;padding-right:.75rem}
  .cmp-cat{width:1%}
  .cmp-cat span{font-size:10px}
  .cmp-no,.cmp-partial,.cmp-yes{font-size:11px;padding:.24rem .5rem}
}

/* ---- not-yet-live destinations ---- */
.is-soon{background:#F1F3F7!important;color:#556074!important;border:1px dashed #C3CCD9!important;
  cursor:default;pointer-events:none;box-shadow:none!important;
  text-decoration:none}
.is-soon .soon{font:700 9px/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;
  text-transform:uppercase;background:#fff;border:1px solid #E2E8F0;color:#556074;
  padding:4px 7px;border-radius:99px}
/* ---- government assisted purchase ---- */
.ng-gov{display:block;max-width:72rem;margin:0 auto;padding:0 1.5rem 5rem}
.ng-gov-in{background:#F7F8FA;border:1px solid #E2E8F0;border-left:4px solid #EA580C;
  border-radius:0 14px 14px 0;padding:26px 30px}
.ng-gov-kick{display:block;font:700 10px/1 ui-monospace,Consolas,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:#C2410C;margin-bottom:12px}
.ng-gov h3{font-size:21px;font-weight:800;color:#0F172A;letter-spacing:-.02em;margin-bottom:9px}
.ng-gov p{font-size:15px;line-height:1.6;color:#334155;max-width:62ch;margin-bottom:18px}
.ng-gov-btns{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
.ng-gov-a{background:#C2410C;color:#fff;font-weight:700;font-size:14.5px;
  padding:12px 20px;border-radius:9px;text-decoration:none}
.ng-gov-b{background:#fff;color:#0F172A;border:1.5px solid #CBD5E1;font-weight:700;
  font-size:14.5px;padding:11px 18px;border-radius:9px;text-decoration:none}
.ng-gov-c{color:#C2410C;font-weight:700;font-size:14px;text-decoration:underline}
.ng-gov-fine{font-size:13px;color:#556074;margin:16px 0 0;max-width:66ch}



/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/b58654dd4f78.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/b58654dd4f78.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/4f27206c4b1c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/4f27206c4b1c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/a389d97de580.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/a389d97de580.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/a389d97de580.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/a389d97de580.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/a389d97de580.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/a389d97de580.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body { font-family: 'Plus Jakarta Sans', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.fancy {
  font-family: 'Fraunces', 'Plus Jakarta Sans', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.fancy-tilde {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: #EA580C;
  font-weight: 400;
  display: inline-block;
  transform: translateY(-0.05em);
  margin-right: 0.15em;
}
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out; }
.step-line::after {
  content: ''; position: absolute; top: 28px;
  left: calc(50% + 32px); right: calc(-50% + 32px);
  height: 2px;
  background: linear-gradient(to right, #EA580C 0%, #EA580C 50%, #E5E7EB 50%, #E5E7EB 100%);
  background-size: 12px 2px; background-repeat: repeat-x; z-index: 0;
}
@media (max-width: 1023px) { .step-line::after { display: none; } }
.dash-img {
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(15, 23, 42, 0.08);
  width: 100%; height: auto; display: block;
}
.dash-frame {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
  padding: 6px; border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.4);
}
.placeholder-mark { position: relative; }
.placeholder-mark::before {
  content: 'PLACEHOLDER'; position: absolute; top: -8px; right: -8px;
  background: #FEF3C7; color: #92400E; font-size: 8px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; letter-spacing: 0.05em; z-index: 10;
}
.gradient-text {
  background: linear-gradient(135deg, #EA580C 0%, #DC2626 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page{display:none}
.page.on{display:block;animation:pgin .28s ease-out}
@keyframes pgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.page.on{animation:none}}
.tabnum{font-variant-numeric:tabular-nums}



.bill-tg{color:#334155}
.bill-tg.on{background:#0F172A;color:#fff}
.stk-row.on .chk{background:#16A34A;border-color:#16A34A}
.stk-row.on .chk svg{opacity:1}
.stk-row.on .price{color:#16A34A}
input[type=range]{height:6px;border-radius:3px;background:#e5e7eb;appearance:none}
input[type=range]::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:#EA580C;cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#EA580C;cursor:pointer;border:3px solid #fff}

/* ---- pre-launch status bar ---------------------------------------------
   Sits above the nav, styled as a system message rather than a promo strip so
   it reads as a status, not an ad. Dismissible: a returning visitor who has
   already read it should not be told twice. */
.ng-status{background:#0F172A;color:#CBD5E1;font-size:13.5px;line-height:1.5;
  position:relative;z-index:60}
.ng-status-in{max-width:80rem;margin:0 auto;padding:10px 56px 10px 24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.ng-status b{color:#fff;font-weight:800}
.ng-status .dot{width:7px;height:7px;border-radius:50%;background:#FB923C;
  flex:none;box-shadow:0 0 0 3px rgba(251,146,60,.22)}
.ng-status a{color:#FB923C;font-weight:700;text-decoration:underline;
  text-underline-offset:2px}
.ng-status button{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#94A3B8;font-size:19px;line-height:1;cursor:pointer;
  padding:6px 8px;border-radius:6px}
.ng-status button:hover{color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:640px){.ng-status-in{padding-right:44px;font-size:12.5px}}

/* nav-level disabled link: muted, no box, no badge — keeps the bar on one line */
.is-soon-quiet{color:#94A3B8!important;cursor:default;pointer-events:none;
  text-decoration:none!important}

/* ═══ Purge gaps ═══════════════════════════════════════════════════════════
   The stylesheet is a purged Tailwind subset, and the purge missed these five
   while the markup still uses them. A missing utility fails silently: with
   lg:col-span-3 absent, a 5-column grid gave each child 1/5 width instead of
   3/5, which squeezed the Grant Accelerator block into a narrow strip.
   ═════════════════════════════════════════════════════════════════════════ */
.max-w-lg{max-width:32rem}
@media (min-width:640px){
  .sm\:inline{display:inline}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:col-span-3{grid-column:span 3/span 3}
}

/* ═══ Disabled-control layout ══════════════════════════════════════════════
   .is-soon used to force display:inline-flex, which reflowed any block-level
   control into a horizontal row. The pack cards are <a class="block"> with
   stacked children — they collapsed into overlapping text. Leave display alone
   and let the badge sit inline after the label instead.
   ═════════════════════════════════════════════════════════════════════════ */
.is-soon .soon{display:inline-block;margin-left:8px;vertical-align:middle}

/* Disabled controls sitting on a dark panel: a pale grey box reads as a
   rendering fault against navy. */
.final .is-soon,
[class*="bg-brand-navy"] .is-soon,
.roi-panel .is-soon{background:rgba(255,255,255,.08)!important;color:#CBD5E1!important;
  border:1px dashed #475569!important}
.final .is-soon .soon,
[class*="bg-brand-navy"] .is-soon .soon,
.roi-panel .is-soon .soon{background:transparent;border-color:#475569;color:#94A3B8}

/* ═══ Resources — "what these guides answer" ═══════════════════════════════
   Written as real CSS rather than utility classes: the stylesheet is a purged
   Tailwind subset, so anything the purge dropped (w-1.5, gap-y-5, mb-10 …)
   silently does nothing. Scoped rules cannot be purged out from under it.
   ═════════════════════════════════════════════════════════════════════════ */
.ng-answers{background:#0F172A;border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);padding:72px 0}
.ng-answers-in{max-width:64rem;margin:0 auto;padding:0 24px}
.ng-answers-kick{display:block;text-align:center;color:#FB923C;font-size:12px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.ng-answers h2{text-align:center;color:#fff;font-size:clamp(28px,3.4vw,38px);
  font-weight:800;line-height:1.15;letter-spacing:-.02em;margin:0 auto 16px;max-width:22ch}
.ng-answers-lede{text-align:center;color:rgba(255,255,255,.72);font-size:17px;
  line-height:1.6;max-width:60ch;margin:0 auto 44px}
.ng-answers-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:26px 44px}
.ng-answers-list li{position:relative;padding-left:26px;color:rgba(255,255,255,.80);
  font-size:15.5px;line-height:1.65}
.ng-answers-list li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:#EA580C}
.ng-answers-list b{color:#fff;font-weight:700;display:block;margin-bottom:2px}
@media (max-width:820px){
  .ng-answers{padding:56px 0}
  .ng-answers-list{grid-template-columns:1fr;gap:22px}
}

/* ═══ Waitlist controls ════════════════════════════════════════════════════
   These are live links, so they keep the button styling they already carry —
   only the label changes. No dashed border, no muted fill: a control that
   works should not look disabled.
   ═════════════════════════════════════════════════════════════════════════ */
.is-waitlist{cursor:pointer}
.is-waitlist .soon{display:none}

/* ═══ Accent ramp on fills ═════════════════════════════════════════════════
   White on #EA580C measures 3.56:1 — below AA for text under 18.66px bold, and
   that is the primary CTA on every page. Orange fills carry white text, so the
   FILL moves to the darker value while text-brand-orange keeps the brighter one
   for large display use. Visually it is a small shift; legibility is not.
   ═════════════════════════════════════════════════════════════════════════ */
a.bg-brand-orange,button.bg-brand-orange,span.bg-brand-orange,div.bg-brand-orange{
  background-color:#C2410C}
a.bg-brand-orange:hover,button.bg-brand-orange:hover{background-color:#9A3412}

/* The headline gradient runs orange -> red, which is tuned for a white ground.
   On navy the red end loses too much separation, so both stops lift. */
[class*="bg-brand-navy"] .gradient-text,.ng-answers .gradient-text{
  background:linear-gradient(135deg,#FB923C 0%,#F87171 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ═══ Pull quotes ══════════════════════════════════════════════════════════
   Was `.fancy` — Fraunces italic at "opsz" 144. That axis value is the display
   optical size, drawn for 60px+ headlines; at the 24-30px a pull quote actually
   renders, the strokes thin and the terminals get too fine to read comfortably.
   Fraunces stays on the hero, where the size matches the axis.

   The attribution line was 12px ALL CAPS with wide tracking carrying a full
   sentence. Caps + tracking are legibility aids for 2-3 word labels and a
   penalty for anything longer.
   ═════════════════════════════════════════════════════════════════════════ */
.pullquote{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-style:normal;
  font-weight:500;letter-spacing:-.015em;line-height:1.45;color:#0F172A;
  font-variation-settings:normal}
.pullquote-attr{font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:.8125rem;line-height:1.6;font-weight:500;letter-spacing:0;
  text-transform:none;color:#556074}
.pullquote-attr b{color:#334155;font-weight:700}

/* ═══ Accent ramp on TEXT ══════════════════════════════════════════════════
   Companion to the fill rule above. #EA580C on white is 3.56:1 and on the
   #F7F8FA body ground 3.35:1 — below AA for anything under 18.66px bold. That
   is the eyebrow over every section heading, every card CTA, and 19 inline
   prose links, on every page. Public-sector buyers test for WCAG 2.1 AA in
   procurement, so small orange TEXT moves to #C2410C (5.18:1).

   On dark grounds the correction inverts: #C2410C on navy is only 3.45:1, so
   accent text there lifts to #FB923C (7.89:1) instead.
   ═════════════════════════════════════════════════════════════════════════ */
.text-brand-orange{color:#C2410C}
[class*="bg-brand-navy"] .text-brand-orange,
.roi-panel .text-brand-orange,
.ng-answers .text-brand-orange,
.final .text-brand-orange{color:#FB923C}

/* Disabled nav link was #94A3B8 on white = 2.56:1 — unreadable, and with the
   href stripped it is not focusable, so its title attribute is never announced
   either. Darken it and keep the cue visible. */
.is-soon-quiet{color:#556074!important}

.text-white\/90{color:rgba(255,255,255,.9)}

/* ═══ Remaining AA failures found by whole-page scanning ══════════════════
   audit H6 — `text-white/90` is emitted by app.js for the featured Growth
   card's perks but was never generated by the CSS purge, so those four
   bullets inherited body slate over navy and rendered at 1.72:1. They are
   the differentiators on the card the buyer is meant to choose.
   ═════════════════════════════════════════════════════════════════════════ */
footer .text-gray-500,footer .text-\[10px\],footer p,footer div{color:#9CA6B5}
footer a{color:#CBD5E1}
.cmp-yes{background:#C2410C!important;color:#fff!important}
.cmp-no{background:#E2E8F0!important;color:#475569!important}
.cmp-partial{background:#FEF3C7!important;color:#854D0E!important}
.cmp-writes,.cap-tag,.meth-tag{color:#155E3F}


/* ═══ Accent ramp on green ═════════════════════════════════════════════════
   Same failure as orange, one hue over: brand-green TEXT is #16A34A, which is
   3.30:1 on white and 3.10:1 on the body ground — below AA everywhere it is
   used at label size (comparison verdicts, methodology tags, pack perks, the
   veteran-discount prices). #15803D keeps the same hue at 5.02:1.
   The FILL stays #16A34A; only text moves.
   ═════════════════════════════════════════════════════════════════════════ */
.text-brand-green{color:#15803D}
[class*="bg-brand-navy"] .text-brand-green,
.roi-panel .text-brand-green,
.final .text-brand-green{color:#4ADE80}

/* Last three AA gaps, all the same shape as the two ramps above:
   · .cmp-row-win is a dark table row (#0f172a) that my dark-context selector
     did not match, so its orange label rendered at 3.45:1
   · "Why NexGrant Wins" sits on the light band but at 13px, so it needs the
     dark-on-light orange, which it already gets — the failure was the eyebrow
     inheriting a lighter tone from .sec-eyebrow's smaller size
   · .price and the pack perks are green on a tinted card, where #15803D only
     reaches 4.43:1 — one step darker clears it */
.cmp-row-win .text-brand-orange{color:#FB923C}
.stk-row.on .price{color:#15803D}
.text-brand-green{color:#166534}
[class*="bg-brand-navy"] .text-brand-green,
.cmp-row-win .text-brand-green,
.roi-panel .text-brand-green,
.final .text-brand-green{color:#4ADE80}

/* .head-dark is another dark panel; same correction as .cmp-row-win. */
.head-dark .text-brand-orange{color:#FB923C}
.head-dark .text-brand-green{color:#4ADE80}

/* ═══ Keyboard-operable nav ════════════════════════════════════════════════
   The dropdowns were :hover-only, which means a keyboard or switch user could
   not reach Pricing, Tools, or About sub-items at all — the panel never became
   visible, so the links inside it were unreachable even though they were in the
   tab order. Mirroring every :hover rule onto :focus-within opens the panel
   when focus enters it and closes it when focus leaves, with no JS required.
   app.js adds aria-expanded and Escape-to-close on top of this.
   ═════════════════════════════════════════════════════════════════════════ */
.group:focus-within .group-hover\:visible{visibility:visible}
.group:focus-within .group-hover\:opacity-100{opacity:1}
.group:focus-within .group-hover\:translate-y-0{--tw-translate-y: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))}
.group:focus-within .group-hover\:rotate-180{--tw-rotate:180deg;
  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))}
/* a visible focus ring — the default one was being clipped by overflow */
.nav-top:focus-visible,nav a:focus-visible,nav button:focus-visible{
  outline:2px solid #C2410C;outline-offset:3px;border-radius:4px}

/* Escape-to-close. `:focus-within` alone cannot express this: Escape has to
   return focus to the trigger, and the trigger is inside .group, so the panel
   would immediately re-open. This class is set by app.js and wins on source
   order at equal specificity. It is cleared as soon as focus leaves the group
   or the pointer re-enters it. */
.group.ng-closed .group-hover\:visible{visibility:hidden}
.group.ng-closed .group-hover\:opacity-100{opacity:0}

/* The dropdown panels carry Tailwind's `transition-all`, which includes
   `visibility`. That has two consequences worth removing: the panel stays
   hit-testable and focusable for 200ms after the pointer leaves, and a panel
   revealed by keyboard is still computed `hidden` at t=0, so focusing a link
   inside it silently fails. Animate only what should animate. */
nav .group > div{transition-property:opacity,transform}

/* ═══ Product walkthrough rows ═════════════════════════════════════════════
   Alternating image/text rows. Written as scoped CSS rather than `lg:order-1`
   / `lg:order-2` / `gap-8` utilities, because none of those survive in this
   purged Tailwind build — they would fail silently and every row would land
   on the same side. Same reason `space-y-16` and `gap-y-4` are avoided here.
   ═════════════════════════════════════════════════════════════════════════ */
.shotrow{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
@media (min-width:1024px){
  .shotrow{grid-template-columns:1.05fr .95fr;gap:3.5rem}
  /* the media column stays the wider one on both sides, so a flipped row does
     not render its screenshot ~60px narrower than the row above it */
  .shotrow.flip{grid-template-columns:.95fr 1.05fr}
  .shotrow.flip .shotrow-media{order:2}
  .shotrow.flip .shotrow-copy{order:1}
}
.shotrow + .shotrow{margin-top:4.5rem}
.shotrow-copy{display:flex;flex-direction:column;gap:.9rem}
.shotrow-kicker{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#C2410C}
.shotrow-h{font-size:1.6rem;line-height:1.2;font-weight:800;color:#0F172A;letter-spacing:-.02em}
@media (min-width:640px){.shotrow-h{font-size:1.85rem}}
.shotrow-p{color:#475569;line-height:1.7}
.shotrow-list{display:flex;flex-direction:column;gap:.55rem;margin-top:.2rem}
.shotrow-list li{display:flex;align-items:flex-start;font-size:.875rem;font-weight:600;color:#0F172A;line-height:1.5}
.shotrow-list svg{width:1rem;height:1rem;color:#166534;margin-right:.5rem;margin-top:.18rem;flex-shrink:0}
.shot-note{font-size:12px;line-height:1.6;color:#556074;text-align:center;max-width:44rem;
  margin:3.5rem auto 0;padding-top:1.25rem;border-top:1px solid #E2E8F0}
.shot-note b{color:#334155;font-weight:700}

/* These screenshots render about 605px wide, where a dense dashboard is legible
   as a shape but not as text. Rather than a JS lightbox, each one is a plain
   link to the full-resolution file: keyboard-operable with no extra code, and
   it still works if the script never loads. */
.shot-zoom{display:block;position:relative;border-radius:12px}
.shot-zoom-tag{position:absolute;right:12px;bottom:12px;background:rgba(15,23,42,.88);
  color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:.4rem .7rem;
  border-radius:6px;opacity:0;transition:opacity .18s ease;pointer-events:none}
.shot-zoom:hover .shot-zoom-tag,.shot-zoom:focus-visible .shot-zoom-tag{opacity:1}
.shot-zoom:focus-visible{outline:2px solid #C2410C;outline-offset:4px}

/* == The process: six automatic steps + one that is yours ==================
   Replaces a seven-row vertical timeline (52px numerals, connecting rail,
   ~1,000px tall) that spent most of the viewport restating the same shape
   seven times. A grid says "these all happen without you" in one glance, and
   pulling step 7 out as its own card is what the section is actually claiming.
   Written as scoped CSS, not `lg:grid-cols-3`/`gap-8` utilities, because this
   is a purged Tailwind build and missing utilities fail silently.
   ======================================================================== */
.stepgrid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.stepgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.stepgrid{grid-template-columns:repeat(3,1fr);gap:1.15rem}}
.stepcard{background:#fff;border:1px solid #E2E8F0;border-radius:14px;
  padding:1.3rem 1.4rem 1.45rem;display:flex;flex-direction:column;gap:.5rem;
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.stepcard:hover{box-shadow:0 12px 28px -14px rgba(15,23,42,.28);
  transform:translateY(-2px);border-color:#CBD5E1}
.stepcard-top{display:flex;align-items:center;gap:.6rem}
.stepcard-n{width:26px;height:26px;border-radius:8px;background:#0F172A;color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-variant-numeric:tabular-nums}
.stepcard-tag{font-size:9.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#556074;background:#F1F5F9;padding:.22rem .45rem;border-radius:4px}
.stepcard-h{font-size:.98rem;font-weight:800;color:#0F172A;line-height:1.3;letter-spacing:-.01em}
.stepcard-p{font-size:.8125rem;line-height:1.6;color:#475569}

.stepyou{display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start;
  background:linear-gradient(135deg,#0F172A 0%,#1E293B 100%);border-radius:18px;
  padding:1.9rem 1.75rem;box-shadow:0 22px 45px -22px rgba(15,23,42,.55)}
@media (min-width:640px){.stepyou{gap:1.6rem;padding:2.2rem 2.4rem}}
.stepyou-n{width:52px;height:52px;border-radius:14px;background:#EA580C;color:#fff;
  font-size:1.35rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-variant-numeric:tabular-nums}
.stepyou-body{display:flex;flex-direction:column;gap:.55rem;min-width:0}
.stepyou-tag{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#FB923C}
.stepyou-h{font-size:1.4rem;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-.02em}
@media (min-width:640px){.stepyou-h{font-size:1.6rem}}
.stepyou-p{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.78);max-width:56rem}

/* one demo-data footnote at the foot of the page, reached by an asterisk
   under the screenshots rather than repeated mid-flow */
.shot-aster{color:#C2410C;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.shot-aster:hover{color:#9A3412}
/* NOT display:flex — every child of a flex container becomes a flex item, so
   the <b> inside the sentence was being laid out as its own column and the
   footnote rendered as three broken stacks. It is a paragraph; lay it out as
   one, and hang the asterisk in the margin with a negative text-indent. */
.demo-note{font-size:12.5px;line-height:1.7;color:#556074;
  padding-left:1rem;text-indent:-1rem}
.demo-note b{color:#334155;font-weight:700}
.demo-note-star{color:#C2410C;font-weight:800;margin-right:.35rem}

/* The interview is the one step in the grid that needs the applicant. Tagging
   it "Automatic" alongside the other five would be untrue, and it is also the
   step worth drawing the eye to — it is where the applicant's own reasoning
   gets into the narrative. */
.stepcard-you{border-color:#FDBA8C;background:#FFFBF7}
.stepcard-tag-you{background:#FFEDD5;color:#9A3412}

/* ═══ Pinned header ════════════════════════════════════════════════════════
   The site now carries its trial CTA in the header instead of repeating it
   down every page, which only works if the header is actually on screen. It
   was static, so it scrolled away and took the only CTA with it.
   ═════════════════════════════════════════════════════════════════════════ */
.ng-sticky{position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid rgba(15,23,42,.07);transition:box-shadow .18s ease}
.ng-sticky.is-scrolled{box-shadow:0 6px 24px -12px rgba(15,23,42,.28)}
@supports not (backdrop-filter:blur(1px)){.ng-sticky{background:#fff}}
/* anchor targets must clear the pinned bar */
:target{scroll-margin-top:88px}

/* Form fields were white-on-white: a white input inside a white card, separated
   only by a 1px #D1D5DB border. That reads as a line drawing rather than a
   field, and the design check flags it as "no panel". A faint neutral fill makes
   the input legible as an input without adding chrome. */
.ng-field{background:#F8FAFC}
.ng-field:focus{background:#fff}

/* The visually-hidden heading on /demo inherited slate body text onto a near
   black section, so any tool that measures it (or any user stylesheet that
   un-clips it) sees 1.9:1. Clipped is not the same as absent - give it a colour
   that actually works where it lives. */
.dm-sr{color:#fff}

/* ═══ Who-it's-for tab switcher ════════════════════════════════════════════
   Replaces six stacked persona cards (7.1kb) that duplicated the /who/* pages.
   Tabs rather than an auto-rotating carousel on purpose: rotation moves content
   away from someone mid-sentence, gives screen-reader and keyboard users no
   stable target, and leaves crawlers indexing panels a visitor never sees.
   Every panel stays in the DOM; only one is shown.
   ═════════════════════════════════════════════════════════════════════════ */
.who-tabs{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.who-tab{font:inherit;font-size:.8125rem;font-weight:700;color:#475569;background:#fff;
  border:1px solid #E2E8F0;padding:.55rem .95rem;border-radius:99px;cursor:pointer;
  transition:all .15s ease;white-space:nowrap}
.who-tab:hover{border-color:#FDBA8C;color:#0F172A}
.who-tab:focus-visible{outline:2px solid #C2410C;outline-offset:2px}
.who-tab.on{background:#0F172A;border-color:#0F172A;color:#fff}
.who-panels{margin-top:1.75rem}
/* The `hidden` attribute is only `display:none` from the UA stylesheet, so any
   author `display` wins over it — with `display:flex` below, every panel stayed
   visible and the six stacked up. This has to come first and be explicit. */
.who-panel[hidden]{display:none}
.who-panel{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:16px;
  padding:2rem 1.75rem;text-align:center;display:flex;flex-direction:column;gap:.6rem;
  align-items:center;animation:whoIn .22s ease}
@media (min-width:640px){.who-panel{padding:2.5rem}}
@keyframes whoIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.who-panel{animation:none}}
.who-persona{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#C2410C}
.who-h{font-size:1.5rem;font-weight:800;color:#0F172A;letter-spacing:-.02em;line-height:1.2}
.who-p{font-size:.95rem;line-height:1.7;color:#475569;max-width:42rem}
.who-link{font-size:.8125rem;font-weight:700;color:#C2410C;text-decoration:underline;
  text-underline-offset:3px;margin-top:.35rem}
.who-link:hover{color:#9A3412}

/* ═══ Four-job matrix (§1 software gap) ════════════════════════════════════
   The previous three-tile version said NexGrant "does the last job, and files
   it", which reads as: it only writes. That implies a buyer still needs a
   discovery subscription and a management tool alongside it — false, and it
   invites them to budget for two products we replace. The matrix states the
   four jobs explicitly and checks NexGrant on all of them.
   ═════════════════════════════════════════════════════════════════════════ */
.mx-wrap{margin-top:2.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:16px;
  border:1px solid #E2E8F0;background:#fff}
.mx-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.875rem}
.mx-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mx-table thead th{background:#F8FAFC;color:#556074;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:.9rem .85rem;text-align:center;
  border-bottom:1px solid #E2E8F0;white-space:nowrap}
.mx-table thead th:first-child{text-align:left}
.mx-table tbody th{text-align:left;padding:.95rem .85rem;font-weight:600;
  border-bottom:1px solid #F1F5F9;vertical-align:middle}
.mx-table tbody td{text-align:center;padding:.95rem .85rem;border-bottom:1px solid #F1F5F9}
.mx-table tbody tr:last-child th,.mx-table tbody tr:last-child td{border-bottom:0}
.mx-name{display:block;font-weight:800;color:#0F172A;font-size:.9375rem}
/* #64748B lands at 4.48:1 on the highlighted row tint (#FFF7ED) - just under AA. */
.mx-sub{display:block;font-size:.75rem;color:#556074;margin-top:.1rem;font-weight:500}
.mx-yes{display:inline-flex;width:26px;height:26px;border-radius:50%;background:#DCFCE7;
  color:#166534;align-items:center;justify-content:center}
.mx-yes svg{width:14px;height:14px}
.mx-no{color:#CBD5E1;font-weight:700}
.mx-part{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#9A3412;background:#FFEDD5;padding:.2rem .5rem;border-radius:99px}
.mx-us{background:#FFF7ED}
.mx-us .mx-name{color:#9A3412}
.mx-us .mx-yes{background:#EA580C;color:#fff}

/* the Why-Wins panels reuse the who-tab machinery, with room for bullets */
.wins-panel{text-align:left;align-items:flex-start}
.wins-h{font-size:1.35rem;font-weight:800;color:#0F172A;letter-spacing:-.02em;line-height:1.25}
@media (min-width:640px){.wins-h{font-size:1.55rem}}
.wins-p{font-size:.95rem;line-height:1.7;color:#475569}
.wins-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.35rem}
.wins-list li{display:flex;align-items:flex-start;font-size:.875rem;font-weight:600;
  color:#0F172A;line-height:1.5}
.wins-list svg{width:1rem;height:1rem;color:#166534;margin-right:.55rem;margin-top:.2rem;flex-shrink:0}

/* ═══ Homepage FAQ ═════════════════════════════════════════════════════════
   Two columns as before, but collapsed by default: four open answers made the
   block the tallest thing on the page for content most visitors skim past.
   ═════════════════════════════════════════════════════════════════════════ */
.hq-grid{display:grid;grid-template-columns:1fr;gap:.85rem}
@media (min-width:640px){.hq-grid{grid-template-columns:1fr 1fr;align-items:start}}
.hq{background:#fff;border:1px solid #E2E8F0;border-radius:14px;overflow:hidden}
/* Fixed min-height so a one-line question occupies the same box as a two-line
   one. Deliberately on the button rather than the grid cell — `grid-auto-rows:1fr`
   would make an expanded answer stretch every other tile to match it. */
.hq-q{width:100%;min-height:5.25rem;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;
  text-align:left;padding:1.1rem 1.25rem;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.9375rem;font-weight:800;color:#0F172A;line-height:1.4}
.hq-q:hover{background:#F8FAFC}
.hq-q:focus-visible{outline:2px solid #C2410C;outline-offset:-2px}
.hq-i{width:18px;height:18px;color:#C2410C;flex-shrink:0;margin-top:.15rem;transition:transform .2s ease}
.hq-q[aria-expanded="true"] .hq-i{transform:rotate(180deg)}
.hq-a[hidden]{display:none}
.hq-a p{padding:0 1.25rem 1.15rem;font-size:.875rem;line-height:1.7;color:#475569;margin:0}

/* A long figure like "$15K-$25K" needs 207px where the 4-up card gives 180px, so
   it broke to two lines while its neighbours sat on one. Rather than shrink the
   type and make one card look odd next to the others, reclaim the width:
     - proportional figures instead of `tabnum` (tabular pads every glyph to the
       widest digit, which is wasted on "$" and "K"),
     - a touch of negative tracking,
     - and a negative inline margin that lends the figure some of the card's own
       padding. The figure is centred, so the shorter values are unaffected.
   Below 640px the card is genuinely too narrow for any of this, so wrapping is
   allowed again there — nowrap would overflow and push the page sideways. */
@media (min-width:640px){
  .stat-fig-wide{white-space:nowrap;font-variant-numeric:proportional-nums;
    letter-spacing:-.02em;margin-inline:-.85rem}
}

/* The kicker line computed to line-height 1.0 — `leading-[1.05]` isn't in this
   purged Tailwind build, so it silently fell back. Fraunces italic at "opsz" 144
   has ascenders taller than a 1.0 line box, and because the phrase is painted
   through `background-clip:text` the overflow gets cropped rather than just
   spilling: the "f" of "of" lost its top. A real line-height fixes it at source.
   The span also becomes inline-block so its paint box is its own, not the line's. */
.hero-kicker{line-height:1.22;padding-top:.08em}
.hero-kicker .gradient-text{display:inline-block;padding-top:.06em}
/* pulled up toward the top of the section, with more air before the headline */
.hero-kicker{margin-top:-1.25rem;margin-bottom:1.5rem}
@media (min-width:1024px){.hero-kicker{margin-top:-2rem;margin-bottom:2rem}}

/* ═══ Hero kicker band ═════════════════════════════════════════════════════
   Just the "~Grant infrastructure for the rest of America" line sits on dark,
   not the whole hero. Full-bleed via the same negative-margin technique as
   .wins-head, but with its own spacing — .wins-head's -6rem/5rem values are
   tuned for a mid-page section header and are far too tall here.

   The negative top margin cancels the hero section's own py-16 / lg:py-24 so
   the band starts flush under the nav. Rounded bottom corners ease it into the
   white hero rather than cutting hard across the page.
   ═════════════════════════════════════════════════════════════════════════ */
.hero-band{background:#0F172A;text-align:center;
  margin:-4rem calc(50% - 50vw) 2.25rem;
  padding:2.5rem calc(50vw - 50%) 2.25rem;
  border-radius:0 0 22px 22px}
@media (min-width:1024px){
  .hero-band{margin:-6rem calc(50% - 50vw) 2.75rem;padding:3rem calc(50vw - 50%) 2.75rem}
}
.hero-band .hero-kicker{margin:0;color:rgba(255,255,255,.85)}
/* the brighter ramp reads better on navy than the default #EA580C -> #DC2626,
   matching how gradient text is already treated on dark grounds elsewhere */
.hero-band .gradient-text{background:linear-gradient(135deg,#FB923C 0%,#F87171 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}