*,: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:var(--font-sans),-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.-bottom-px{bottom:-1px}.bottom-3{bottom:.75rem}.left-3{left:.75rem}.left-\[12\%\]{left:12%}.right-\[12\%\]{right:12%}.top-0{top:0}.top-3{top:.75rem}.top-\[1\.35rem\]{top:1.35rem}.z-40{z-index:40}.mx-auto{margin-left:auto;margin-right:auto}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.ml-1\.5{margin-left:.375rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.mt-9{margin-top:2.25rem}.mt-\[3px\]{margin-top:3px}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[16\/10\]{aspect-ratio:16/10}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-4{height:1rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[0\.22em\]{height:.22em}.h-full{height:100%}.h-px{height:1px}.w-11{width:2.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[0\.22em\]{width:.22em}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-\[46rem\]{max-width:46rem}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.origin-left{transform-origin:left}.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}.resize{resize:both}.scroll-mt-20{scroll-margin-top:5rem}.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-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:.375rem}.gap-10{gap:2.5rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-x-5{-moz-column-gap:1.25rem;column-gap:1.25rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-y-0\.5{row-gap:.125rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.gap-y-3{row-gap:.75rem}.gap-y-4{row-gap:1rem}.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-20>: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-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-border>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:hsl(var(--border)/var(--tw-divide-opacity,1))}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.text-pretty{text-wrap:pretty}.rounded-2xl{border-radius:calc(var(--radius) + 6px)}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:calc(var(--radius) + 2px)}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-accent-ink\/20{border-color:rgb(var(--accent-ink)/.2)}.border-accent\/25{border-color:rgb(var(--accent)/.25)}.border-accent\/35{border-color:rgb(var(--accent)/.35)}.border-border{--tw-border-opacity:1;border-color:hsl(var(--border)/var(--tw-border-opacity,1))}.border-white\/25{border-color:hsla(0,0%,100%,.25)}.bg-accent{--tw-bg-opacity:1;background-color:rgb(var(--accent)/var(--tw-bg-opacity,1))}.bg-accent-soft{--tw-bg-opacity:1;background-color:rgb(var(--accent-soft)/var(--tw-bg-opacity,1))}.bg-accent-soft\/50{background-color:rgb(var(--accent-soft)/.5)}.bg-accent\/30{background-color:rgb(var(--accent)/.3)}.bg-background{--tw-bg-opacity:1;background-color:hsl(var(--background)/var(--tw-bg-opacity,1))}.bg-background\/90{background-color:hsl(var(--background)/.9)}.bg-border{--tw-bg-opacity:1;background-color:hsl(var(--border)/var(--tw-bg-opacity,1))}.bg-card{--tw-bg-opacity:1;background-color:hsl(var(--card)/var(--tw-bg-opacity,1))}.bg-muted{--tw-bg-opacity:1;background-color:hsl(var(--muted)/var(--tw-bg-opacity,1))}.bg-muted\/50{background-color:hsl(var(--muted)/.5)}.bg-muted\/60{background-color:hsl(var(--muted)/.6)}.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-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black\/65{--tw-gradient-from:rgba(0,0,0,.65) 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)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-5{padding:1.25rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}.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-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-1\.5{padding-bottom:.375rem}.pb-20{padding-bottom:5rem}.pb-6{padding-bottom:1.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.align-baseline{vertical-align:baseline}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.78rem\]{font-size:.78rem}.text-\[0\.82rem\]{font-size:.82rem}.text-\[0\.85rem\]{font-size:.85rem}.text-\[0\.88rem\]{font-size:.88rem}.text-\[0\.8rem\]{font-size:.8rem}.text-\[0\.92rem\]{font-size:.92rem}.text-\[0\.95rem\]{font-size:.95rem}.text-\[0\.98rem\]{font-size:.98rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[1\.02rem\]{font-size:1.02rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1\.08rem\]{font-size:1.08rem}.text-\[1\.15rem\]{font-size:1.15rem}.text-\[1\.1rem\]{font-size:1.1rem}.text-\[1\.6rem\]{font-size:1.6rem}.text-\[1rem\]{font-size:1rem}.text-\[3\.4rem\]{font-size:3.4rem}.text-\[clamp\(1\.7rem\2c 2\.8vw\2c 2\.4rem\)\]{font-size:clamp(1.7rem,2.8vw,2.4rem)}.text-\[clamp\(1\.9rem\2c 3\.2vw\2c 2\.9rem\)\]{font-size:clamp(1.9rem,3.2vw,2.9rem)}.text-\[clamp\(2rem\2c 3\.6vw\2c 3\.1rem\)\]{font-size:clamp(2rem,3.6vw,3.1rem)}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.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-\[1\.06\]{line-height:1.06}.leading-\[1\.08\]{line-height:1.08}.leading-\[1\.1\]{line-height:1.1}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.tracking-\[0\.12em\]{letter-spacing:.12em}.tracking-\[0\.1em\]{letter-spacing:.1em}.tracking-tight{letter-spacing:-.025em}.text-accent-foreground{--tw-text-opacity:1;color:rgb(var(--accent-fg)/var(--tw-text-opacity,1))}.text-accent-ink{--tw-text-opacity:1;color:rgb(var(--accent-ink)/var(--tw-text-opacity,1))}.text-foreground{--tw-text-opacity:1;color:hsl(var(--foreground)/var(--tw-text-opacity,1))}.text-foreground\/70{color:hsl(var(--foreground)/.7)}.text-foreground\/80{color:hsl(var(--foreground)/.8)}.text-muted-foreground{--tw-text-opacity:1;color:hsl(var(--muted-foreground)/var(--tw-text-opacity,1))}.text-muted-foreground\/50{color:hsl(var(--muted-foreground)/.5)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/35{color:hsla(0,0%,100%,.35)}.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)}.text-white\/85{color:hsla(0,0%,100%,.85)}.text-white\/90{color:hsla(0,0%,100%,.9)}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow-\[0_1px_16px_-6px_rgb\(17_20_28\/0\.18\)\]{--tw-shadow:0 1px 16px -6px rgb(17 20 28/0.18);--tw-shadow-colored:0 1px 16px -6px var(--tw-shadow-color)}.shadow-\[0_1px_16px_-6px_rgb\(17_20_28\/0\.18\)\],.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:var(--shadow-lg);--tw-shadow-colored:var(--shadow-lg)}.shadow-md{--tw-shadow:var(--shadow-md);--tw-shadow-colored:var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-blur-md{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur:blur(12px)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-\[height\]{transition-property:height;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}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.marker\:content-\[\'\'\] ::marker{--tw-content:"";content:var(--tw-content)}.marker\:content-\[\'\'\]::marker{--tw-content:"";content:var(--tw-content)}.last\:border-b-0:last-child{border-bottom-width:0}.hover\:border-accent\/35:hover{border-color:rgb(var(--accent)/.35)}.hover\:bg-accent-ink:hover{--tw-bg-opacity:1;background-color:rgb(var(--accent-ink)/var(--tw-bg-opacity,1))}.hover\:bg-white\/90:hover{background-color:hsla(0,0%,100%,.9)}.hover\:text-accent-ink:hover{--tw-text-opacity:1;color:rgb(var(--accent-ink)/var(--tw-text-opacity,1))}.hover\:text-foreground:hover{--tw-text-opacity:1;color:hsl(var(--foreground)/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--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-visible\:ring-accent\/40:focus-visible{--tw-ring-color:rgb(var(--accent)/0.4)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.focus-visible\:ring-offset-background:focus-visible{--tw-ring-offset-color:hsl(var(--background)/1)}.active\:scale-\[0\.98\]:active{--tw-scale-x:0.98;--tw-scale-y:0.98}.active\:scale-\[0\.98\]:active,.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[open] .group-open\:rotate-45{--tw-rotate:45deg}.group[open] .group-open\:border-accent\/40{border-color:rgb(var(--accent)/.4)}.group[open] .group-open\:text-accent-ink{--tw-text-opacity:1;color:rgb(var(--accent-ink)/var(--tw-text-opacity,1))}.group:hover .group-hover\:scale-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.group:hover .group-hover\:scale-105,.group:hover .group-hover\:scale-\[1\.04\]{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\:scale-\[1\.04\]{--tw-scale-x:1.04;--tw-scale-y:1.04}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:gap-5{gap:1.25rem}.sm\:p-10{padding:2.5rem}.sm\:p-9{padding:2.25rem}.sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}.sm\:py-24{padding-top:6rem;padding-bottom:6rem}}@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-\[1\.5fr_1fr_1fr_1fr\]{grid-template-columns:1.5fr 1fr 1fr 1fr}}@media (min-width:1024px){.lg\:block{display:block}.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-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-\[1\.05fr_0\.95fr\]{grid-template-columns:1.05fr .95fr}.lg\:gap-10{gap:2.5rem}.lg\:gap-20{gap:5rem}.lg\:space-y-28>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(7rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(7rem*var(--tw-space-y-reverse))}.lg\:\[\&\>\*\:first-child\]\:order-2>:first-child{order:2}}
/* ==========================================================================
   Design tokens Omega — porting statico di src/app/globals.css.
   Solo la parte usata dalle pagine pubbliche (home + landing gestionali):
   niente shell gestionale (.app-main-bg, .sidebar-scroll), niente stampa dei
   documenti legali (fuori dal perimetro di questa build). Il resto è
   identico riga per riga alla fonte, perché i due sistemi restino sullo
   stesso family design finché convivono.
   ========================================================================== */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --background: 220 27% 98.2%;
  --foreground: 226 38% 8%;
  --muted: 220 22% 94.8%;
  --muted-foreground: 222 12% 42%;
  --card: 0 0% 100%;
  --card-foreground: 226 38% 8%;
  --border: 220 20% 90.5%;
  --input: 220 18% 87%;
  --ring: 0 72% 51%;
  --radius: 14px;

  --accent: 211 47 47;
  --accent-ink: 185 28 28;
  --accent-soft: 254 242 242;
  --accent-fg: 255 255 255;

  --success: 158 64% 30%;
  --success-soft: 150 60% 95%;
  --warning: 32 95% 38%;
  --warning-soft: 45 95% 94%;
  --danger: 0 72% 44%;
  --danger-soft: 0 86% 96.5%;
  --info: 221 78% 48%;
  --info-soft: 216 90% 95.5%;

  --ink: 5 7 14;
  --ink-soft: 11 18 32;

  /* Palette delle pagine di vendita: bianca, un solo grigio di appoggio, un
     bordo sottilissimo. La carta calda di prima (hue 30, 26% di saturazione)
     tingeva ogni fondo e faceva leggere la pagina come "beige": qui resta
     appena un soffio di caldo nei grigi (hue 30, saturazione bassa) e il
     fondo torna bianco pieno. */
  --mkt-background: 0 0% 100%;
  --mkt-foreground: 220 22% 13%;
  --mkt-muted: 30 14% 97.3%;
  --mkt-muted-foreground: 220 8% 44%;
  --mkt-border: 26 12% 90.5%;
  --mkt-input: 26 12% 86%;
  --mkt-ink: 20 22 30;
  --mkt-ink-soft: 32 36 47;

  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.05);
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05), 0 2px 6px -1px rgb(15 23 42 / 0.06);
  --shadow-md: 0 5px 12px -3px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 16px 36px -10px rgb(15 23 42 / 0.14), 0 6px 16px -8px rgb(15 23 42 / 0.08);
  --shadow-xl: 0 30px 64px -16px rgb(15 23 42 / 0.24), 0 12px 28px -12px rgb(15 23 42 / 0.11);
  --shadow-glow: 0 0 0 1px rgb(var(--accent) / 0.10), 0 10px 34px -8px rgb(var(--accent) / 0.35);
}

.mkt {
  --background: var(--mkt-background);
  --foreground: var(--mkt-foreground);
  --muted: var(--mkt-muted);
  --muted-foreground: var(--mkt-muted-foreground);
  --border: var(--mkt-border);
  --input: var(--mkt-input);
  --ink: var(--mkt-ink);
  --ink-soft: var(--mkt-ink-soft);
  --radius: 12px;
  /* Ombre delle pagine di vendita: una sola, larga e quasi invisibile, al
     posto della scala a cinque gradini del gestionale. Una card non deve
     "staccarsi" dal foglio, deve solo non sparirci dentro. */
  --shadow-sm: 0 1px 2px rgb(17 20 28 / 0.04);
  --shadow-md: 0 2px 4px rgb(17 20 28 / 0.03), 0 10px 26px -14px rgb(17 20 28 / 0.16);
  --shadow-lg: 0 3px 6px rgb(17 20 28 / 0.03), 0 18px 44px -20px rgb(17 20 28 / 0.20);
  --shadow-xl: 0 6px 12px rgb(17 20 28 / 0.04), 0 34px 70px -30px rgb(17 20 28 / 0.24);
  --shadow-glow: 0 10px 26px -12px rgb(var(--accent) / 0.42);
}

/* ==========================================================================
   Griglia: una larghezza sola per tutto il sito. Prima ogni sezione ripeteva
   `max-w-6xl` (1152px) e a 1600px di schermo restavano 220px di margine per
   lato: la pagina leggeva stretta. Qui il contenuto arriva a 1360px e il
   respiro laterale cresce con lo schermo invece di essere fisso a 20px.
   `.wrap-tight` è per i blocchi che devono restare leggibili a riga corta
   (FAQ, testi lunghi): la larghezza della pagina non è la larghezza della
   riga di testo.
   ========================================================================== */
.wrap {
  width: 100%;
  margin-inline: auto;
  max-width: 1360px;
  padding-inline: clamp(1.25rem, 3.6vw, 2.75rem);
}
.wrap-tight {
  width: 100%;
  margin-inline: auto;
  max-width: 940px;
  padding-inline: clamp(1.25rem, 3.6vw, 2.75rem);
}

/* ==========================================================================
   HERO A TUTTO SCHERMO — il video sta sotto, il testo ci sta sopra.

   Regole del blocco, tutte per lo stesso motivo (il testo deve restare
   leggibile su una ripresa che non controlliamo):
    · il velo non è una tinta piatta ma due gradienti sovrapposti — uno
      verticale che scurisce cima (dove passa la barra) e fondo (dove sta il
      testo), uno da sinistra che protegge la colonna scritta lasciando
      respirare la parte destra dell'immagine;
    · il rientro di 4rem in cima: la barra del sito è `sticky`, quindi resta
      in flusso e occupa la sua altezza (h-16). Senza il margine negativo il
      video comincerebbe SOTTO l'header invece di scorrergli dietro;
    · niente parallax e niente zoom sul video: si muove già da sé, un
      secondo movimento sopra si legge come rumore.
   ========================================================================== */
.hero-full {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 34rem;
  min-height: min(92svh, 60rem);
  margin-top: -4rem;
  background: rgb(8 10 14);
  color: #fff;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Il video sta SOPRA il fermo-immagine e si accende in dissolvenza solo
   quando parte davvero (site.js scrive `data-playing`): senza, fra il momento
   in cui la sorgente viene iniettata e il primo fotogramma si vedrebbe un
   buco nero al posto dell'hero. Vale anche per le due landing con foglio
   proprio (Tattoo, People): stesso attributo, stessa regola. */
video[data-hero-video] {
  opacity: 0;
  transition: opacity 0.7s ease;
}
video[data-hero-video][data-playing='1'] {
  opacity: 1;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(8 10 14 / 0.66) 0%, rgb(8 10 14 / 0.20) 30%, rgb(8 10 14 / 0.42) 64%, rgb(8 10 14 / 0.86) 100%),
    linear-gradient(96deg, rgb(8 10 14 / 0.74) 0%, rgb(8 10 14 / 0.46) 44%, rgb(8 10 14 / 0.08) 74%, rgb(8 10 14 / 0) 90%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: calc(4rem + clamp(2.5rem, 8vh, 5rem));
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}
.hero-copy {
  max-width: 46rem;
}
/* Un'ombra appena percettibile sotto il titolo: non si vede come effetto, si
   vede solo quando manca — su un fotogramma chiaro il bianco su bianco. */
.hero-copy h1 {
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.42);
}
.hero-copy p {
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.38);
}
/* La riga in accento del titolo: sul chiaro era il colore pieno dell'edizione,
   sul video non reggerebbe (il rosso di casa su fondo scuro vibra). Qui è lo
   stesso colore schiarito verso il bianco, così ogni gestionale mantiene la
   sua tinta senza perdere leggibilità. Il fallback è bianco pieno. */
.hero-accent {
  color: #fff;
}
@supports (color: color-mix(in srgb, red, white)) {
  .hero-accent {
    color: color-mix(in srgb, rgb(var(--accent)) 58%, #fff);
  }
}

@media (max-width: 640px) {
  .hero-full {
    min-height: min(88svh, 46rem);
  }
  /* Su telefono il testo occupa tutta la larghezza, quindi il gradiente da
     sinistra non protegge niente: copre solo la foto — che qui, senza video,
     è tutto quello che c'è. Resta il solo velo verticale. */
  .hero-scrim {
    background: linear-gradient(180deg, rgb(8 10 14 / 0.62) 0%, rgb(8 10 14 / 0.30) 34%, rgb(8 10 14 / 0.54) 68%, rgb(8 10 14 / 0.88) 100%);
  }
}

/* Ritmo verticale unico fra le sezioni. */
.section {
  padding-block: clamp(3.5rem, 5.5vw, 5.5rem);
}
.section-sm {
  padding-block: clamp(2.5rem, 4vw, 4rem);
}

* {
  border-color: hsl(var(--border));
}

html {
  scroll-behavior: smooth;
}

body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow-x: clip;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

::selection {
  background: rgb(var(--accent));
  color: rgb(var(--accent-fg));
}

.headline {
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.headline-hero {
  letter-spacing: -0.045em;
  text-wrap: balance;
  line-height: 1.02;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}

.glass {
  background: hsl(var(--background) / 0.68);
  backdrop-filter: saturate(1.9) blur(14px);
  -webkit-backdrop-filter: saturate(1.9) blur(14px);
}
.glass-card {
  background: hsl(var(--card) / 0.66);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
}

.hover-lift {
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hover-lift:hover { transform: none; }
}

.border-grad {
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(var(--card)), hsl(var(--card))) padding-box,
    linear-gradient(150deg, rgb(var(--accent) / 0.55), hsl(var(--border)) 42%, hsl(var(--border)) 65%, rgb(var(--accent) / 0.3)) border-box;
}
.border-grad-ink {
  border: 1px solid transparent;
  background:
    linear-gradient(rgb(var(--ink-soft)), rgb(var(--ink-soft))) padding-box,
    linear-gradient(150deg, rgb(var(--accent) / 0.6), rgb(255 255 255 / 0.14) 45%, rgb(255 255 255 / 0.08) 70%, rgb(var(--accent) / 0.35)) border-box;
}

@media (max-width: 640px) {
  .tap { min-height: 44px; }
}

/* Fascia d'invito a fondo pagina: un colore pieno, non più quattro aloni
   sfumati sovrapposti al nero con sopra la grana. Il colore lo porta il tema
   del gestionale, quindi la fascia cambia da sola pagina per pagina. */
.cta-band {
  background: linear-gradient(180deg, rgb(var(--accent)) 0%, rgb(var(--accent-ink)) 100%);
}

/* --------------------------------------------------------- barra del sito

   Due stati, un attributo solo: `data-over-hero`. Finché la barra sta sopra
   l'hero a tutto schermo è trasparente e scrive in bianco; appena si scorre
   torna la barra chiara di sempre. Tutto quello che cambia colore è elencato
   qui sotto e dipende da quell'unico attributo — è la protezione contro il
   bug dell'08/08 (logo bianco su barra bianca), che nasceva da due pezzi di
   stato tenuti separati e finiti fuori sincrono. */
.site-header {
  --logo-ink: rgb(var(--accent));
  background-color: hsl(var(--background) / 0.85);
  border-bottom: 1px solid hsl(var(--border));
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.3s ease;
}
.site-header[data-over-hero='1'] {
  --logo-ink: #fff;
  background-color: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header[data-over-hero='1'] .logo-word,
.site-header[data-over-hero='1'] .hdr-tag {
  color: #fff;
}
.site-header[data-over-hero='1'] .hdr-login {
  color: rgb(255 255 255 / 0.82);
}
.site-header[data-over-hero='1'] .hdr-login:hover {
  color: #fff;
}
.site-header[data-over-hero='1'] .hdr-sep {
  background-color: rgb(255 255 255 / 0.32);
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.22, 0.7, 0.25, 1), transform 0.5s cubic-bezier(0.22, 0.7, 0.25, 1);
}
.reveal.reveal-left { transform: translateX(-18px); }
.reveal.reveal-right { transform: translateX(18px); }
.reveal.reveal-scale { transform: scale(0.985); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Punto "vivo" nei mockup di prodotto (niche-signature): un respiro lento sul
   pallino verde della barra del titolo — la stessa convenzione dei prodotti
   veri per dire "in esecuzione", non un effetto decorativo a sé. */
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.live-dot { animation: live-pulse 2.2s ease-in-out infinite; }

.browser-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-lg);
  background: hsl(var(--card));
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
}
.browser-dot { width: 10px; height: 10px; border-radius: 999px; background: hsl(var(--border)); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .live-dot { animation: none; opacity: 1; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
}

/* ==========================================================================
   Marketing kit — tipografia display, eyebrow, headline a righe, reveal
   nativo legato allo scroll. Identico a globals.css, non è scoped a `.mkt`
   nella fonte quindi non lo è nemmeno qui.
   ========================================================================== */
.display {
  font-family: var(--font-display);
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.display-hero {
  font-family: var(--font-display);
  letter-spacing: -0.034em;
  line-height: 1.04;
  text-wrap: balance;
}

/* L'occhiello non è più un'etichetta maiuscola con il trattino davanti in
   ogni sezione: resta una parola sola, piccola, nel colore d'accento. Meno
   segni per sezione = pagina più silenziosa. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgb(var(--accent-ink));
}
.eyebrow-light { color: rgb(255 255 255 / 0.75); }

.headline-line {
  display: block;
  animation: headline-drop 0.7s cubic-bezier(0.16, 0.9, 0.24, 1) both;
}
@keyframes headline-drop {
  from { opacity: 0; transform: translateY(0.22em); }
  to { opacity: 1; transform: none; }
}

/* Foto e mockup entrano da soli mentre la sezione sale: una risalita corta,
   dal compositor, senza JS. Ha sostituito i tre parallax di prima (hero,
   media, zoom dell'hero), che muovevano immagini per tutta la pagina —
   piacevole una volta, rumoroso per dodici sezioni di fila. */
@supports (animation-timeline: view()) {
  .view-rise {
    animation: view-rise 1ms linear both;
    animation-timeline: view();
    animation-range: entry 6% entry 52%;
  }
}
@keyframes view-rise {
  from { opacity: 0.001; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* Riempimento del filo dei passaggi (`steps()` in sections.ts): sopra al
   trattino statico esistente, un secondo filo pieno che si allunga da
   sinistra mentre la sezione attraversa il viewport — rinforza "sono in
   sequenza" senza aggiungere altro. Fuori da `@supports`/reduced-motion resta
   `scaleX(1)`, cioè un filo pieno fermo: mai un filo "a metà" per chi non
   vede l'animazione. */
.steps-fill { transform-origin: left center; }
@supports (animation-timeline: view()) {
  /* La timeline è quella del CONTENITORE dei passi (`.steps-track`), non del
     filo stesso: un elemento alto 2px entra ed esce dallo schermo in due
     pixel di scorrimento, quindi la sua fase "entry" durerebbe due pixel e
     il riempimento sarebbe uno scatto invece di una crescita. Nominare la
     timeline sul contenitore (che ha un'altezza vera) e farla leggere al
     filo risolve — stessa causa, stesso fix, trovato in parallelo anche
     nelle pagine bespoke di Tattoo e People. */
  .steps-track { view-timeline-name: --steps-track; }
  .steps-fill {
    animation: steps-fill-grow 1ms linear both;
    animation-timeline: --steps-track;
    animation-range: entry 15% entry 85%;
  }
}
@keyframes steps-fill-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.cv-auto {
  /* intenzionalmente vuoto — vedi commento nella fonte */
}

@media (hover: hover) {
  .arrow-slide svg { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .arrow-slide:hover svg { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .view-rise, .headline-line, .steps-fill {
    animation: none; opacity: 1; transform: none; scale: none; translate: none;
  }
}

/* ---- Font self-hosted (Inter, unico, subset latin) ------------------------
   Un solo carattere su tutta la pagina: niente serif d'accento, l'accento è
   solo colore (vedi `serif()`/`accentText()` in sections.ts). `--font-display`
   resta come variabile/hook usata da titoli e bespoke (tattoo.css/people.css)
   invece di essere rimossa ovunque: punta allo stesso stack di `--font-sans`,
   così i pesi alti (700/800/900) restano l'unico modo di fare gerarchia. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);
}

/* ==========================================================================
   LA LANDING DI OMEGA PEOPLE — foglio di stile SUO.

   È un CSS Module: ogni classe viene rinominata in build, quindi questa pagina
   non può toccare le altre e le altre non possono toccare lei. Vale la stessa
   ragione della landing di Omega Tattoo: un'identità forte senza imporla al
   resto del sito.

   L'IDENTITÀ. Tattoo è nera, sporca, di grana. People è l'opposto e deve
   esserlo: si vende ordine. Quindi bianco, blu d'inchiostro, righe sottili, e
   un motivo che ritorna ovunque — la GRIGLIA del calendario del personale
   (colonne = giorni, righe = persone), che è anche la schermata che in questo
   mestiere si guarda più di ogni altra. La griglia compare come fondo tenue
   delle sezioni chiare, come vetro nell'hero e come barra piena nei dati.

   Due regole tenute per tutto il file:
    · si animano solo `opacity` e `transform` (girano sul compositor: restano
      fluide quanto lo scroll anche su un telefono vecchio);
    · nessuna animazione può lasciare contenuto invisibile se il browser non la
      supporta o se l'utente ha chiesto meno movimento.
   ========================================================================== */

.pp-page {
  /* Palette PROPRIA: la pagina non legge le variabili del tema condiviso, così
     non si rompe se quelle cambiano altrove. L'accento dell'edizione (#4f46e5)
     resta il riferimento, ma sul fondo scuro serve la versione chiara — un
     indaco pieno su quasi-nero non si legge. */
  --pp-ink: 10 13 28;
  --pp-accent: #4f46e5;
  --pp-accent-dark: #a5b4fc;
  --pp-accent-soft: #eef2ff;
  --pp-line: #e5e7ef;
  --pp-line-strong: #d3d7e4;
  --pp-surface: #ffffff;
  --pp-fg: #12141d;
  --pp-muted: #6b7185;
  --pp-wash: #f7f8fc;
  --pp-good: #10b981;
  --pp-warn: #f59e0b;
  color: var(--pp-fg);
  background: var(--pp-surface);
}

/* --------------------------------------------------------------- struttura */

.pp-section { padding-block: clamp(3.5rem, 5.5vw, 5.5rem); }
.pp-wrap {
  margin-inline: auto;
  width: 100%;
  max-width: 85rem;
  padding-inline: clamp(1.25rem, 3.6vw, 2.75rem);
}
.pp-narrow { max-width: 52rem; }
.pp-center { text-align: center; }
.pp-centerText { margin-inline: auto; }
.pp-blockGap { margin-top: clamp(1.6rem, 4.5vw, 2.8rem); }

.pp-dark {
  position: relative;
  overflow: hidden;
  background: rgb(var(--pp-ink));
  color: #fff;
}
.pp-wash {
  position: relative;
  background: var(--pp-wash);
  border-block: 1px solid var(--pp-line);
}

/* Il motivo della casa: la griglia del calendario, appena percepibile. Sta
   dietro al contenuto e non intercetta mai il puntatore. */
.pp-ruled::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(79 70 229 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(79 70 229 / 0.05) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}
.pp-dark.pp-ruled::before {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / 0.05) 1px, transparent 1px);
}

/* --------------------------------------------------------------- tipografia */

.pp-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pp-accent);
}
.pp-eyebrow.pp-center { justify-content: center; }
/* Restano due sole superfici scure in tutta la pagina (la fascia d'invito e
   il manifesto): questi aiutanti valgono lì dentro, e sul chiaro tornano ai
   colori normali invece di scrivere bianco su bianco. */
.pp-onDark { color: var(--pp-accent); }
.pp-dark .pp-onDark { color: var(--pp-accent-dark); }

.pp-h2 {
  margin-top: 0.8rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5.2vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.pp-h3 { margin-top: 0.8rem; font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 700; }
.pp-lead {
  margin-top: 1.1rem;
  max-width: 46rem;
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  line-height: 1.65;
  color: var(--pp-muted);
}
.pp-leadOnDark { color: var(--pp-muted); }
.pp-dark .pp-leadOnDark { color: rgb(255 255 255 / 0.6); }
.pp-body { margin-top: 0.75rem; line-height: 1.7; font-size: 0.94rem; color: var(--pp-muted); }
.pp-note { margin-top: 2rem; max-width: 48rem; font-size: 0.86rem; line-height: 1.7; color: var(--pp-muted); }
.pp-note strong { color: var(--pp-fg); font-weight: 650; }
.pp-dark .pp-note { color: rgb(255 255 255 / 0.45); }
.pp-dark .pp-note strong { color: rgb(255 255 255 / 0.8); }

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

/* Hero a tutto schermo, come tutte le altre landing: il video del lavoro vero
   sta sotto e riempie il primo schermo. Il calendario del personale — la vista
   che in questo mestiere si guarda ogni giorno — resta dov'era, a destra, ma
   su carta bianca appoggiata sopra il video: è l'unica cosa chiara dentro un
   riquadro scuro, quindi è la prima che l'occhio va a leggere. */
.pp-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 34rem;
  min-height: min(92svh, 60rem);
  margin-top: -4rem;
  background: rgb(var(--pp-ink));
  color: #fff;
}
.pp-heroMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-heroScrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(9 11 20 / 0.68) 0%, rgb(9 11 20 / 0.22) 30%, rgb(9 11 20 / 0.38) 66%, rgb(9 11 20 / 0.80) 100%),
    linear-gradient(96deg, rgb(9 11 20 / 0.72) 0%, rgb(9 11 20 / 0.44) 44%, rgb(9 11 20 / 0.12) 78%, rgb(9 11 20 / 0.06) 100%);
}
.pp-heroBody {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: calc(4rem + clamp(2.5rem, 7vh, 4.5rem)) clamp(3rem, 7vh, 5rem);
}

/* Il vestito scuro dell'hero: le stesse classi della pagina chiara, ribaltate
   una volta sola qui invece che duplicate in HTML. */
.pp-hero .pp-h1 { text-shadow: 0 2px 30px rgb(0 0 0 / 0.42); }
.pp-hero .pp-h1 em { color: #c3cbff; }
.pp-hero .pp-heroSub { color: rgb(255 255 255 / 0.82); text-shadow: 0 1px 16px rgb(0 0 0 / 0.38); }
.pp-hero .pp-ctaGhost { color: #fff; }
/* Il calendario resta carta bianca dentro un hero scuro: senza questa riga il
   suo titolo eredita il bianco dell'hero e sparisce nella card (visto a
   schermo: la card usciva senza intestazione). */
.pp-hero .pp-heroCard { color: var(--pp-fg); }
@media (max-width: 640px) {
  .pp-hero { min-height: min(88svh, 46rem); }
  .pp-heroScrim {
    background: linear-gradient(180deg, rgb(9 11 20 / 0.62) 0%, rgb(9 11 20 / 0.34) 34%, rgb(9 11 20 / 0.56) 68%, rgb(9 11 20 / 0.88) 100%);
  }
}
.pp-hero .pp-chipSolo {
  border-color: rgb(255 255 255 / 0.22);
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.pp-heroLayout { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 1000px) {
  .pp-heroLayout { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

.pp-h1 {
  font-family: var(--font-display);
  /* Colonna testo stretta (grid a due colonne da 1000px in su, ~560px di
     spazio): un display size pensato per un hero a piena larghezza (era
     8.4vw/5.8rem) qui andava a capo 3 volte per riga — misurato a schermo,
     non a occhio. */
  font-size: clamp(2.3rem, 4.2vw, 3.9rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.pp-h1 span { display: block; }
.pp-h1 em { font-style: normal; font-weight: 800; color: var(--pp-accent); }
.pp-heroSub {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 40rem;
  font-size: clamp(1rem, 1.9vw, 1.15rem);
  line-height: 1.65;
  color: var(--pp-muted);
}
.pp-heroActions {
  margin-top: clamp(1.5rem, 4vw, 2.2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.pp-chipSolo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--pp-muted);
  margin-bottom: 1.25rem;
}

.pp-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  background: var(--pp-accent);
  color: #fff;
  padding: 0.85rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 10px 26px -14px rgb(79 70 229 / 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.pp-cta:hover { transform: translateY(-2px); background: #4338ca; box-shadow: 0 18px 40px -14px rgb(79 70 229 / 0.95); }
.pp-ctaGhost {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--pp-fg);
  opacity: 0.8;
}
.pp-ctaGhost:hover { opacity: 1; }
/* Dentro la fascia scura di fondo pagina i ruoli si invertono. */
.pp-dark .pp-cta { background: #fff; color: rgb(var(--pp-ink)); box-shadow: none; }
.pp-dark .pp-cta:hover { background: rgb(255 255 255 / 0.9); }
.pp-dark .pp-ctaGhost { color: #fff; }
.pp-ctaTitle { margin-inline: auto; max-width: 20ch; }
.pp-ctaRow { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

.pp-chips { margin-top: clamp(1.4rem, 3.5vw, 1.9rem); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pp-chipsCenter { justify-content: center; }
.pp-chip {
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.16);
  background: rgb(255 255 255 / 0.06);
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.82);
  backdrop-filter: blur(6px);
}

/* Le due righe del titolo si posano sfalsate. */
.pp-line { animation: pp-drop 0.9s cubic-bezier(0.16, 0.9, 0.24, 1) both; }
.pp-line2 { animation-delay: 0.14s; }
@keyframes pp-drop {
  from { opacity: 0; transform: translateY(0.4em); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------- il calendario dell'hero */

/* Non è una decorazione: è la vista che in questo mestiere si guarda ogni
   giorno — righe le persone, colonne i giorni, barre le assenze. Sta
   nell'hero perché dice in un colpo d'occhio cosa si compra. */
.pp-heroCard {
  border-radius: 1.25rem;
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  padding: clamp(1rem, 2.6vw, 1.4rem);
  box-shadow: 0 6px 12px rgb(17 20 28 / 0.04), 0 34px 70px -30px rgb(17 20 28 / 0.24);
  animation: pp-rise 0.9s cubic-bezier(0.16, 0.9, 0.24, 1) 0.2s both;
}
.pp-heroCardHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--pp-line);
}
.pp-heroCardTitle { font-size: 0.9rem; font-weight: 700; }
.pp-heroCardSub { font-size: 0.68rem; color: var(--pp-muted); }

.pp-calRow {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.3rem;
}
.pp-calName {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pp-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pp-calDays { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 2px; }
.pp-calHead .pp-calName { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pp-muted); }
.pp-calDayLabel {
  text-align: center;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--pp-muted);
  font-variant-numeric: tabular-nums;
}
.pp-calCell {
  height: 1.35rem;
  border-radius: 3px;
  background: var(--pp-wash);
}
.pp-calWeekend { background: #eef0f6; }
.pp-calOn { background: var(--pp-accent); }
.pp-calOnSoft { background: rgb(79 70 229 / 0.45); }
/* Le richieste in attesa sono un'ipotesi, non un fatto: tratteggiate. */
.pp-calPending {
  background: repeating-linear-gradient(135deg, rgb(79 70 229 / 0.45) 0 3px, transparent 3px 6px);
  box-shadow: inset 0 0 0 1px rgb(79 70 229 / 0.4);
}
.pp-calStart { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.pp-calEnd { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.pp-calFoot {
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--pp-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.66rem;
  color: var(--pp-muted);
}
.pp-calKey { display: inline-flex; align-items: center; gap: 0.35rem; }
.pp-calSwatch { height: 0.55rem; width: 1.1rem; border-radius: 999px; }

/* --------------------------------------------------- la fascia sotto l'hero */

/* I tre fatti che valgono per tutto Omega, in una riga quieta: chiudono l'hero
   e aprono la pagina chiara senza rubare spazio a una sezione vera. */
.pp-strip { border-bottom: 1px solid var(--pp-line); background: var(--pp-wash); }
.pp-stripRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 2rem;
  padding-block: 1.1rem;
}
.pp-stripItem {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--pp-muted);
}
.pp-stripItem svg { color: var(--pp-accent); }

/* ------------------------------------------------------------- la comparsa */

.pp-reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pp-reveal {
      animation: pp-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }
  }
}
@keyframes pp-rise {
  from { opacity: 0; transform: translateY(1.6rem); }
  to { opacity: 1; transform: none; }
}

/* Lo sfasamento per colonna. Le voci di una stessa riga entrano nel campo
   visivo nello stesso istante: senza uno scarto, una griglia di quattro
   voci si posa tutta in un fotogramma solo e sembra un blocco unico.
   Non è un ritardo — su una linea temporale che segue lo scorrimento
   `animation-delay` non conta niente — è la stessa animazione spostata più
   avanti nella corsa dell'elemento. Sono modificatori di `.pp-reveal`: da
   soli non nascondono niente, quindi non c'è modo che lascino un testo
   invisibile se qualcosa va storto. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pp-d1 { animation-range: entry 9% entry 51%; }
    .pp-d2 { animation-range: entry 14% entry 56%; }
    .pp-d3 { animation-range: entry 19% entry 61%; }
  }
}

/* L'altra comparsa: non quella di chi scorre, ma quella di un contenuto che
   cambia sotto le mani — un cursore che si sposta, una risposta che si apre.
   Il testo nuovo sale di quattro pixel invece di sostituire il vecchio di
   scatto. Una sola dissolvenza per tutta la pagina, riusata da tutti. */
.pp-fadeIn { animation: pp-fade 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes pp-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- griglie */

.pp-grid2 { display: grid; gap: 1.25rem; }
.pp-grid3 { display: grid; gap: 1rem; }
.pp-grid4 { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .pp-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .pp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pp-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  transition: border-color 0.25s ease;
}
/* Le card raccontano obblighi di legge e passaggi d'ingresso e d'uscita:
   sotto il puntatore cambia il bordo e basta. Niente sollevamento, che qui
   sarebbe fuori tono. */
@media (hover: hover) and (pointer: fine) {
  .pp-card:hover { border-color: rgb(79 70 229 / 0.32); }
}
.pp-cardBody { padding: clamp(1.2rem, 3vw, 1.7rem); }

.pp-feature {
  border-radius: 1rem;
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  padding: clamp(1.1rem, 2.5vw, 1.4rem);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* La scatola col bordo è un privilegio, non l'unità di misura della pagina:
   la tengono solo le due griglie che devono farsi guardare (le timbrature e
   gli obblighi). Tutti gli altri elenchi sono `.pp-item`, più sotto: stessa
   informazione, un filo d'accento invece di un riquadro. */
.pp-feature:hover {
  border-color: rgb(79 70 229 / 0.35);
  box-shadow: 0 18px 40px -28px rgb(23 27 64 / 0.55);
  transform: translateY(-2px);
}
.pp-featureIcon {
  display: grid;
  place-items: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.8rem;
  background: var(--pp-accent-soft);
  color: var(--pp-accent);
  box-shadow: inset 0 0 0 1px rgb(79 70 229 / 0.12);
}
.pp-featureTitle { margin-top: 0.85rem; font-weight: 700; font-size: 0.98rem; }
.pp-featureDesc { margin-top: 0.4rem; font-size: 0.88rem; line-height: 1.6; color: var(--pp-muted); }

/* ------------------------------------------------------------- gli elenchi */
/* La voce di elenco della pagina: un filo d'accento sopra e basta. La usano
   tutte le liste lunghe — ferie, turni, numeri, funzioni, paghe — così un
   elenco di quindici voci resta un elenco e non diventa un muro di riquadri.
   Vale sia sul chiaro sia sull'inchiostro. */
.pp-item { border-top: 2px solid rgb(79 70 229 / 0.22); padding-top: 0.85rem; transition: border-top-color 0.25s ease; }
/* La risposta al puntatore è il filo stesso che si accende: la voce non si
   alza, non si allarga, non prende un'ombra. In un elenco di quindici voci
   qualunque movimento sarebbe rumore — qui serve solo a dire «sei su
   questa». Dove il puntatore non esiste non succede niente. */
@media (hover: hover) and (pointer: fine) {
  .pp-item:hover { border-top-color: var(--pp-accent); }
  .pp-dark .pp-item:hover { border-top-color: var(--pp-accent-dark); }
}
.pp-itemTitle {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
}
.pp-itemTitle svg { flex: 0 0 auto; margin-top: 0.15rem; color: var(--pp-accent); }
.pp-itemMeta { margin-top: 0.3rem; font-size: 0.78rem; font-weight: 650; color: var(--pp-accent); }
.pp-itemDesc { margin-top: 0.45rem; font-size: 0.88rem; line-height: 1.62; color: var(--pp-muted); }
.pp-dark .pp-item { border-top-color: rgb(165 180 252 / 0.35); }
.pp-dark .pp-itemTitle svg,
.pp-dark .pp-itemMeta { color: var(--pp-accent-dark); }
.pp-dark .pp-itemDesc { color: rgb(255 255 255 / 0.55); }
/* Senza cornice le colonne hanno bisogno di aria fra loro, o due voci vicine
   si leggono come una sola. */
.pp-spread { gap: 1.6rem 2.25rem; }

/* ---------------------------------------------------------- il mese (flow) */

.pp-flow { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 1000px) { .pp-flow { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); align-items: center; } }

.pp-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.pp-stepBtn {
  display: flex;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  border-radius: 1rem;
  padding: 0.75rem;
  transition: background-color 0.25s ease;
}
.pp-stepBtn:hover { background: rgb(79 70 229 / 0.04); }
.pp-stepDot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--pp-line-strong);
  color: var(--pp-muted);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.pp-stepOn { background: rgb(79 70 229 / 0.05); }
.pp-stepOn .pp-stepDot { background: var(--pp-accent); border-color: var(--pp-accent); color: #fff; }
.pp-stepStep { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pp-accent); }
.pp-stepTitle { display: block; margin-top: 0.15rem; font-size: 0.95rem; font-weight: 650; line-height: 1.35; }
.pp-stepDesc { display: block; margin-top: 0.5rem; font-size: 0.88rem; line-height: 1.6; color: var(--pp-muted); }
.pp-stepKicker {
  display: inline-block;
  margin-top: 0.6rem;
  border-radius: 999px;
  background: var(--pp-accent-soft);
  color: #4338ca;
  padding: 0.25rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.pp-rail { height: 3px; flex: 1; overflow: hidden; border-radius: 999px; background: rgb(79 70 229 / 0.15); }
.pp-railFill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--pp-accent);
  transform-origin: left center;
  animation: pp-fill linear forwards;
}
@keyframes pp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pp-screen {
  position: relative;
  overflow: hidden;
  border-radius: 1.4rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(var(--pp-ink));
  padding: clamp(1rem, 3vw, 1.35rem);
  box-shadow: 0 30px 70px -28px rgb(10 13 28 / 0.7);
}
.pp-screenBar { margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.35rem; }
.pp-screenDot { height: 7px; width: 7px; border-radius: 999px; background: rgb(255 255 255 / 0.2); }
.pp-screenName {
  margin-left: 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.3);
}
.pp-screenBody { min-height: 18rem; color: #fff; animation: pp-swap 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes pp-swap {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Elementi delle finte schermate (il pannello scuro del flow). */
.pp-panelHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  padding-bottom: 0.7rem;
}
.pp-panelTitle { font-size: 0.88rem; font-weight: 700; }
.pp-panelSub { font-size: 0.68rem; color: rgb(255 255 255 / 0.45); }
.pp-panelBody { margin-top: 0.9rem; display: grid; gap: 0.6rem; align-content: start; }
.pp-box { border-radius: 0.8rem; border: 1px solid rgb(255 255 255 / 0.1); padding: 0.7rem; }
.pp-boxOn { border-color: rgb(165 180 252 / 0.4); background: rgb(99 102 241 / 0.12); }
.pp-boxGood { border-color: rgb(16 185 129 / 0.35); background: rgb(16 185 129 / 0.08); }
.pp-boxWarn { border-color: rgb(245 158 11 / 0.35); background: rgb(245 158 11 / 0.08); }
.pp-boxDim { opacity: 0.5; }
.pp-line2col { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: 0.8rem; }
.pp-lineLabel { color: rgb(255 255 255 / 0.5); }
.pp-lineValue { font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-lineStrong { font-weight: 800; }
.pp-lineGood { color: #6ee7b7; }
.pp-lineWarn { color: #fcd34d; }
.pp-tagRow { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pp-tag {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  background: var(--pp-wash);
  color: var(--pp-muted);
  padding: 0.18rem 0.55rem;
  font-size: 0.66rem;
  font-weight: 600;
}
.pp-dark .pp-tag { border-color: rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.1); color: rgb(255 255 255 / 0.7); }
.pp-tagGood { background: rgb(16 185 129 / 0.16); color: #6ee7b7; }
.pp-tagWarn { background: rgb(245 158 11 / 0.16); color: #fcd34d; }
.pp-tagAccent { background: rgb(99 102 241 / 0.2); color: var(--pp-accent-dark); }
.pp-meter { height: 6px; border-radius: 999px; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.pp-meterFill { display: block; height: 100%; border-radius: 999px; background: var(--pp-accent-dark); }
.pp-rows { margin-top: 0.6rem; display: grid; gap: 0.4rem; }
.pp-rowLine {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-radius: 0.7rem;
  background: rgb(255 255 255 / 0.05);
  padding: 0.55rem 0.8rem;
  font-size: 0.82rem;
}
.pp-rowDim { color: rgb(255 255 255 / 0.45); }

/* ------------------------------------------------------------- il telefono */

.pp-phoneWrap { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; }
@media (min-width: 900px) { .pp-phoneWrap { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); } }
/* La scocca, e dentro la fotografia della schermata vera dell'app: il
   riquadro nero serve solo a dire «questo è un telefono». Gli angoli
   arrotondati li porta l'immagine, che sotto la cornice non deve sbordare. */
.pp-phone {
  margin-inline: auto;
  width: min(16.5rem, 100%);
  border-radius: 2.4rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(var(--pp-ink));
  padding: 0.7rem;
  box-shadow: 0 40px 80px -34px rgb(10 13 28 / 0.85);
}
.pp-phoneShot { display: block; width: 100%; height: auto; border-radius: 1.9rem; }
.pp-phoneNote {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--pp-muted);
}

.pp-checkList { margin-top: 1.4rem; display: grid; gap: 0.7rem; }
.pp-checkItem { display: flex; gap: 0.6rem; font-size: 0.94rem; line-height: 1.5; }
.pp-checkIcon { flex: 0 0 auto; margin-top: 0.15rem; color: var(--pp-accent); }

.pp-storeRow { margin-top: 1.7rem; padding-top: 1.5rem; border-top: 1px solid var(--pp-line); }
.pp-storeLabel {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pp-muted);
}
.pp-storeBadges { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.pp-storeBadge {
  display: inline-flex;
  border-radius: 0.6rem;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.pp-storeBadge img { display: block; height: 2.5rem; width: auto; }
.pp-storeBadge:hover { transform: translateY(-2px); opacity: 0.88; }
.pp-storeBadge:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; }

/* ------------------------------------------------------------ il muro */

.pp-wallMask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.pp-wallRow { display: flex; width: max-content; gap: 0.6rem; animation: pp-slide 64s linear infinite; }
/* Chi si ferma su una fotografia la vuole guardare: il nastro si ferma con
   lui. Solo dove c'è un puntatore vero — su un telefono non succede mai. */
@media (hover: hover) and (pointer: fine) {
  .pp-wallMask:hover .pp-wallRow { animation-play-state: paused; }
}
@keyframes pp-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pp-tile {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.08);
  width: clamp(7.5rem, 22vw, 13rem);
  aspect-ratio: 3 / 4;
}
.pp-tile img { height: 100%; width: 100%; object-fit: cover; }
.pp-tileCaption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 1.4rem 0.7rem 0.6rem;
  background: linear-gradient(to top, rgb(10 13 28 / 0.85), transparent);
  font-size: 0.72rem;
  font-weight: 650;
  color: #fff;
}
/* Il grigio sulle fotografie esiste solo dove c'è un puntatore che possa
   toglierlo: su un telefono l'hover non arriva mai. */
.pp-photo { transition: filter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) and (pointer: fine) {
  .pp-photo { filter: grayscale(0.85) contrast(1.05); }
  .pp-tile:hover .pp-photo { filter: none; transform: scale(1.04); }
}

/* I file che entrano e che escono stavano su un secondo nastro che scorreva:
   due movimenti nella stessa pagina si disturbano, e questo elenco si legge,
   non si guarda passare. Fermo e a capo. */
.pp-pillRow { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pp-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  padding: 0.6rem 1.2rem;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------- il manifesto */

.pp-manifesto {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(66svh, 38rem);
  overflow: hidden;
  color: #fff;
}
.pp-manifestoMedia { position: absolute; inset: 0; z-index: -2; height: 100%; width: 100%; object-fit: cover; }
/* È il momento più largo della pagina, ed era l'unico completamente fermo.
   La fotografia scorre più lenta del testo che ci sta sopra: piano — la
   deriva è di quattro centesimi dell'altezza da un capo all'altro dello
   schermo — perché questa pagina vende ordine, non effetti. Vale quanto
   detto sopra per l'hero: `translate` separato da `transform`, la scala solo
   dove l'animazione esiste davvero, e la sezione ritaglia già quello che
   esce (`overflow: hidden`). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pp-manifestoMedia {
      scale: 1.14;
      animation: pp-manifestoDrift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes pp-manifestoDrift {
  from { translate: 0 4%; }
  to { translate: 0 -4%; }
}
.pp-manifestoVeil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Due strati: uno orizzontale che tiene scuro il lato del testo, uno piatto
     che abbassa comunque tutta la fotografia. Senza il secondo, la seconda riga
     del manifesto — che è volutamente più tenue — finiva sopra le zone chiare
     della foto e si leggeva a fatica. */
  background:
    linear-gradient(90deg, rgb(var(--pp-ink) / 0.96) 0%, rgb(var(--pp-ink) / 0.88) 55%, rgb(var(--pp-ink) / 0.7) 100%),
    rgb(var(--pp-ink) / 0.35);
}
.pp-manifesto .pp-wrap { padding-block: clamp(4rem, 12vw, 7rem); }
.pp-manifestoText {
  margin-top: 0.8rem;
  max-width: 22ch;
  font-size: clamp(1.8rem, 5.6vw, 3.1rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.pp-manifestoDim { color: rgb(255 255 255 / 0.58); }

/* ------------------------------------------------------------- i passi */

.pp-stepNum { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--pp-accent); opacity: 0.28; }
.pp-stepName { margin-top: 0.6rem; font-weight: 700; }

/* Il filo dei passaggi. I quattro passi finali erano quattro colonne senza
   niente in mezzo: si leggevano come quattro cose, non come una sequenza.
   Sopra passa la riga sottile della pagina, e sopra di essa un secondo filo
   d'accento che si allunga da sinistra mentre la sezione attraversa lo
   schermo — lo stesso gesto delle altre landing, scritto qui con le classi
   di questa.

   Lo stato «vuoto» vive SOLO dentro i fotogrammi chiave: se l'animazione
   non parte (browser che non la conosce, meno movimento richiesto, linea
   temporale non trovata) il filo resta pieno e fermo. Mai un filo a metà. */
.pp-track {
  position: relative;
  padding-top: clamp(1.3rem, 3vw, 1.9rem);
  border-top: 1px solid var(--pp-line);
}
.pp-dark .pp-track { border-top-color: rgb(255 255 255 / 0.14); }
.pp-trackFill {
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--pp-accent), rgb(79 70 229 / 0.22));
}
.pp-dark .pp-trackFill { background: linear-gradient(90deg, var(--pp-accent-dark), rgb(165 180 252 / 0.18)); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* La linea temporale è quella del contenitore, non quella del filo: un
       elemento alto 2px entra ed esce dallo schermo in due pixel di
       scorrimento, e il riempimento sarebbe uno scatto. */
    .pp-track { view-timeline-name: --pp-track; }
    .pp-trackFill {
      animation: pp-trackGrow linear both;
      animation-timeline: --pp-track;
      animation-range: entry 15% entry 95%;
    }
  }
}
@keyframes pp-trackGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --------------------------------------------------------- il costo (calc) */

.pp-cost { display: grid; overflow: hidden; border-radius: 1.4rem; border: 1px solid var(--pp-line); background: var(--pp-surface); }
@media (min-width: 820px) { .pp-cost { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.pp-costControls { padding: clamp(1.25rem, 3.5vw, 1.75rem); display: grid; gap: 1.2rem; align-content: start; }
.pp-costResult { position: relative; overflow: hidden; background: rgb(var(--pp-ink)); color: #fff; padding: clamp(1.25rem, 3.5vw, 1.75rem); }
.pp-costLabel { font-size: 0.8rem; font-weight: 700; }
.pp-costValue {
  margin-top: 0.3rem;
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pp-accent);
  font-variant-numeric: tabular-nums;
}
.pp-costUnit { margin-left: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--pp-muted); }
.pp-costBig {
  font-size: clamp(2rem, 6.5vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.pp-costSplit { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
@media (min-width: 480px) { .pp-costSplit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-costCell { border-radius: 0.9rem; border: 1px solid rgb(255 255 255 / 0.1); background: rgb(255 255 255 / 0.04); padding: 0.8rem; }
.pp-costCellLabel { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgb(255 255 255 / 0.45); }
.pp-costCellValue { margin-top: 0.25rem; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-costBars { margin-top: 1.1rem; display: grid; gap: 0.5rem; }
.pp-costBarRow { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 5rem; align-items: center; gap: 0.6rem; font-size: 0.78rem; }
/* `display: grid` batte il `display: none` che il browser dà a [hidden]:
   senza questa riga, nascondere una barra non la nasconderebbe. */
.pp-costBarRow[hidden] { display: none; }
.pp-costBarLabel { font-size: 0.74rem; color: rgb(255 255 255 / 0.45); }
.pp-costBarTrack { display: block; height: 8px; border-radius: 999px; background: rgb(255 255 255 / 0.1); overflow: hidden; }
.pp-costBarFill { display: block; height: 100%; border-radius: 999px; transition: width 0.25s ease; }
.pp-costBarValue { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-costNote { margin-top: 1rem; font-size: 0.78rem; line-height: 1.6; color: rgb(255 255 255 / 0.45); }

.pp-segmented { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pp-segment {
  border-radius: 999px;
  border: 1px solid var(--pp-line-strong);
  background: var(--pp-surface);
  padding: 0.45rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--pp-muted);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pp-segment:hover { border-color: rgb(79 70 229 / 0.4); color: var(--pp-fg); }
.pp-segmentOn { background: var(--pp-accent); border-color: var(--pp-accent); color: #fff; }

.pp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgb(79 70 229 / 0.18);
  outline: none;
}
.pp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pp-accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgb(23 27 64 / 0.3);
  cursor: grab;
  transition: transform 0.15s ease;
}
.pp-range::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.pp-range::-moz-range-track { height: 6px; border-radius: 999px; background: rgb(79 70 229 / 0.18); }
.pp-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--pp-accent); border: 3px solid #fff; cursor: grab;
}
.pp-range:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 4px; }
.pp-rangeScale { margin-top: 0.35rem; display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--pp-muted); }

/* ------------------------------------------------------------------- FAQ */

.pp-faqItem { border-top: 1px solid var(--pp-line); }
.pp-faqItem summary {
  cursor: pointer;
  list-style: none;
  padding-block: 1.1rem;
  font-weight: 650;
  font-size: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  justify-content: space-between;
}
.pp-faqItem summary::-webkit-details-marker { display: none; }
.pp-faqItem summary::after {
  content: '+';
  flex: 0 0 auto;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--pp-accent);
  transition: transform 0.25s ease;
}
.pp-faqItem[open] summary::after { transform: rotate(45deg); }
.pp-faqAnswer { padding-bottom: 1.2rem; line-height: 1.7; max-width: 62ch; color: var(--pp-muted); }
/* La risposta non compare di scatto: sale di quattro pixel mentre appare.
   `details` non anima l'altezza in modo affidabile su tutti i browser, e
   fingere quell'altezza costerebbe più di quanto vale — questa è la parte
   che si vede davvero. */
@media (prefers-reduced-motion: no-preference) {
  .pp-faqItem[open] .pp-faqAnswer { animation: pp-fade 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
.pp-faqItem summary { transition: color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .pp-faqItem summary:hover { color: var(--pp-accent); }
}

/* -------------------------------------------------------------- rispetto */

@media (prefers-reduced-motion: reduce) {
  /* Ogni classe che si muove passa di qui, e ci arriva allo stato FINALE:
     mai un'animazione congelata a metà. `scale` e `translate` sono elencate
     accanto a `transform` perché il parallax dell'hero e del manifesto usa
     quelle, che sono proprietà distinte. */
  .pp-line, .pp-screenBody, .pp-railFill, .pp-reveal, .pp-heroCard,
  .pp-heroMedia, .pp-manifestoMedia, .pp-trackFill, .pp-fadeIn,
  .pp-faqItem[open] .pp-faqAnswer {
    animation: none; opacity: 1; transform: none; scale: none; translate: none;
  }
  .pp-wallRow { animation: none; }
  .pp-photo { transition: none; }
  .pp-cta:hover, .pp-feature:hover { transform: none; }
  .pp-costBarFill { transition: none; }
}

/* ------------------------------------------------- rete di sicurezza */
/* Due guardie che non cambiano nulla quando tutto va bene, e salvano la pagina
   quando qualcosa esce dai binari: un titolo lunghissimo, un numero grosso, un
   nastro che sfugge. `clip` e non `hidden`: `hidden` creerebbe un contenitore
   di scorrimento e romperebbe la barra appiccicata dell'intestazione. */
.pp-page { overflow-x: clip; }
.pp-page :where(h1, h2, h3, p, span, summary) { overflow-wrap: break-word; }

/* ----------------------------------------------- «quanti siete?» (obblighi) */
/* Il pezzo più utile della pagina: si muove un cursore e si scopre un obbligo
   che non si sapeva di avere. Nessuna decorazione — la sostanza è il testo,
   e il movimento serve solo a far capire che i numeri cambiano davvero. */

.pp-sizeWrap {
  border: 1px solid var(--pp-line);
  border-radius: 1.4rem;
  background: var(--pp-surface);
  padding: clamp(1.25rem, 3.5vw, 2rem);
}
.pp-sizeHead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pp-sizeLabel { font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 700; }
.pp-sizeValue {
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--pp-accent);
}

.pp-sizeRange { width: 100%; margin-top: 1rem; accent-color: var(--pp-accent); }
.pp-sizeRange:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 4px; border-radius: 999px; }
.pp-sizeTicks {
  margin-top: 0.4rem;
  display: flex; justify-content: space-between;
  font-size: 0.7rem; font-variant-numeric: tabular-nums; color: var(--pp-muted);
}
.pp-sizeTick { opacity: 0.6; }
.pp-sizeTickOn { font-weight: 800; color: var(--pp-accent); }

.pp-sizeGrid { margin-top: 1.75rem; display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
@media (min-width: 62rem) { .pp-sizeGrid { grid-template-columns: 1.35fr 1fr; } }

.pp-sizeColTitle {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 800; color: var(--pp-muted); margin-bottom: 0.9rem;
}

.pp-sizeDuties { display: grid; gap: 0.85rem; }
.pp-sizeDuty {
  display: grid; gap: 0.2rem;
  border-left: 2px solid var(--pp-accent);
  padding: 0.15rem 0 0.15rem 0.85rem;
}
.pp-sizeDutyTop { display: flex; align-items: center; gap: 0.45rem; color: var(--pp-fg); }
.pp-sizeDutyTop svg { color: var(--pp-good); flex: none; }
.pp-sizeDutyLaw { font-size: 0.75rem; font-weight: 600; color: var(--pp-accent); }
.pp-sizeDutyOmega { font-size: 0.9rem; line-height: 1.6; color: var(--pp-muted); max-width: 60ch; }

.pp-sizeNext {
  margin-top: 1rem; display: flex; align-items: flex-start; gap: 0.45rem;
  font-size: 0.85rem; line-height: 1.6; color: var(--pp-fg);
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 0.8rem; padding: 0.65rem 0.8rem;
}
/* `display: flex` batte il `display: none` che il browser dà a [hidden]:
   senza questa riga l'avviso della soglia successiva resta lì — vuoto prima
   che parta lo script, e con la frase della tacca precedente da 50 persone in
   su, dove una soglia successiva non c'è più. */
.pp-sizeNext[hidden] { display: none; }
.pp-sizeNext svg { color: var(--pp-warn); flex: none; margin-top: 0.15rem; }

.pp-sizeModules { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pp-sizeModules li {
  font-size: 0.82rem; font-weight: 600;
  border: 1px solid var(--pp-line-strong); border-radius: 999px;
  padding: 0.3rem 0.7rem; background: var(--pp-wash);
}
.pp-sizeNote { margin-top: 0.9rem; font-size: 0.88rem; line-height: 1.65; color: var(--pp-muted); max-width: 48ch; }
.pp-sizeCta {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 700; color: var(--pp-accent);
}
.pp-sizeCta:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .pp-sizeValue { transition: none; } }

/* ==========================================================================
   L'INDICE — la riga di collegamenti sotto la fascia.

   La pagina è lunga, e chi arriva da una ricerca precisa («turni», «note
   spese») vuole quel pezzo, non il racconto dall'inizio. Ogni voce porta a una
   sezione che ha quel titolo: chi cerca legge la parola che ha scritto.
   ========================================================================== */

.pp-jump { border-bottom: 1px solid var(--pp-line); background: var(--pp-surface); }
.pp-jumpRow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  padding-block: 0.85rem;
  align-items: center;
}
.pp-jumpLabel {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-muted);
  margin-right: 0.35rem;
}
.pp-jumpLink {
  border-radius: 999px;
  border: 1px solid var(--pp-line);
  background: var(--pp-wash);
  padding: 0.34rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pp-fg);
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.pp-jumpLink:hover { border-color: rgb(79 70 229 / 0.4); background: var(--pp-accent-soft); color: #4338ca; }

/* --------------------------------------------------- sezioni sotto la piega */
/* Il browser rimanda il disegno di quello che non è ancora in vista: la prima
   schermata compare prima, e le sezioni lunghe non pesano finché non si
   arriva. L'altezza dichiarata evita che la barra di scorrimento salti. */
.pp-lite {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* --------------------------------------------------------- prima e adesso */
/* Il confronto con il foglio di calcolo: è il posto da cui arriva quasi tutti,
   e vederlo scritto vale più di qualunque elenco di funzioni. */

.pp-swap { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .pp-swap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pp-swapCol {
  border-radius: 1.25rem;
  border: 1px solid var(--pp-line);
  background: var(--pp-surface);
  padding: clamp(1.1rem, 3vw, 1.5rem);
}
.pp-swapGood { border-color: rgb(79 70 229 / 0.3); background: var(--pp-accent-soft); }
.pp-swapHead {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pp-muted);
}
.pp-swapGood .pp-swapHead { color: var(--pp-accent); }
.pp-swapList { margin-top: 0.9rem; display: grid; gap: 0.6rem; }
.pp-swapItem {
  display: flex;
  gap: 0.55rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--pp-muted);
}
.pp-swapGood .pp-swapItem { color: var(--pp-fg); }
.pp-swapItem svg { flex: 0 0 auto; margin-top: 0.2rem; }
.pp-swapCol:not(.pp-swapGood) .pp-swapItem svg { color: var(--pp-line-strong); }
.pp-swapGood .pp-swapItem svg { color: var(--pp-accent); }

/* ---------------------------------------------------- le ricerche correlate */
/* Le stesse cose, chiamate come le chiama chi le cerca: chi arriva con la sua
   parola trova la sua parola, e capisce in una riga se è la cosa giusta. */

.pp-glossary { display: grid; gap: 0.1rem; }
.pp-gItem {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--pp-line);
}
@media (min-width: 48rem) { .pp-gItem { grid-template-columns: 15rem minmax(0, 1fr); gap: 0.2rem 1.5rem; align-items: baseline; } }
.pp-gTerm { font-size: 0.94rem; font-weight: 700; transition: color 0.2s ease; }
.pp-gDesc { font-size: 0.9rem; line-height: 1.6; color: var(--pp-muted); }
/* Dodici righe fitte: il termine si accende sotto il puntatore, così si sa
   sempre quale riga si sta leggendo. */
@media (hover: hover) and (pointer: fine) {
  .pp-gItem:hover .pp-gTerm { color: var(--pp-accent); }
}

/* -------------------------------------------- gli stessi pezzi, su fondo scuro */
/* I passi e le pastiglie nascono per le sezioni chiare: sul fondo d'inchiostro
   l'indaco pieno sparisce e il numero non si legge più. */
.pp-dark .pp-stepNum { color: var(--pp-accent-dark); opacity: 0.45; }
.pp-dark .pp-pill { border-color: rgb(255 255 255 / 0.14); background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.9); }