/* Fonts — self-hosted (latin + latin-ext subsets) */
@font-face{font-family:"Google Sans Flex";src:url("../fonts/google-sans-flex-400-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Google Sans Flex";src:url("../fonts/google-sans-flex-400-latin.woff2");font-display:swap;font-style:normal;font-weight:400;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}
@font-face{font-family:"Google Sans Flex";src:url("../fonts/google-sans-flex-500-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:500;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Google Sans Flex";src:url("../fonts/google-sans-flex-500-latin.woff2");font-display:swap;font-style:normal;font-weight:500;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}
@font-face{font-family:"Google Sans Flex";src:url("../fonts/google-sans-flex-600-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:600;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Google Sans Flex";src:url("../fonts/google-sans-flex-600-latin.woff2");font-display:swap;font-style:normal;font-weight:600;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}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-400-italic.woff2");font-display:swap;font-style:italic;font-weight:400}
@font-face{font-family:"Geist";src:url("../fonts/geist-600.woff2");font-display:swap;font-style:normal;font-weight:600}
@font-face{font-family:"Stack Sans Headline";src:url("../fonts/stack-sans-headline-500.woff2");font-display:swap;font-style:normal;font-weight:500}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-400.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Google Sans Flex Variable";src:url("../fonts/google-sans-flex-variable-400.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Stack Sans Headline";src:url("../fonts/stack-sans-headline-700.woff2");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"Coolvetica Regular";src:url("../fonts/coolvetica-regular-400.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Proxima Nova Regular";src:url("../fonts/proxima-nova-regular-400.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Proxima Nova Bold";src:url("../fonts/proxima-nova-bold-700.woff2");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"Proxima Nova Bold Italic";src:url("../fonts/proxima-nova-bold-italic-700-italic.woff2");font-display:swap;font-style:italic;font-weight:700}
@font-face{font-family:"Inter";src:url("../fonts/inter-500-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:500;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-500-latin.woff2");font-display:swap;font-style:normal;font-weight:500;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Proxima Nova Thin";src:url("../fonts/proxima-nova-thin-250.woff2");font-display:swap;font-style:normal;font-weight:250}
@font-face{font-family:"Proxima Nova Semibold Italic";src:url("../fonts/proxima-nova-semibold-italic-600-italic.woff2");font-display:swap;font-style:italic;font-weight:600}
@font-face{font-family:"Proxima Nova Semibold";src:url("../fonts/proxima-nova-semibold-600.woff2");font-display:swap;font-style:normal;font-weight:600}
@font-face{font-family:"Proxima Nova Black";src:url("../fonts/proxima-nova-black-900.woff2");font-display:swap;font-style:normal;font-weight:900}
@font-face{font-family:"Inter";src:url("../fonts/inter-400-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-400-latin.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Variable";src:url("../fonts/inter-variable-400-italic-latin-ext.woff2");font-display:swap;font-style:italic;font-weight:400;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Variable";src:url("../fonts/inter-variable-400-italic-latin.woff2");font-display:swap;font-style:italic;font-weight:400;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-600-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:600;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-600-latin.woff2");font-display:swap;font-style:normal;font-weight:600;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-900-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:900;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-900-latin.woff2");font-display:swap;font-style:normal;font-weight:900;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-700-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:700;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-700-latin.woff2");font-display:swap;font-style:normal;font-weight:700;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-700-italic-latin-ext.woff2");font-display:swap;font-style:italic;font-weight:700;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-700-italic-latin.woff2");font-display:swap;font-style:italic;font-weight:700;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-400-italic-latin-ext.woff2");font-display:swap;font-style:italic;font-weight:400;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-400-italic-latin.woff2");font-display:swap;font-style:italic;font-weight:400;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-600-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:600;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-600-latin.woff2");font-display:swap;font-style:normal;font-weight:600;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-700-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:700;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-700-latin.woff2");font-display:swap;font-style:normal;font-weight:700;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-700-italic-latin-ext.woff2");font-display:swap;font-style:italic;font-weight:700;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-700-italic-latin.woff2");font-display:swap;font-style:italic;font-weight:700;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-600-italic-latin-ext.woff2");font-display:swap;font-style:italic;font-weight:600;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-600-italic-latin.woff2");font-display:swap;font-style:italic;font-weight:600;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-400-latin.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-400-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-400-latin.woff2");font-display:swap;font-style:normal;font-weight:400;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-500-latin-ext.woff2");font-display:swap;font-style:normal;font-weight:500;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-500-latin.woff2");font-display:swap;font-style:normal;font-weight:500;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-500-italic-latin-ext.woff2");font-display:swap;font-style:italic;font-weight:500;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter Display";src:url("../fonts/inter-display-500-italic-latin.woff2");font-display:swap;font-style:italic;font-weight:500;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Inter";src:url("../fonts/inter-600-italic-latin-ext.woff2");font-display:swap;font-style:italic;font-weight:600;unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Inter";src:url("../fonts/inter-600-italic-latin.woff2");font-display:swap;font-style:italic;font-weight:600;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-500.woff2");font-display:swap;font-style:normal;font-weight:500}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-700.woff2");font-display:swap;font-style:normal;font-weight:700}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-900.woff2");font-display:swap;font-style:normal;font-weight:900}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-900-italic.woff2");font-display:swap;font-style:italic;font-weight:900}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-700-italic.woff2");font-display:swap;font-style:italic;font-weight:700}
@font-face{font-family:"Satoshi Variable";src:url("../fonts/satoshi-variable-400.woff2");font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:"Satoshi";src:url("../fonts/satoshi-500-italic.woff2");font-display:swap;font-style:italic;font-weight:500}
@font-face{font-family: "Google Sans Flex Placeholder"; src: local("Arial"); ascent-override: 94.61%; descent-override: 28.01%; line-gap-override: 0.00%; size-adjust: 102.10%}
@font-face{font-family: "Instrument Serif Placeholder"; src: local("Times New Roman"); ascent-override: 117.87%; descent-override: 36.91%; line-gap-override: 0.00%; size-adjust: 83.99%}
@font-face{font-family: "Geist Placeholder"; src: local("Arial"); ascent-override: 94.56%; descent-override: 27.76%; line-gap-override: 0.00%; size-adjust: 106.28%}
@font-face{font-family: "Stack Sans Headline Placeholder"; src: local("Arial"); ascent-override: 95.02%; descent-override: 28.51%; line-gap-override: 0.00%; size-adjust: 105.24%}
@font-face{font-family: "Google Sans Flex Variable Placeholder"; src: local("Arial"); ascent-override: 94.61%; descent-override: 28.01%; line-gap-override: 0.00%; size-adjust: 102.10%}
@font-face{font-family: "Coolvetica Regular Placeholder"; src: local("Arial"); ascent-override: 102.32%; descent-override: 24.65%; line-gap-override: 0.00%; size-adjust: 94.51%}
@font-face{font-family: "Proxima Nova Regular Placeholder"; src: local("Arial"); ascent-override: 92.82%; descent-override: 30.07%; line-gap-override: 0.00%; size-adjust: 99.12%}
@font-face{font-family: "Proxima Nova Bold Placeholder"; src: local("Arial"); ascent-override: 89.73%; descent-override: 29.06%; line-gap-override: 0.00%; size-adjust: 102.53%}
@font-face{font-family: "Proxima Nova Bold Italic Placeholder"; src: local("Arial"); ascent-override: 89.16%; descent-override: 28.88%; line-gap-override: 0.00%; size-adjust: 103.19%}
@font-face{font-family: "Inter Placeholder"; src: local("Arial"); ascent-override: 89.79%; descent-override: 22.36%; line-gap-override: 0.00%; size-adjust: 107.89%}
@font-face{font-family: "Proxima Nova Semibold Italic Placeholder"; src: local("Arial"); ascent-override: 90.43%; descent-override: 29.29%; line-gap-override: 0.00%; size-adjust: 101.74%}
@font-face{font-family: "Proxima Nova Semibold Placeholder"; src: local("Arial"); ascent-override: 91.04%; descent-override: 29.49%; line-gap-override: 0.00%; size-adjust: 101.05%}
@font-face{font-family: "Inter Variable Placeholder"; src: local("Arial"); ascent-override: 89.79%; descent-override: 22.36%; line-gap-override: 0.00%; size-adjust: 107.89%}
@font-face{font-family: "Inter Display Placeholder"; src: local("Arial"); ascent-override: 98.56%; descent-override: 24.54%; line-gap-override: 0.00%; size-adjust: 98.29%}
@font-face{font-family: "Satoshi Placeholder"; src: local("Arial"); ascent-override: 102.23%; descent-override: 24.29%; line-gap-override: 10.12%; size-adjust: 98.80%}
@font-face{font-family: "Satoshi Variable Placeholder"; src: local("Arial"); ascent-override: 102.23%; descent-override: 24.29%; line-gap-override: 10.12%; size-adjust: 98.80%}


/* ==========================================================================
   Base — reset, design tokens, shared helpers (adapt the reset to the original
   platform: this one mirrors Framer's global rules)
   Breakpoints (from the original Framer pages — each page has its own):
     HOME      desktop ≥ 1600px · tablet 810–1599.98px · phone ≤ 809.98px
               tablet: @media (min-width: 810px) and (max-width: 1599.98px)   phone: @media (max-width: 809.98px)
     PRODOTTI  desktop ≥ 1200px · tablet 810–1199.98px · phone ≤ 809.98px
               tablet: @media (min-width: 810px) and (max-width: 1199.98px)   phone: @media (max-width: 809.98px)
     <html data-page="home|prodotti"> lets shared parts (nav, footer) follow the page they are on.
   ========================================================================== */
:root {
  /* colours (Byup palette, from the original's tokens) */
  --c-bg: #ffffff;
  --c-text: #000000;
  --c-pink: #ff1f5a;          /* preloader, brand */
  --c-red: #e81348;           /* accents */
  --c-black: #0d0d0d;
  --c-dark: #161616;
  --c-white: #ffffff;
  /* font stacks — the "X Placeholder" fallbacks (fonts.css) keep metrics close while the font loads */
  --font-body: "Inter", "Inter Placeholder", sans-serif;
  --font-coolvetica: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  --font-proxima: "Proxima Nova Regular", "Proxima Nova Regular Placeholder", sans-serif;
  --font-satoshi: "Satoshi", "Satoshi Placeholder", sans-serif;
  --font-serif: "Instrument Serif", "Instrument Serif Placeholder", serif;
  --font-geist: "Geist", "Geist Placeholder", sans-serif;
  --font-inter-display: "Inter Display", "Inter Display Placeholder", sans-serif;
  --font-jakarta: "Plus Jakarta Sans", sans-serif;
  --font-gsans: "Google Sans Flex", "Google Sans Flex Placeholder", sans-serif;
  --font-stack: "Stack Sans Headline", "Stack Sans Headline Placeholder", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- reset (Framer) ---- */
html, body { box-sizing: border-box; margin: 0; padding: 0; }
* { box-sizing: border-box; -webkit-font-smoothing: inherit; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
body, input, textarea, select, button { font-family: sans-serif; font-size: 12px; }
html body { background: var(--c-bg); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
img, svg { display: block; }

/* smooth wheel scrolling on the home: src/js/00-core.js (no library) */

/* ---- helpers ---- */
.fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; object-position: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* .hide-desktop / .hide-tablet / .hide-phone are generated by tools/build.py from tools/clone.json */

/* Page wrapper: header, <main> (display: contents → sections are flex items, like Framer) and footer */
.page { background-color: var(--c-bg); display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; overflow-x: clip; }
.main { display: contents; }


/* breakpoint helpers (generated from tools/clone.json) */
@media (min-width: 1600px) { html[data-bp-desktop="1600"][data-bp-tablet="810"] .hide-desktop { display: none !important; } }
@media (min-width: 810px) and (max-width: 1599.98px) { html[data-bp-desktop="1600"][data-bp-tablet="810"] .hide-tablet { display: none !important; } }
@media (max-width: 809.98px) { html[data-bp-desktop="1600"][data-bp-tablet="810"] .hide-phone { display: none !important; } }
@media (min-width: 1200px) { html[data-bp-desktop="1200"][data-bp-tablet="810"] .hide-desktop { display: none !important; } }
@media (min-width: 810px) and (max-width: 1199.98px) { html[data-bp-desktop="1200"][data-bp-tablet="810"] .hide-tablet { display: none !important; } }
@media (max-width: 809.98px) { html[data-bp-desktop="1200"][data-bp-tablet="810"] .hide-phone { display: none !important; } }

/* ==========================================================================
   00-preloader
   ========================================================================== */
/* PRELOADER — Framer "LogoPreloader" (home only, and only on the phone breakpoint: the original hides it from 810px up).
   Phone props: duration 1.5 s, logo 70 px, background rgb(255, 31, 90). Original timeline after mount:
   +50 ms logo in (translateY 80px → 0, opacity 0 → 1) · +1550 ms logo out (→ -80px, opacity 0) and background fade ·
   +2250 ms removed; every step 0.7 s cubic-bezier(.7,.2,.2,1). The same timeline runs here as CSS animations from the
   first paint (it needs no JS); 00-preloader.js only removes the layer at the end. */
.preloader { display: none; }

@media (max-width: 809.98px) {
  .preloader {
    position: fixed; top: 0; right: -5px; bottom: 0; left: -4px; z-index: 9;   /* above the nav (z 8), as in the original */
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: rgb(255, 31, 90);
    animation: preloader-out .7s cubic-bezier(.7, .2, .2, 1) 1.55s forwards;
  }
  .preloader__logo {
    flex: none; width: 70px; height: 70px; object-fit: contain; z-index: 1; will-change: transform, opacity;
    -webkit-user-select: none; user-select: none; pointer-events: none;
    animation: preloader-logo-in .7s cubic-bezier(.7, .2, .2, 1) .05s both, preloader-logo-out .7s cubic-bezier(.7, .2, .2, 1) 1.55s forwards;
  }
}
@media (max-width: 809.98px) and (prefers-reduced-motion: reduce) {
  .preloader__logo { animation-name: preloader-fade-in, preloader-fade-out; }   /* same timing, no movement */
}

@keyframes preloader-logo-in { from { transform: translateY(80px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes preloader-logo-out { from { transform: none; opacity: 1; } to { transform: translateY(-80px); opacity: 0; } }
@keyframes preloader-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes preloader-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes preloader-out { to { opacity: 0; visibility: hidden; } }


/* ==========================================================================
   00-preordina
   ========================================================================== */
/* PREORDINA — shared modal window (both pages), opened by [data-preordina] and /#preordina (00-preordina.js).
   Look: the home CTA section (dark → burgundy/pink gradient with grain, app icon with crown, store pill,
   Coolvetica + Instrument Serif italic title, Proxima Nova text, "Preordina Gratis" button style).
   Motion: the original site's own modal — backdrop rgba(0,0,0,.6) + blur 10px fading in .2s ease(.5,0,.88,.77);
   card from y 30 / opacity 0 with a spring bounce 0 / 0.4 s (tools/spring.js); out: .2s ease(.12,.23,.5,1).
   prefers-reduced-motion: fades only. */
.preordina {
  position: fixed;
  inset: 0;
  z-index: 1000;
  color: #fff;
}
.preordina[hidden] { display: none; }

.preordina__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.12, 0.23, 0.5, 1);
}
.preordina__scroll {                   /* the scrollable panel: card centred, scrolls when taller than the screen */
  position: absolute;
  inset: 0;
  display: flex;
  padding: 40px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---- card ---- */
.preordina__card {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 460px;
  margin: auto;                        /* safe centring: never clipped when it overflows */
  padding: 56px 40px 36px;
  overflow: hidden;
  border-radius: 44px;
  background-color: #141414;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.2s cubic-bezier(0.12, 0.23, 0.5, 1), transform 0.2s cubic-bezier(0.12, 0.23, 0.5, 1);
}
.preordina__card::after {              /* hairline edge on the dark backdrop */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: inherit;
  pointer-events: none;
}
.preordina.is-open .preordina__backdrop {
  opacity: 1;
  transition: opacity 0.2s cubic-bezier(0.5, 0, 0.88, 0.77);
}
.preordina.is-open .preordina__card {
  opacity: 1;
  transform: none;
  /* spring bounce 0 / 0.4 s (node tools/spring.js '{"type":"spring","bounce":0,"duration":0.4}') */
  transition:
    opacity 0.4s linear(0, 0.0535, 0.1694, 0.3039, 0.4346, 0.5509, 0.6493, 0.7298, 0.794, 0.8443, 0.8832, 0.9129, 0.9354, 0.9523, 0.9649, 0.9743, 0.9812, 0.9863, 0.9901, 0.9928, 0.9948, 0.9963, 0.9973, 0.9981, 0.9986, 1),
    transform 0.4s linear(0, 0.0535, 0.1694, 0.3039, 0.4346, 0.5509, 0.6493, 0.7298, 0.794, 0.8443, 0.8832, 0.9129, 0.9354, 0.9523, 0.9649, 0.9743, 0.9812, 0.9863, 0.9901, 0.9928, 0.9948, 0.9963, 0.9973, 0.9981, 0.9986, 1);
}
@media (prefers-reduced-motion: reduce) {
  .preordina__card, .preordina.is-open .preordina__card { transform: none; }
}

/* background: the CTA colours (dark at the top, burgundy → Byup pink at the bottom) + the same grain */
.preordina__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(62% 30% at 74% 100%, rgba(255, 30, 90, 0.55) 0%, rgba(255, 30, 90, 0) 100%),
    radial-gradient(48% 26% at 18% 100%, rgba(170, 24, 62, 0.55) 0%, rgba(170, 24, 62, 0) 100%),
    linear-gradient(180deg, #141414 0%, #141414 28%, rgb(40, 13, 21) 52%, rgb(64, 17, 32) 74%, rgb(104, 19, 45) 100%);
}
.preordina__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background: url(../img/home-hero-grana.webp) 0 0 / 200px repeat;
}
.preordina__card > :not(.preordina__bg) { position: relative; z-index: 1; }

/* ---- close ---- */
.preordina__card > .preordina__close {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.2s cubic-bezier(0.12, 0.23, 0.5, 1);
}
@media (hover: hover) {
  .preordina__close:hover { background-color: rgba(255, 255, 255, 0.2); }
}
.preordina__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* focus ring for every control (keyboard only) */
.preordina__close:focus, .preordina__btn:focus { outline: none; }
.preordina__close:focus-visible, .preordina__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---- head: icon with crown, store pill, title ---- */
.preordina__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.preordina__icon {
  position: relative;
  flex: none;
  width: 96px;
  height: 96px;
}
.preordina__app { width: 96px; height: 96px; object-fit: cover; }
.preordina__crown {
  position: absolute;
  top: -23.5px;
  right: 0.5px;
  width: 47px;
  height: 47px;
  object-fit: cover;
  transform: rotate(15deg);
}
.preordina__pill {                     /* = CTA / hero "AppStore Badge" */
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  padding: 10px 14px;
  overflow: clip;
  background-color: #f6f6f6;
  border-radius: 100px;
}
.preordina__pill-play {
  flex: none;
  width: 14px;
  height: auto;
  aspect-ratio: 0.9095043201455206 / 1;
  object-fit: cover;
}
.preordina__pill-store {
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.002 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0.4975' x2='0.5025' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(24,191,251)'/%3E%3Cstop offset='1' stop-color='rgb(32,114,243)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 12.768 0 L 3.232 0 C 1.446 0 0 1.446 0 3.232 L 0 12.77 C 0 14.554 1.446 16 3.232 16 L 12.77 16 C 14.554 16 16.002 14.554 16.002 12.768 L 16.002 3.232 C 16 1.446 14.554 0 12.768 0 Z' fill='url(%23g)'/%3E%3Cpath d='M 7.93 3.677 L 8.254 3.117 C 8.454 2.767 8.9 2.649 9.25 2.849 C 9.6 3.049 9.718 3.495 9.518 3.845 L 6.396 9.249 L 8.654 9.249 C 9.386 9.249 9.796 10.109 9.478 10.705 L 2.858 10.705 C 2.454 10.705 2.13 10.381 2.13 9.977 C 2.13 9.573 2.454 9.249 2.858 9.249 L 4.714 9.249 L 7.09 5.131 L 6.348 3.843 C 6.148 3.493 6.266 3.051 6.616 2.847 C 6.966 2.647 7.408 2.765 7.612 3.115 Z M 5.122 11.455 L 4.422 12.669 C 4.222 13.019 3.776 13.137 3.426 12.937 C 3.076 12.737 2.958 12.291 3.158 11.941 L 3.678 11.041 C 4.266 10.859 4.744 10.999 5.122 11.455 Z M 11.15 9.253 L 13.044 9.253 C 13.448 9.253 13.772 9.577 13.772 9.981 C 13.772 10.385 13.448 10.709 13.044 10.709 L 11.992 10.709 L 12.702 11.941 C 12.902 12.291 12.784 12.733 12.434 12.937 C 12.084 13.137 11.642 13.019 11.438 12.669 C 10.242 10.595 9.344 9.043 8.748 8.009 C 8.138 6.957 8.574 5.901 9.004 5.543 C 9.482 6.363 10.196 7.601 11.15 9.253 Z' fill='rgb(255,255,255)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.preordina__pill-text {
  flex: none;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #000;
  white-space: pre;
}
.preordina__title {
  width: 100%;
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 0.9;
  color: #fff;
}
.preordina__t1, .preordina__t2 { display: block; }
.preordina__t2 {
  font-family: "Instrument Serif", "Instrument Serif Placeholder", serif;
  font-size: 68px;
  font-style: italic;
}

/* ---- body: text, form, success ---- */
.preordina__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  margin-top: 16px;
}
.preordina__text {
  font-family: "Proxima Nova Thin", sans-serif;
  font-size: 18px;
  font-weight: 250;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: #fff;
}
.preordina__sb {
  font-family: "Proxima Nova Semibold", "Proxima Nova Semibold Placeholder", sans-serif;
  font-weight: 600;
}
.preordina__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.preordina__form[hidden], .preordina__done[hidden], .preordina__err[hidden], .preordina__alert[hidden] { display: none; }
.preordina__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preordina__label {
  font-family: "Proxima Nova Semibold", "Proxima Nova Semibold Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
}
.preordina__input {
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  background-color: #fff;
  color: #1a1a1a;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;                     /* ≥ 16px: no zoom on focus in iOS Safari */
  line-height: 1.2;
  outline: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition: box-shadow 0.2s cubic-bezier(0.12, 0.23, 0.5, 1), border-color 0.2s cubic-bezier(0.12, 0.23, 0.5, 1);
  -webkit-appearance: none;
  appearance: none;
}
.preordina__input::placeholder { color: rgba(26, 26, 26, 0.45); opacity: 1; }
.preordina__input:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.28); }
.preordina__input[aria-invalid="true"] { border-color: #ff5c8a; box-shadow: 0 0 0 4px rgba(255, 92, 138, 0.35); }
.preordina__err {
  font-family: "Proxima Nova Regular", "Proxima Nova Regular Placeholder", sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #ffb3c6;
}
.preordina__alert {
  padding: 10px 14px;
  border-radius: 12px;
  background-color: rgba(255, 92, 138, 0.18);
  font-family: "Proxima Nova Semibold", "Proxima Nova Semibold Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}

/* buttons = "Preordina Gratis" (CTA): #1f1f1f, radius 16, Satoshi 15 bold, hover glow (spring bounce .2 / .4 s) */
.preordina__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 16px;
  background-color: #1f1f1f;
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.33), inset 0 0 5px 0 rgba(255, 255, 255, 0);
  cursor: pointer;
  transition:
    box-shadow 0.4s linear(0, 0.0533, 0.1755, 0.3245, 0.474, 0.6093, 0.7234, 0.8145, 0.8838, 0.9341, 0.9688, 0.9913, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1.0051, 1.0035, 1.0023, 1.0014, 1.0007, 1),
    transform 0.4s linear(0, 0.0533, 0.1755, 0.3245, 0.474, 0.6093, 0.7234, 0.8145, 0.8838, 0.9341, 0.9688, 0.9913, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1.0051, 1.0035, 1.0023, 1.0014, 1.0007, 1),
    opacity 0.2s;
}
.preordina__submit { margin-top: 6px; }
@media (hover: hover) {
  .preordina__btn:hover { box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.45), inset 0 0 5px 0 rgba(255, 255, 255, 0.49); }
}
.preordina__btn:active { box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.45), inset 0 0 5px 0 #fff; transform: scale(0.985); }
.preordina__btn:disabled { opacity: 0.7; cursor: progress; transform: none; }
.preordina__btn-label {
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  white-space: pre;
}
.preordina__note {
  font-family: "Proxima Nova Regular", "Proxima Nova Regular Placeholder", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}
.preordina__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: 4px;
}
.preordina__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgb(255, 31, 90);
  box-shadow: 0 8px 24px rgba(255, 31, 90, 0.35);
}
.preordina__check svg { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.preordina__done-text {
  font-family: "Proxima Nova Thin", sans-serif;
  font-size: 20px;
  font-weight: 250;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #fff;
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .preordina__scroll { padding: 12px; }
  .preordina__card { padding: 48px 20px 24px; border-radius: 32px; }
  .preordina__card > .preordina__close { top: 14px; right: 14px; }
  .preordina__head { gap: 20px; }
  .preordina__title { font-size: 36px; }
  .preordina__t2 { font-size: 60px; }
  .preordina__body { gap: 20px; margin-top: 12px; }
}

/* the card takes focus on touch screens (so the keyboard does not pop up): no ring on the container */
.preordina__card:focus { outline: none; }


/* ==========================================================================
   01-components
   ========================================================================== */
/* ==========================================================================
   Shared components — Framer text styles (.tp-*, from tools/framer_presets.py: they keep
   THEIR OWN media queries) + shared pieces (buttons, pills) added by the section builders.
   ========================================================================== */
/* Framer text presets → .tp-* (generated by tools/framer_presets.py). Desktop = base;
   the @media blocks are the presets' OWN breakpoints. */

/* preset h0smu1 · .framer-3sJ9p .framer-styles-preset-h0smu1:not(.rich-text-wrapper),.framer-3sJ9p .framer-styles-preset-h0smu1.rich-text-wrapper p */
.tp-satoshi-20-bold { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-feature-settings: normal; font-size: 20px; font-style: normal; font-weight: 700; letter-spacing: -.02em; line-height: 1.5em; text-align: center; color: #1f1f1f; text-decoration: none; text-transform: none }
@media (max-width:809px) and (min-width:0) { .tp-satoshi-20-bold { font-size: 18px } }
.tp-satoshi-20-bold strong, .tp-satoshi-20-bold b { font-family: "Inter", "Inter Placeholder", sans-serif; font-weight: 700 }
.tp-satoshi-20-bold em, .tp-satoshi-20-bold i { font-family: "Inter", "Inter Placeholder", sans-serif; font-style: italic }
.tp-satoshi-20-bold + .tp-satoshi-20-bold { margin-top: 20px }  /* paragraph spacing */

/* preset 12q8soh · .framer-e3vyF .framer-styles-preset-12q8soh:not(.rich-text-wrapper),.framer-e3vyF .framer-styles-preset-12q8soh.rich-text-wrapper p */
.tp-proxima-nova-regular-20 { font-family: "Proxima Nova Regular", "Proxima Nova Regular Placeholder", sans-serif; font-feature-settings: normal; font-size: 20px; font-style: normal; font-weight: 400; letter-spacing: -.03em; line-height: 1.3em; text-align: center; color: #1f1f1f; text-decoration: none; text-transform: none }
@media (max-width:809px) and (min-width:0) { .tp-proxima-nova-regular-20 { font-size: 18px } }
.tp-proxima-nova-regular-20 strong, .tp-proxima-nova-regular-20 b { font-family: "Proxima Nova Bold", "Proxima Nova Bold Placeholder", sans-serif; font-weight: 700 }
.tp-proxima-nova-regular-20 + .tp-proxima-nova-regular-20 { margin-top: 20px }  /* paragraph spacing */

/* preset 14o2ma5 · .framer-D4Myo .framer-styles-preset-14o2ma5:not(.rich-text-wrapper),.framer-D4Myo .framer-styles-preset-14o2ma5.rich-text-wrapper h4 */
.tp-coolvetica-regular-66 { font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif; font-feature-settings: normal; font-size: 66px; font-style: normal; font-weight: 400; letter-spacing: 0em; line-height: .9em; text-align: center; color: #fff; text-decoration: none; text-transform: none }
@media (max-width:1199px) and (min-width:810px) { .tp-coolvetica-regular-66 { font-size: 38px } }
@media (max-width:809px) and (min-width:0) { .tp-coolvetica-regular-66 { font-size: 32px } }
.tp-coolvetica-regular-66 + .tp-coolvetica-regular-66 { margin-top: 40px }  /* paragraph spacing */

/* preset 1rfuho1 · .framer-zyiuo .framer-styles-preset-1rfuho1:not(.rich-text-wrapper),.framer-zyiuo .framer-styles-preset-1rfuho1.rich-text-wrapper p */
.tp-satoshi-variable-13 { font-family: "Satoshi Variable", "Satoshi Variable Placeholder", sans-serif; font-feature-settings: normal; font-size: 13px; font-style: normal; font-variation-settings: "wght" 650; font-weight: 400; letter-spacing: -.04em; line-height: 1.2em; text-align: start; color: #1f1f1f; text-decoration: none; text-transform: none }
.tp-satoshi-variable-13 strong, .tp-satoshi-variable-13 b { font-family: "Satoshi Variable", "Satoshi Variable Placeholder", sans-serif; font-weight: 400 }
.tp-satoshi-variable-13 em, .tp-satoshi-variable-13 i { font-family: "Satoshi Variable", "Satoshi Variable Placeholder", sans-serif; font-style: normal }
.tp-satoshi-variable-13 + .tp-satoshi-variable-13 { margin-top: 20px }  /* paragraph spacing */

/* preset 13n02sm · .framer-PQUv2 .framer-styles-preset-13n02sm:not(.rich-text-wrapper),.framer-PQUv2 .framer-styles-preset-13n02sm.rich-text-wrapper p */
.tp-inter-display-18-medium { font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on; font-size: 18px; font-style: normal; font-weight: 500; letter-spacing: -.04em; line-height: 1.4em; text-align: start; color: #3d3d3d; text-decoration: none; text-transform: none }
.tp-inter-display-18-medium strong, .tp-inter-display-18-medium b { font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-weight: 700 }
.tp-inter-display-18-medium em, .tp-inter-display-18-medium i { font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-style: italic }
.tp-inter-display-18-medium + .tp-inter-display-18-medium { margin-top: 20px }  /* paragraph spacing */

/* preset lqdwz8 · .framer-Hw4S9 .framer-styles-preset-lqdwz8:not(.rich-text-wrapper),.framer-Hw4S9 .framer-styles-preset-lqdwz8.rich-text-wrapper p */
.tp-inter-display-14 { font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: -.04em; line-height: 1.4em; text-align: start; color: #3d3d3d; text-decoration: none; text-transform: none }
.tp-inter-display-14 strong, .tp-inter-display-14 b { font-family: "Inter", "Inter Placeholder", sans-serif; font-weight: 700 }
.tp-inter-display-14 em, .tp-inter-display-14 i { font-family: "Inter", "Inter Placeholder", sans-serif; font-style: italic }
.tp-inter-display-14 + .tp-inter-display-14 { margin-top: 20px }  /* paragraph spacing */

/* preset 4kbz7i · .framer-8XvVL .framer-styles-preset-4kbz7i:not(.rich-text-wrapper),.framer-8XvVL .framer-styles-preset-4kbz7i.rich-text-wrapper p */
.tp-satoshi-15-bold { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-feature-settings: normal; font-size: 15px; font-style: normal; font-weight: 700; letter-spacing: -.02em; line-height: 1em; text-align: left; color: #000; text-decoration: none; text-transform: none }
.tp-satoshi-15-bold strong, .tp-satoshi-15-bold b { font-family: "Satoshi", sans-serif; font-weight: 900 }
.tp-satoshi-15-bold em, .tp-satoshi-15-bold i { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-style: italic }
.tp-satoshi-15-bold + .tp-satoshi-15-bold { margin-top: 20px }  /* paragraph spacing */

/* preset 12bq0g · .framer-8Wn0f .framer-styles-preset-12bq0g:not(.rich-text-wrapper),.framer-8Wn0f .framer-styles-preset-12bq0g.rich-text-wrapper p */
.tp-satoshi-16-medium { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-feature-settings: normal; font-size: 16px; font-style: normal; font-weight: 500; letter-spacing: -.02em; line-height: 1.5em; text-align: left; color: #1f1f1f; text-decoration: none; text-transform: none }
.tp-satoshi-16-medium strong, .tp-satoshi-16-medium b { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-weight: 700 }
.tp-satoshi-16-medium em, .tp-satoshi-16-medium i { font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-style: italic }
.tp-satoshi-16-medium + .tp-satoshi-16-medium { margin-top: 20px }  /* paragraph spacing */

/* preset 2bpl5t · .framer-XfyYD .framer-styles-preset-2bpl5t:not(.rich-text-wrapper),.framer-XfyYD .framer-styles-preset-2bpl5t.rich-text-wrapper a */
.tp-text-link {  }
.tp-text-link:hover, .tp-text-link a:hover { color: #e81348; text-decoration: underline }

/* preset 1l3s2e · .framer-RxwMS .framer-styles-preset-1l3s2e:not(.rich-text-wrapper),.framer-RxwMS .framer-styles-preset-1l3s2e.rich-text-wrapper p */
.tp-inter-display-14-semibold { font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-feature-settings: normal; font-size: 14px; font-style: normal; font-weight: 600; letter-spacing: -.04em; line-height: 1em; text-align: left; color: #fff; text-decoration: none; text-transform: none }
.tp-inter-display-14-semibold strong, .tp-inter-display-14-semibold b { font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-weight: 700 }
.tp-inter-display-14-semibold em, .tp-inter-display-14-semibold i { font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-style: italic }
.tp-inter-display-14-semibold + .tp-inter-display-14-semibold { margin-top: 20px }  /* paragraph spacing */

/* preset 1p15plu · .framer-lt7sD .framer-styles-preset-1p15plu:not(.rich-text-wrapper),.framer-lt7sD .framer-styles-preset-1p15plu.rich-text-wrapper a */
.tp-text-link-2 { color: #fff }


/* ==========================================================================
   01-nav
   ========================================================================== */
/* NAV — fixed header (Framer component "Navigation 2", mounted by the layout template).
   Its breakpoints are the layout template's, the same on home and /prodotti:
   desktop ≥ 1200 · tablet 810–1199.98 · phone ≤ 809.98 (so on the home at 1440 the nav is "Desktop").
   Variants: Desktop (base) · Desktop Scroll (.is-scrolled ≥ 1200) · Tablet Close · Tablet Open (.is-open) ·
   tablet + .is-scrolled = Desktop (the original targets a variant that does not exist, Framer falls back to Desktop) ·
   Phone Close · Phone Open (.is-open) · Phone Scroll (.is-scrolled). Classes and layout animations: 01-nav.js. */

.nav { position: fixed; top: 0; right: 0; width: 100%; z-index: 8; animation: nav-in .6s cubic-bezier(.12, .23, .5, 1) backwards; }   /* backwards, not both: a filled animation disables the backdrop blur */
@keyframes nav-in { from { opacity: .001; transform: translateY(-40px); } }   /* appear on load: 0.6 s, from 40 px up */
@keyframes nav-fade-in { from { opacity: .001; } }
@media (prefers-reduced-motion: reduce) { .nav { animation-name: nav-fade-in; } }

/* ---------- Desktop (base) ---------- */
.nav__bar {
  display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 40px;
  width: 100%; padding: 16px 40px; position: relative; overflow: hidden;
}
.nav__inner {
  display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 10px;
  flex: 1 0 0px; width: 1px; position: relative;
}
.nav__brand {
  display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 10px;
  flex: none; width: min-content; position: relative;
}
.nav__logo { display: block; flex: none; width: 152px; height: auto; aspect-ratio: 3.8; position: relative; overflow: hidden; will-change: filter; }
.nav__logo img { object-fit: contain; }
.nav__extra {
  display: none; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 10px;
  flex: none; width: min-content; position: relative;
}
.nav__extra .nav__extra-cta { display: none; }
.nav__content {
  display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; gap: 24px;
  flex: 1 0 0px; width: 1px; position: relative; overflow: hidden;
}
.nav__links {
  display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; gap: 8px;
  flex: none; width: min-content; position: relative;
}
.nav__item, .nav__cta { flex: none; position: relative; }

/* ---------- menu buttons ("Menu Button" 1–4, variant Light): on hover the label rolls up and a coloured pill
   rises from below with a second label (tween 0.4 s, ease [.12,.23,.5,1]) ---------- */
.nav-link {
  --fill: rgb(51, 22, 31); --fill-hover: rgb(255, 28, 89); --fill-press: rgb(54, 22, 34); --in-hover: #fff;
  display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: 10px;
  width: min-content; padding: 8px 16px; position: relative; overflow: hidden; will-change: transform;
  border-radius: 100px; background-color: rgba(255, 255, 255, .12); cursor: pointer;
  font-family: "Inter", "Inter Placeholder", sans-serif; font-size: 16px; font-weight: 400; line-height: 24px;
  color: #fff; white-space: pre; -webkit-user-select: none; user-select: none;
}
.nav-link--come { --fill: rgb(181, 141, 152); --fill-hover: rgb(255, 10, 84); --fill-press: rgb(56, 14, 27); }
.nav-link--prodotti { --fill: rgb(255, 31, 90); --fill-hover: rgb(255, 139, 31); --fill-press: rgb(84, 19, 19); }
.nav-link--news { --fill: rgb(255, 31, 90); --fill-hover: rgb(200, 255, 0); --fill-press: rgb(31, 13, 23); --in-hover: rgb(28, 28, 28); }
.nav-link__bg { position: absolute; inset: 0; border-radius: 100px; background-color: rgba(255, 255, 255, .12); overflow: hidden; will-change: transform; }
.nav-link__label { position: relative; flex: none; color: #fff; transition: transform .4s cubic-bezier(.12, .23, .5, 1), color .4s cubic-bezier(.12, .23, .5, 1); }
.nav-link__fill {
  position: absolute; top: 100%; left: -1px; right: -1px; height: 45px; z-index: 1; overflow: hidden; will-change: transform;
  border-radius: 100px; background-color: var(--fill);
  transition: top .4s cubic-bezier(.12, .23, .5, 1), height .4s cubic-bezier(.12, .23, .5, 1), background-color .4s cubic-bezier(.12, .23, .5, 1);
}
.nav-link__label-in {
  position: absolute; left: 49%; bottom: -32px; transform: translateX(-50%); z-index: 1; color: #ededed;
  transition: left .4s cubic-bezier(.12, .23, .5, 1), bottom .4s cubic-bezier(.12, .23, .5, 1), color .4s cubic-bezier(.12, .23, .5, 1);
}
/* gestures exist only in the "Light" variant (not in the phone menu, "Light Phone"); hover = mouse only */
@media (hover: hover) and (min-width: 810px) {
  .nav-link:hover .nav-link__label { transform: translateY(-40px); color: rgb(138, 138, 138); }
  .nav-link:hover .nav-link__fill { top: -3px; height: calc(100% + 2px); background-color: var(--fill-hover); }
  .nav-link:hover .nav-link__label-in { left: 50%; bottom: 8px; color: var(--in-hover); }
}
@media (min-width: 810px) {
  .nav-link:active .nav-link__label { transform: translateY(-40px); color: rgb(138, 138, 138); }
  .nav-link:active .nav-link__fill { top: -2px; height: calc(100% + 2px); background-color: var(--fill-press); }
  .nav-link:active .nav-link__label-in { left: 50%; bottom: 8px; color: #fff; }
}

/* ---------- "Preordina" buttons ("Button 2": Primary / Glassy) ---------- */
.nav-cta {
  display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 10px;
  width: min-content; padding: 6px 6px 6px 16px; position: relative; overflow: visible;
  border-radius: 999px; background-color: rgba(0, 0, 0, 0); cursor: pointer; text-align: left;
  font-family: "Inter", "Inter Placeholder", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2em; color: #fff;
  transition: background-color .4s cubic-bezier(.12, .23, .5, 1), backdrop-filter .4s cubic-bezier(.12, .23, .5, 1), -webkit-backdrop-filter .4s cubic-bezier(.12, .23, .5, 1);
}
.nav-cta__label { position: relative; flex: none; white-space: pre; }
.nav-cta__arrow {
  display: flex; justify-content: center; align-items: center; flex: none; width: 38px; height: 38px; position: relative;
  border-radius: 50%; overflow: hidden; will-change: transform; background-color: rgb(54, 26, 49);
  transition: background-color .4s cubic-bezier(.12, .23, .5, 1);
}
.nav-cta__icon { display: block; flex: none; width: 19px; height: 19px; fill: #fff; transform-origin: 50% 50%; transition: transform .4s cubic-bezier(.12, .23, .5, 1); }
/* Glassy: fixed width, centred label, transparent arrow, icon turned -45° */
.nav-cta--glassy { width: 169px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav-cta--glassy .nav-cta__label { flex: 1 0 0px; width: 1px; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; text-align: center; }
.nav-cta--glassy .nav-cta__arrow { background-color: rgba(0, 0, 0, 0); }
.nav-cta--glassy .nav-cta__icon { transform: rotate(-45deg); }
@media (hover: hover) {
  .nav-cta--glassy:hover .nav-cta__arrow { background-color: #000; }
  .nav-cta--glassy:hover .nav-cta__icon { transform: none; }
}
/* Primary hover: the gradient disappears, the pink fades in (no hover in the phone menu) */
@media (hover: hover) and (min-width: 810px) {
  .nav-cta--main:hover { background-color: rgb(255, 0, 77); }
  .nav-cta--main:hover .nav-cta__bg { visibility: hidden; }
}

/* ---------- menu button (Cross Icon: 4 dots → X, spring bounce .2 / .4 s) ---------- */
.nav__toggle {
  display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 10px;
  flex: none; width: min-content; padding: 0; position: relative; overflow: visible; cursor: pointer;
}
.nav__toggle-icon { display: block; flex: none; width: 36px; height: 36px; position: relative; z-index: 1; overflow: hidden; border-radius: 60px; will-change: transform; }
.nav__dot {
  position: absolute; width: 17%; height: 17%; border-radius: 3px; background-color: #fff;
  transform: translate(-50%, -50%) rotate(0deg);
  --spring: linear(0, 0.0533, 0.1755, 0.3245, 0.474, 0.6093, 0.7234, 0.8145, 0.8838, 0.9341, 0.9688, 0.9913, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1.0051, 1.0035, 1.0023, 1.0014, 1.0007, 1);
  transition: left .4s var(--spring), top .4s var(--spring), width .4s var(--spring), height .4s var(--spring), transform .4s var(--spring), opacity .4s var(--spring);
}
.nav__dot--1 { left: 38%; top: 38%; }
.nav__dot--2 { left: 38%; top: 63%; }
.nav__dot--3 { left: 63%; top: 38%; }
.nav__dot--4 { left: 63%; top: 63%; }
.nav__bar.is-open .nav__dot--1, .nav__bar.is-open .nav__dot--3 { opacity: 0; }
.nav__bar.is-open .nav__dot--2, .nav__bar.is-open .nav__dot--4 { left: 50%; top: 50%; width: 50%; height: 3px; }
.nav__bar.is-open .nav__dot--2 { transform: translate(-50%, -50%) rotate(45deg); }
.nav__bar.is-open .nav__dot--4 { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Desktop Scroll: logo + glassy "Preordina " in a blurred pill ---------- */
@media (min-width: 1200px) {
  .nav__bar.is-scrolled { gap: 20px; }
  .nav__bar.is-scrolled .nav__inner {
    flex: none; width: min-content; padding: 4px 4px 4px 12px;
    border-radius: 33px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .nav__bar.is-scrolled .nav__content { flex: none; width: min-content; }
  .nav__bar.is-scrolled .nav__links { display: none; }
  .nav__bar.is-scrolled .nav-cta--main { width: 169px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .nav__bar.is-scrolled .nav-cta--main .nav-cta__label { flex: 1 0 0px; width: 1px; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; text-align: center; }
  .nav__bar.is-scrolled .nav-cta--main .nav-cta__label::after { content: " "; }   /* the label is "Preordina " here */
  .nav__bar.is-scrolled .nav-cta--main .nav-cta__arrow { background-color: rgba(0, 0, 0, 0); }
  .nav__bar.is-scrolled .nav-cta--main .nav-cta__icon { transform: rotate(-45deg); }
}
@media (hover: hover) and (min-width: 1200px) {
  .nav__bar.is-scrolled .nav-cta--main:hover { background-color: rgba(0, 0, 0, 0); }
  .nav__bar.is-scrolled .nav-cta--main:hover .nav-cta__bg { visibility: visible; }
  .nav__bar.is-scrolled .nav-cta--main:hover .nav-cta__arrow { background-color: #000; }
  .nav__bar.is-scrolled .nav-cta--main:hover .nav-cta__icon { transform: none; }
}

/* ---------- Tablet: Close / Open (scrolled = the Desktop base) ---------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .nav__bar:not(.is-scrolled) { flex-direction: column; }
  .nav__bar:not(.is-scrolled) .nav__inner { flex: none; width: 100%; }
  .nav__bar:not(.is-scrolled) .nav__brand { flex: 1 0 0px; width: 1px; gap: normal; justify-content: space-between; }
  .nav__bar:not(.is-scrolled) .nav__extra { display: flex; }
  .nav__bar:not(.is-scrolled):not(.is-open) .nav__content { display: none; }
  .nav__bar.is-open {
    cursor: pointer; will-change: transform; background-color: rgb(17, 17, 20); border-radius: 0 0 16px 16px;
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  }
  .nav__bar.is-open .nav__inner { flex-direction: column; gap: 24px; }
  .nav__bar.is-open .nav__brand { flex: none; width: 100%; }
  .nav__bar.is-open .nav__logo { cursor: pointer; }
  .nav__bar.is-open .nav__content { flex: none; flex-direction: column; gap: 16px; width: 100%; }
  .nav__bar.is-open .nav__links { flex-direction: column; gap: 16px; }
}

/* ---------- Phone: Close / Open / Scroll ---------- */
@media (max-width: 809.98px) {
  .nav__bar { flex-direction: column; gap: 20px; padding: 16px 20px; }
  .nav__inner { flex: none; width: 100%; }
  .nav__brand { flex: 1 0 0px; width: 1px; gap: normal; justify-content: space-between; }
  .nav__logo { width: 141px; }
  .nav__extra { display: flex; }
  .nav__bar:not(.is-open) .nav__content { display: none; }
  .nav__bar.is-open { cursor: pointer; will-change: transform; gap: 16px; background-color: rgb(17, 17, 20); border-radius: 0 0 16px 16px; }
  .nav__bar.is-open .nav__inner { flex-direction: column; gap: 24px; }
  .nav__bar.is-open .nav__brand { flex: none; width: 100%; }
  .nav__bar.is-open .nav__logo { cursor: pointer; }
  .nav__bar.is-open .nav__content { flex: none; flex-direction: column; gap: 16px; width: 100%; overflow: visible; }
  .nav__bar.is-open .nav__links { flex-direction: column; gap: 16px; }
  .nav__bar.is-scrolled .nav__brand {
    flex: none; width: min-content; gap: 16px; padding: 2px 2px 2px 6px; justify-content: center;
    border-radius: 27px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .nav__bar.is-scrolled .nav__logo { width: 125px; }
  .nav__bar.is-scrolled .nav__extra-cta { display: flex; }
  .nav__bar.is-scrolled .nav__toggle { display: none; }
}

/* ---------- open menu: links and button fade in one after the other ---------- */
@keyframes nav-item-in { from { opacity: .001; } to { opacity: 1; } }
@media (max-width: 1199.98px) {
  .nav__bar.is-open .nav__item { animation: nav-item-in .4s cubic-bezier(.12, .23, .5, 1) .1s both; }
  .nav__bar.is-open .nav__item:nth-child(2) { animation-delay: .2s; }
  .nav__bar.is-open .nav__item:nth-child(3) { animation-delay: .3s; }
  .nav__bar.is-open .nav__item:nth-child(4) { animation-delay: .4s; }
  .nav__bar.is-open .nav__cta { animation: nav-item-in .4s cubic-bezier(.12, .23, .5, 1) .5s both; }
}
@media (max-width: 809.98px) {
  .nav__bar.is-open .nav__cta { animation-timing-function: cubic-bezier(.44, 0, .56, 1); }
}


/* ==========================================================================
   99-footer
   ========================================================================== */
/* FOOTER — Framer component "Footer" (layout template). Variants follow the template's breakpoints on both pages:
   desktop ≥ 1200 (base) · tablet 810–1199.98 · phone ≤ 809.98. */

.footer {
  position: relative; flex: none; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: 10px;
  width: 100%; max-width: 1400px; padding: 64px; overflow: clip; background-color: #fff;
}
.footer::after {           /* 1px top border (Framer data-border) */
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box;
  border-top: 1px solid #edebeb; border-radius: inherit; pointer-events: none;
}
.footer__content {
  position: relative; flex: none; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: 50px;
  width: 100%;
}
.footer__top {
  position: relative; flex: none; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start;
  width: 100%; overflow: clip;
}

/* brand: app icon, name, tagline */
.footer__brand {
  position: relative; flex: none; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: 20px;
  width: min-content; overflow: clip;
}
.footer__icon { position: relative; flex: none; width: 46px; height: auto; aspect-ratio: 1; z-index: 1; }
.footer__id {
  position: relative; flex: none; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; gap: 4px;
  width: min-content; overflow: clip;
}
.footer__name { align-self: stretch; color: #1f1f1f; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.footer__tagline { color: #616161; white-space: pre; }

/* link columns (the "Connect" column keeps only "Contact": the template's social links are removed) */
.footer__nav {
  position: relative; display: flex; flex-flow: row nowrap; justify-content: space-evenly; align-items: flex-start;
  flex: 1 0 0px; width: 1px; overflow: clip;
}
.footer__col {
  position: relative; flex: none; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: 10px;
  width: min-content; overflow: clip;
}
.footer__col--connect { min-width: 93.4px; }   /* the column keeps its original width (set by "Instagram"), so nothing moves */
.footer__title { color: #616161; white-space: pre; }
.footer__list { display: flex; flex-flow: column nowrap; align-items: flex-start; gap: 10px; text-align: left; white-space: pre; }
.footer__link:hover { color: #e81348; text-decoration: underline; }
html[data-page="home"] .footer__link--home, html[data-page="prodotti"] .footer__link--pricing { color: #e81348; }   /* current page */

/* "Il Tuo Tavolo Ovunque": fit text (SVG viewBox), 96 % of the width, italic Coolvetica */
.footer__claim { position: relative; flex: none; display: block; width: 100%; height: auto; overflow: hidden; }
.footer__claim--phone { display: none; }
.footer__claim-box { overflow: visible; transform: scale(.96); transform-origin: 50% 50%; }
.footer__claim-text {
  margin: 0; font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif; font-size: 131.26013810963727px;
  font-weight: 400; letter-spacing: -.04em; line-height: 1.2em; color: #1f1f1f; text-transform: capitalize; text-align: start;
  white-space: nowrap; white-space-collapse: preserve;
}

/* legal row */
.footer__legal { position: relative; flex: none; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%; }
.footer__copyright {
  position: relative; flex: none; display: flex; flex-flow: column nowrap; justify-content: center; align-items: flex-start; gap: 4px;
  width: min-content;
}
.footer__copy {
  display: inline-block; flex: none; width: max-content; min-width: max-content; color: #b0b0b0;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif; font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: -.01em; line-height: 1.4em;
}
.footer__copy-dot { display: none; }
.footer__rights { color: #b0b0b0; white-space: pre; }
.footer__legal-links { position: relative; flex: none; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; gap: 16px; color: #b0b0b0; white-space: pre; }
.footer__legal-link:hover { color: #e81348; text-decoration: underline; }

/* byup wordmark, centred on the bottom edge */
.footer__mark { position: absolute; left: 50%; bottom: 13px; z-index: 1; flex: none; width: 161px; height: auto; aspect-ratio: 2.03509; transform: translateX(-50%); object-fit: cover; }

/* ---------- tablet ---------- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .footer { padding: 44px; }
  .footer__copyright { gap: 8px; }
  .footer__legal-links { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- phone ---------- */
@media (max-width: 809.98px) {
  .footer { max-width: 500px; padding: 32px 32px 150px; }
  .footer__content { gap: 40px; }
  .footer__top { flex-direction: column; justify-content: flex-start; gap: 32px; }
  .footer__nav { display: none; }
  .footer__claim--wide { display: none; }
  .footer__claim--phone { display: block; }
  .footer__claim--phone .footer__claim-box { transform: none; }
  .footer__claim--phone .footer__claim-text { font-size: 43.855714057017686px; letter-spacing: -.05em; }
  .footer__legal { flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; }
  .footer__copyright { flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; }
  .footer__copy-dot { display: inline; }
  .footer__legal-links { justify-content: flex-start; width: 100%; color: #fff; }   /* white on white, as in the original */
  .footer__legal-link:hover { color: inherit; text-decoration: none; }
}


/* ==========================================================================
   h02-hero
   ========================================================================== */
/* 02 · HERO — header with the animated WebGL gradient (h02-hero.js), title block hanging 244px below the
   container (clipped by the header, like the original), cycling words and the pre-order button.
   Desktop ≥1600 = base · tablet 810–1599.98 (same as desktop) · phone ≤809.98 */
.h-hero {
  align-items: center;
  background-color: #141414;
  display: flex;
  flex: none;
  flex-direction: row;
  gap: 7px;
  height: 90.4429vh;
  justify-content: center;
  overflow: hidden;
  padding: 200px 40px 145px;
  position: relative;
  width: 100%;
}

/* ---- background: shader canvas + grain, faded out at the bottom ---- */
.h-hero__bg {
  height: 100%;
  left: 0;
  -webkit-mask: linear-gradient(#000 0% 83%, #0000 100%);
  mask: linear-gradient(#000 0% 83%, #0000 100%);
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}
.h-hero__bg-inner { height: 100%; overflow: hidden; position: relative; width: 100%; }
.h-hero__canvas { display: block; height: 100%; width: 100%; }
.h-hero__grain {
  background-image: url(../img/home-hero-grana.webp);
  background-repeat: repeat;
  background-size: 200px;
  inset: 0;
  opacity: 0.25;
  position: absolute;
}

/* ---- content ---- */
.h-hero__container {
  align-items: center;
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;
  gap: 60px;
  justify-content: flex-start;
  max-width: 1440px;
  min-height: 214px;
  position: relative;
  width: 1px;
}
.h-hero__title {
  align-items: center;
  bottom: -244px;
  display: flex;
  flex-direction: column;
  gap: 29px;
  justify-content: center;
  left: 0;
  padding: 101px 0;
  position: absolute;
  right: 0;
  z-index: 1;
}

/* badge "In Arrivo su tutti gli Store" */
.h-hero__badge-wrap { flex: none; position: relative; will-change: transform; z-index: 1; }
.h-hero__badge {
  align-items: center;
  background-color: #f6f6f6;
  border-radius: 100px;
  display: flex;
  gap: 10px;
  justify-content: center;
  overflow: clip;
  padding: 10px 14px;
  position: relative;
  width: min-content;
}
.h-hero__badge-play { aspect-ratio: 0.909504; flex: none; height: auto; position: relative; width: 14px; }
.h-hero__badge-store {
  background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16.002 16%22 overflow=%22visible%22><g><g><defs><linearGradient id=%22a%22 x1=%220.49751243781094523%22 x2=%220.5024875621890548%22 y1=%220%22 y2=%221%22><stop offset=%220%22 stop-color=%22rgb(24,191,251)%22/><stop offset=%221%22 stop-color=%22rgb(32,114,243)%22/></linearGradient></defs><path d=%22M 12.768 0 L 3.232 0 C 1.446 0 0 1.446 0 3.232 L 0 12.77 C 0 14.554 1.446 16 3.232 16 L 12.77 16 C 14.554 16 16.002 14.554 16.002 12.768 L 16.002 3.232 C 16 1.446 14.554 0 12.768 0 Z%22 fill=%22url(%23a)%22/></g><path d=%22M 7.93 3.677 L 8.254 3.117 C 8.454 2.767 8.9 2.649 9.25 2.849 C 9.6 3.049 9.718 3.495 9.518 3.845 L 6.396 9.249 L 8.654 9.249 C 9.386 9.249 9.796 10.109 9.478 10.705 L 2.858 10.705 C 2.454 10.705 2.13 10.381 2.13 9.977 C 2.13 9.573 2.454 9.249 2.858 9.249 L 4.714 9.249 L 7.09 5.131 L 6.348 3.843 C 6.148 3.493 6.266 3.051 6.616 2.847 C 6.966 2.647 7.408 2.765 7.612 3.115 Z M 5.122 11.455 L 4.422 12.669 C 4.222 13.019 3.776 13.137 3.426 12.937 C 3.076 12.737 2.958 12.291 3.158 11.941 L 3.678 11.041 C 4.266 10.859 4.744 10.999 5.122 11.455 Z M 11.15 9.253 L 13.044 9.253 C 13.448 9.253 13.772 9.577 13.772 9.981 C 13.772 10.385 13.448 10.709 13.044 10.709 L 11.992 10.709 L 12.702 11.941 C 12.902 12.291 12.784 12.733 12.434 12.937 C 12.084 13.137 11.642 13.019 11.438 12.669 C 10.242 10.595 9.344 9.043 8.748 8.009 C 8.138 6.957 8.574 5.901 9.004 5.543 C 9.482 6.363 10.196 7.601 11.15 9.253 Z%22 fill=%22rgb(255,255,255)%22/></g></svg>");
  background-size: 100% 100%;
  display: block;
  flex: none;
  height: 16px;
  image-rendering: pixelated;
  position: relative;
  width: 16px;
}
.h-hero__badge-text {
  color: #000;
  flex: none;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1em;
  position: relative;
  text-align: left;
  white-space: pre;
  z-index: 1;
}

/* headline (Framer code component "Connected Headline": fluid clamp() sizes) */
.h-hero__headline-wrap { flex: none; max-width: 1500px; position: relative; width: 1180px; }
.h-hero__headline {
  align-items: center;
  color: rgb(240, 240, 240);
  display: flex;
  flex-direction: column;
  gap: 1.2px;
  justify-content: center;
  line-height: 1;
  margin: 0;
  max-width: 1180px;
  position: relative;
  text-align: center;
  width: 100%;
  will-change: transform;
}
.h-hero__headline-top {
  font-family: "Coolvetica", "Arial", sans-serif;   /* no "Coolvetica" face exists: Arial, exactly like the original */
  font-size: clamp(31.6px, 5.53vw, 79px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1em;
  margin: 0;
  width: 100%;
}
.h-hero__headline-bottom {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-size: clamp(68.25px, 21.45vw, 195px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.92em;
  margin: 0;
  width: 100%;
}

/* phone-only second headline */
.h-hero__alt { flex: none; position: relative; width: 1180px; }
.h-hero__alt-text {
  overflow-wrap: break-word;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgb(240, 240, 240);
  font-family: "Instrument Serif", "Instrument Serif Placeholder", serif;
  font-size: 31px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 80%;
  text-align: center;
}
.h-hero__alt-text > span { letter-spacing: -0.03em; line-height: 80%; }
.h-hero__alt-a { font-size: 92px; }
.h-hero__alt-b { font-size: 99px; }
.h-hero__alt-c { font-size: 116px; }
.h-hero__word { display: inline-block; will-change: transform; }

/* cycling words (Framer code component "Blur Cycle") */
.h-hero__cycle-wrap { flex: none; position: relative; will-change: transform; }
.h-hero__cycle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  overflow: visible;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  width: calc(100% + 10px);
}
.h-hero__cycle p,
.h-hero__cycle-sizer {
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 79px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 1em;
  margin: 0;
  text-align: center;
}
.h-hero__cycle-sizer { opacity: 0; pointer-events: none; white-space: pre-wrap; width: 100%; }
.h-hero__cycle-static { color: #fff; left: 0; position: absolute; top: 0; width: 100%; }   /* no-JS fallback */
.h-hero__cycle-phrase { left: 0; overflow: visible; position: absolute; text-align: center; top: 0; width: 100%; }
.h-hero__cycle-line { display: flex; flex-wrap: wrap; gap: 0; justify-content: center; width: 100%; }
.h-hero__cycle-seg { display: inline-flex; flex-wrap: nowrap; white-space: pre; }
.h-hero__cycle-char { display: inline-block; will-change: transform; z-index: 1; }
.h-hero__cycle-char p { color: #fff; }

/* pre-order button (component "Download for iPhone Button", variant Large) */
.h-hero__cta-wrap { flex: none; position: relative; will-change: transform; }
.h-hero__cta {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  gap: 10px;
  justify-content: center;
  overflow: visible;
  padding: 0;
  position: relative;
  width: min-content;
}
.h-hero__cta-box {
  align-items: center;
  background-color: #1f1f1f;
  border-radius: 16px;
  box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.33), inset 0px 0px 5px 0px rgba(255, 255, 255, 0);
  display: flex;
  flex: none;
  gap: 10px;
  justify-content: center;
  overflow: clip;
  padding: 12px 16px;
  position: relative;
  width: min-content;
  /* spring {bounce .2, duration .4} */
  transition: box-shadow 0.4s linear(0, 0.0533, 0.1755, 0.3245, 0.474, 0.6093, 0.7234, 0.8145, 0.8838, 0.9341, 0.9688, 0.9913, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1.0051, 1.0035, 1.0023, 1.0014, 1.0007, 1),
              transform 0.4s linear(0, 0.0533, 0.1755, 0.3245, 0.474, 0.6093, 0.7234, 0.8145, 0.8838, 0.9341, 0.9688, 0.9913, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1.0051, 1.0035, 1.0023, 1.0014, 1.0007, 1);
}
.h-hero__cta-icon {
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  overflow: clip;
  padding: 0 0 2px;
  position: relative;
}
.h-hero__cta-icon svg { display: block; flex: none; height: 16px; overflow: visible; width: 13px; }
.h-hero__cta-label { color: #fff; display: block; flex: none; position: relative; white-space: pre; z-index: 1; }
@media (hover: hover) {
  .h-hero__cta:hover .h-hero__cta-box { box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.45), inset 0px 0px 5px 0px rgba(255, 255, 255, 0.49); }
}
.h-hero__cta:active .h-hero__cta-box { box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.45), inset 0px 0px 5px 0px rgb(255, 255, 255); transform: scale(0.985); }
.h-hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 16px; }

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .h-hero { height: min-content; padding: 140px 20px 0; }
  .h-hero__bg { bottom: 0; height: auto; top: -55px; }
  .h-hero__container { gap: 119px; }
  .h-hero__title { gap: 25px; padding: 8px 0; }
  .h-hero__badge-play { width: 9px; }
  .h-hero__badge-store {
    background-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 10.801 10%22 overflow=%22visible%22><g><g><defs><linearGradient id=%22a%22 x1=%220.49751243781094523%22 x2=%220.5024875621890548%22 y1=%220%22 y2=%221%22><stop offset=%220%22 stop-color=%22rgb(24,191,251)%22/><stop offset=%221%22 stop-color=%22rgb(32,114,243)%22/></linearGradient></defs><path d=%22M 8.618 0 L 2.181 0 C 0.976 0 0 0.904 0 2.02 L 0 7.981 C 0 9.096 0.976 10 2.181 10 L 8.619 10 C 9.823 10 10.801 9.096 10.801 7.98 L 10.801 2.02 C 10.799 0.904 9.823 0 8.618 0 Z%22 fill=%22url(%23a)%22/></g><path d=%22M 5.352 2.298 L 5.571 1.948 C 5.706 1.73 6.007 1.656 6.243 1.781 C 6.48 1.906 6.559 2.185 6.424 2.403 L 4.317 5.781 L 5.841 5.781 C 6.335 5.781 6.612 6.318 6.397 6.691 L 1.929 6.691 C 1.656 6.691 1.438 6.488 1.438 6.236 C 1.438 5.983 1.656 5.781 1.929 5.781 L 3.182 5.781 L 4.786 3.207 L 4.285 2.402 C 4.15 2.183 4.229 1.907 4.466 1.78 C 4.702 1.655 5 1.728 5.138 1.947 Z M 3.457 7.159 L 2.985 7.918 C 2.85 8.137 2.549 8.211 2.312 8.086 C 2.076 7.961 1.997 7.682 2.132 7.463 L 2.483 6.901 C 2.879 6.787 3.202 6.874 3.457 7.159 Z M 7.526 5.783 L 8.804 5.783 C 9.077 5.783 9.296 5.986 9.296 6.238 C 9.296 6.491 9.077 6.693 8.804 6.693 L 8.094 6.693 L 8.573 7.463 C 8.708 7.682 8.629 7.958 8.393 8.086 C 8.156 8.211 7.858 8.137 7.72 7.918 C 6.913 6.622 6.307 5.652 5.905 5.006 C 5.493 4.348 5.787 3.688 6.077 3.464 C 6.4 3.977 6.882 4.751 7.526 5.783 Z%22 fill=%22rgb(255,255,255)%22/></g></svg>");
    height: 10px;
    width: 11px;
  }
  .h-hero__badge-text { font-size: 12px; }
  .h-hero__cycle p,
  .h-hero__cycle-sizer {
    font-family: "Inter", "Inter Placeholder", sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1em;
  }
  .h-hero__cycle-char p { text-align: start; }
}


/* ==========================================================================
   h03-ritmo
   ========================================================================== */
/* 03 · RITMO — sticky phone mockup + scroll effects (fx.js attributes in the markup, screen/text effects in
   h03-ritmo.js). Desktop ≥1600 = base · tablet 810–1599.98 · phone ≤809.98 */
.h-ritmo {
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  max-width: 2160px;
  overflow: visible;
  position: relative;
  width: 100%;
}
/* the original <main> is dark (#141414) behind its sections: keeps the sides dark when the section is narrower
   than the viewport (phone 500px max, > 2160px) */
.h-ritmo::before {
  background-color: #141414;
  bottom: 0;
  content: "";
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
}
.h-ritmo__content {
  align-items: center;
  background-color: #141414;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0;
  overflow: visible;
  padding: 0 64px;
  position: relative;
  width: 100%;
  z-index: 3;
}

/* ---- sticky graphics block ---- */
.h-ritmo__graphics {
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  min-height: 750px;
  min-width: 365px;
  position: sticky;
  top: 0;
  width: min-content;
  will-change: transform;
  z-index: 2;
}
.h-ritmo__device {
  align-items: center;
  display: flex;
  flex: none;
  gap: 10px;
  justify-content: center;
  left: 0;
  min-height: 750px;
  min-width: 364px;
  overflow: visible;
  position: absolute;
  top: -46px;
  will-change: transform;
  z-index: 3;
}
.h-ritmo__frame {
  aspect-ratio: 0.486667;
  height: auto;
  left: 0;
  margin: 0;
  pointer-events: none;
  position: absolute;
  right: -1px;
  top: 0;
  -webkit-user-select: none;
  user-select: none;
  z-index: 3;
}

/* app screen */
.h-ritmo__screen { height: 98%; left: 2.73972%; position: absolute; top: 0.833353%; width: 95%; z-index: 2; }
.h-ritmo__screen-inner {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border-radius: 56px;
  height: 100%;
  overflow: clip;
  position: relative;
  width: 100%;
}
.h-ritmo__screen-el {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  left: 0;
  overflow: visible;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}
.h-ritmo__screen-img { aspect-ratio: 0.5; flex: none; height: auto; position: relative; width: 371px; }

/* "Results" panel */
.h-ritmo__panel {
  align-items: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.71);
  border-radius: 38px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 291px;
  justify-content: flex-start;
  left: 12px;
  overflow: clip;
  padding: 12px;
  position: absolute;
  right: 12px;
  will-change: transform;
  z-index: 1;
}
.h-ritmo__panel[hidden] { display: none; }
.h-ritmo__panel-content {
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 14px;
  padding: 12px;
  position: relative;
  width: 100%;
}
.h-ritmo__place,
.h-ritmo__person { align-items: center; display: flex; flex: none; gap: 10px; justify-content: center; position: relative; width: 100%; }
.h-ritmo__place-img { aspect-ratio: 1; border-radius: 11px; flex: none; height: auto; position: relative; width: 52px; }
.h-ritmo__place-img::after {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: inherit;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.h-ritmo__place-text,
.h-ritmo__person-text {
  align-items: flex-start;
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 1px;
}
.h-ritmo__place-text { gap: 2px; }
.h-ritmo__person-text { gap: 4px; }
.h-ritmo__place-text p,
.h-ritmo__person-text p,
.h-ritmo__people-title,
.h-ritmo__card-data p { overflow-wrap: break-word; white-space: pre-wrap; width: 100%; word-break: break-word; }
.h-ritmo__place-name { text-align: left; }
.h-ritmo__actions { align-items: center; display: flex; flex: none; gap: 6px; justify-content: center; position: relative; width: 100%; }
.h-ritmo__action {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  display: flex;
  flex: 1 0 0px;
  gap: 10px;
  justify-content: center;
  overflow: clip;
  padding: 8px 16px;
  position: relative;
  width: 1px;
}
.h-ritmo__action > span { color: #1f1f1f; flex: none; position: relative; white-space: pre; z-index: 1; }
.h-ritmo__action--primary { background-color: #e81348; }
.h-ritmo__action--primary > span { color: #fff; }
.h-ritmo__people {
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 58%);
  mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 58%);
  position: relative;
  width: 100%;
}
.h-ritmo__people-title { color: #1f1f1f; }
.h-ritmo__person-icon { aspect-ratio: 1; background-color: rgba(0, 0, 0, 0.1); border-radius: 11px; flex: none; height: auto; position: relative; width: 44px; }
.h-ritmo__person-icon--light { background-color: rgba(0, 0, 0, 0.08); }
.h-ritmo__person-icon .h-ritmo__icon { color: #fff; --sw: 2; }
.h-ritmo__person-icon .h-ritmo__icon--w25 { --sw: 2.5; }
.h-ritmo__person-name {
  color: #1f1f1f;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2em;
}
.h-ritmo__c-fff { color: #fff; }
.h-ritmo__c-737373 { color: #737373; }
.h-ritmo__c-545454 { color: rgb(84, 84, 84); }
.h-ritmo__c-616161 { color: #616161; }

/* line icons (24×24, centred in their box) */
.h-ritmo__icon {
  aspect-ratio: 1;
  display: block;
  height: auto;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
}
.h-ritmo__icon path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--sw, 2);
}

/* ---- "Decidi tu, al Tuo Ritmo" + cards ---- */
.h-ritmo__reveal {
  align-items: center;
  bottom: -164px;
  display: flex;
  flex: none;
  gap: 10px;
  justify-content: center;
  left: 50%;
  max-width: 900px;
  min-height: 128px;
  overflow: visible;
  position: absolute;
  transform: translate(-50%);
  width: 110%;
}
.h-ritmo__heading { display: contents; font-size: 12px; font-weight: 400; }
.h-ritmo__title {
  color: #fff;
  display: block;
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 43px;
  font-weight: 400;
  left: 0;
  line-height: 1em;
  overflow-wrap: break-word;
  pointer-events: none;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  white-space: pre-wrap;
  word-break: break-word;
  z-index: 1;
}
.h-ritmo__word { white-space: nowrap; }
.h-ritmo__char { display: inline-block; will-change: transform; }
.h-ritmo__rhythm { bottom: 8px; display: block; left: 50%; position: absolute; transform: translate(-50%); z-index: 1; }
/* Framer code component "Gradient Text": infinite gradient sweep, right to left, 8 s */
.h-ritmo__rhythm-text {
  animation: h-ritmo-gradient 8s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(45deg, transparent, rgb(255, 30, 91), rgb(255, 135, 31), rgb(255, 0, 77), transparent);
  background-position: 100% 50%;
  background-size: 400% 100%;
  cursor: default;
  display: inline-block;
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 65px;
  font-style: normal;
  font-weight: 400;
  height: auto;
  letter-spacing: -0.02em;
  line-height: 1.2em;
  min-height: max-content;
  overflow: visible;
  padding: 0.1em 0;
  position: relative;
  -webkit-text-fill-color: transparent;
  width: max-content;
}
.h-ritmo__rhythm-text > span { display: block; line-height: inherit; overflow: visible; }
@keyframes h-ritmo-gradient {
  from { background-position: 100% 50%; }
  to { background-position: -300% 50%; }
}

/* notification cards (component "Nutrition Toast"): positioned boxes + an inner layer moved by fx.js */
.h-ritmo__card-pos { height: auto; position: absolute; z-index: 1; }
.h-ritmo__card-pos--tavolo { right: -194px; top: -90px; width: 155px; }
.h-ritmo__card-pos--presto { left: 138%; top: 77%; transform: translate(-50%, -50%); width: 155px; }
.h-ritmo__card-pos--spritz { left: -34%; top: 73%; transform: translate(-50%, -50%); width: 158px; }
.h-ritmo__card-pos--conto { left: -30%; top: -44%; transform: translate(-50%, -50%); width: 162px; }
.h-ritmo__card-fx { width: 100%; will-change: transform; }
.h-ritmo__card {
  align-items: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #f6f6f6;
  border-radius: 21px;
  display: flex;
  gap: 10px;
  justify-content: center;
  overflow: clip;
  padding: 12px;
  position: relative;
  width: 100%;
}
.h-ritmo__card-icon { aspect-ratio: 1; border-radius: 11px; flex: none; height: auto; position: relative; width: 44px; }
.h-ritmo__card-icon .h-ritmo__icon { --sw: 2; }
.h-ritmo__card-icon .h-ritmo__icon--w25 { --sw: 2.5; }
.h-ritmo__card-icon--tavolo { background-color: rgb(15, 29, 56); color: rgb(18, 152, 224); }
.h-ritmo__card-icon--presto { background-color: rgb(61, 43, 15); color: rgb(255, 183, 74); }
.h-ritmo__card-icon--spritz { background-color: rgb(51, 13, 28); color: rgb(255, 74, 149); }
.h-ritmo__card-icon--conto { background-color: rgb(13, 51, 16); color: rgb(27, 227, 41); }
.h-ritmo__card-data { align-items: flex-start; display: flex; flex: 1 0 0px; flex-direction: column; gap: 4px; justify-content: center; position: relative; width: 1px; }

/* 3D food icons (component "3D Food Icons") */
.h-ritmo__food { aspect-ratio: 1; height: auto; position: absolute; width: 140px; z-index: 1; }
.h-ritmo__food-fx { cursor: pointer; height: 100%; width: 100%; will-change: transform; }
.h-ritmo__food-img { aspect-ratio: 1; height: 100%; margin: 0; position: relative; width: 100%; }
.h-ritmo__food--spritz { left: -165px; top: -79px; }
.h-ritmo__food--spritz .h-ritmo__food-fx,
.h-ritmo__food--cocktail .h-ritmo__food-fx,
.h-ritmo__food--app .h-ritmo__food-fx { filter: blur(2px); }
.h-ritmo__food--cocktail { bottom: 144px; left: -143px; width: 119px; }
.h-ritmo__food--pasta { left: -9%; top: 44%; transform: translate(-50%, -50%); z-index: 3; }
.h-ritmo__food--cloche { left: 110%; top: -6%; transform: translate(-50%, -50%); z-index: 4; }
.h-ritmo__food--sushi { bottom: 158px; right: -119px; }
.h-ritmo__food--app { left: 113%; top: 32%; transform: translate(-50%, -50%); width: 122px; }

/* ---- scroll length ---- */
.h-ritmo__triggers {
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 0;
  justify-content: center;
  overflow: clip;
  padding: 0;
  position: relative;
  width: 100%;
}
.h-ritmo__trigger { flex: none; height: 100px; overflow: clip; pointer-events: none; position: relative; -webkit-user-select: none; user-select: none; width: 100%; z-index: -1; }
.h-ritmo__scroll-area { flex: none; height: 75vh; pointer-events: none; position: relative; -webkit-user-select: none; user-select: none; width: 100%; z-index: -1; }

/* ---- tablet ---- */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-ritmo__content { padding: 0 44px 44px; }
  .h-ritmo__scroll-area { height: 52.3148vh; }
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .h-ritmo { max-width: 500px; }
  .h-ritmo__content { padding: 0 32px; }
  .h-ritmo__device { gap: 21px; height: 90%; left: 5.20548%; min-height: 0; min-width: 0; top: -31px; width: 89%; }
  .h-ritmo__frame { right: 0; }
  .h-ritmo__screen { left: 2.60736%; top: 0; }
  .h-ritmo__screen-inner { border-radius: 48px; }
  .h-ritmo__reveal { bottom: -110px; min-height: 71px; }
  .h-ritmo__title { font-size: 29px; top: -22px; }
  .h-ritmo__rhythm { bottom: auto; top: -5px; }
  .h-ritmo__rhythm-text { animation-duration: 20s; font-size: 50px; }
  .h-ritmo__food { width: 100px; }
  .h-ritmo__food--spritz { left: -47px; top: 58px; }
  .h-ritmo__food--pasta { left: 2%; top: 53%; }
  .h-ritmo__food--cloche { left: 98%; top: 15%; }
  .h-ritmo__food--app { left: 100%; top: 53%; }
  .h-ritmo__trigger { height: 40px; }
  .h-ritmo__scroll-area { height: 19.4313vh; }
}


/* ==========================================================================
   h04-piatti
   ========================================================================== */
/* 04 · PIATTI (Framer "Food Suggestions") — base = desktop ≥1600 · tablet 810–1599 · phone ≤809
   Springs as CSS linear() (tools/spring.js): --h-piatti-s1 = spring bounce .2 / .4s (Food Suggestion),
   --h-piatti-s2 = bounce .25 / .45s (helper hover), --h-piatti-s3 = bounce 0 / .4s (modal),
   --h-piatti-s4 = bounce 0 / .8s (guide cursor). */
.h-piatti, .h-piatti-guide {
  --h-piatti-s1: linear(0, 0.0533, 0.1755, 0.3245, 0.474, 0.6093, 0.7234, 0.8145, 0.8838, 0.9341, 0.9688, 0.9913, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1.0051, 1.0035, 1.0023, 1.0014, 1.0007, 1);
  --h-piatti-s2: linear(0, 0.0473, 0.1592, 0.3003, 0.4469, 0.5838, 0.7031, 0.8012, 0.8779, 0.935, 0.9752, 1.0017, 1.0176, 1.0257, 1.0283, 1.0274, 1.0245, 1.0206, 1.0164, 1.0125, 1.009, 1.0061, 1.0038, 1.0021, 1.0009, 1.0001, 0.9996, 0.9993, 1);
  --h-piatti-s3: linear(0, 0.0535, 0.1694, 0.3039, 0.4346, 0.5509, 0.6493, 0.7298, 0.794, 0.8443, 0.8832, 0.9129, 0.9354, 0.9523, 0.9649, 0.9743, 0.9812, 0.9863, 0.9901, 0.9928, 0.9948, 0.9963, 0.9973, 0.9981, 0.9986, 1);
  --h-piatti-s4: linear(0, 0.0151, 0.0535, 0.107, 0.1694, 0.2361, 0.3039, 0.3706, 0.4346, 0.4949, 0.5509, 0.6024, 0.6493, 0.6917, 0.7298, 0.7638, 0.794, 0.8207, 0.8443, 0.865, 0.8832, 0.8991, 0.9129, 0.925, 0.9354, 0.9445, 0.9523, 0.9591, 0.9649, 0.97, 0.9743, 0.978, 0.9812, 0.984, 0.9863, 0.9884, 0.9901, 0.9916, 0.9928, 0.9939, 0.9948, 0.9956, 0.9963, 0.9968, 0.9973, 0.9977, 0.9981, 0.9984, 0.9986, 0.9988, 1);
}

.h-piatti {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  max-width: 2160px;
  height: 96.03729603729604vh;
  padding: 66px;
  overflow: visible;
  border-top-left-radius: 160px;
  border-top-right-radius: 160px;
}
/* The original sits on a dark (#141414) page wrapper that shows around the rounded corners (and beside the
   section above 2160px): painted here, under the white card. */
.h-piatti::before, .h-piatti::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.h-piatti::before { top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background-color: #141414; }
.h-piatti::after { inset: 0; border-radius: inherit; background-color: #fff; }
.h-piatti__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- lens headline (Text Reveal Lens) ---- */
.h-piatti__lens {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 495px;
  height: 378px;
  overflow: hidden;
  cursor: none;
}
.h-piatti__lens-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #000;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 76px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9em;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  user-select: none;
}
.h-piatti__lens-text--reveal {
  color: transparent;
  background: linear-gradient(45deg, rgb(255, 0, 81), rgb(255, 0, 77));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  clip-path: circle(100px at 50% 50%);
}

/* ---- floating food suggestions (positions: Framer % of the section) ---- */
.h-piatti__food {
  position: absolute;
  z-index: 2;
  flex: none;
  width: 140px;
  height: auto;
  aspect-ratio: 1 / 1;
  translate: -50% -50%;   /* transformTemplate; data-fx-scroll writes transform (offset + rotation) */
  will-change: transform;
}
.h-piatti__food--chicken   { left: 17%; top: 50%; }
.h-piatti__food--ramen     { left: 27%; top: 25%; }
.h-piatti__food--salad     { left: 34%; top: 76%; width: 136px; }
.h-piatti__food--icecream  { left: 50%; top: 25%; }
.h-piatti__food--pizza     { left: 67%; top: 73%; }
.h-piatti__food--sandwich  { left: 76%; top: 23%; }
.h-piatti__food--chocolate { left: 80%; top: 50%; }

/* Food Suggestion component: 3D icon + toast tooltip */
.h-sugg {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  overflow: visible;
  cursor: default;
}
.h-sugg__icon {
  position: relative;
  z-index: 1;
  flex: 1 0 0px;
  width: 1px;
  height: 100%;
  filter: blur(0px);
  transition: filter .4s var(--h-piatti-s1), scale .4s var(--h-piatti-s1);
}
.h-sugg__img { position: relative; width: 100%; height: 100%; aspect-ratio: 1 / 1; cursor: pointer; }
.h-sugg__tip {
  position: absolute;
  left: 50%;
  top: 126%;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 12px 20px;
  overflow: clip;
  background-color: #f6f6f6;
  border-radius: 16px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  translate: -50% -50%;
  transform-origin: 50% 0;
  transition: opacity .4s var(--h-piatti-s1), scale .4s var(--h-piatti-s1), filter .4s var(--h-piatti-s1);
}
.h-sugg__badge {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 24px;
  height: 24px;
  padding-top: 1px;
  border-radius: 100%;
  background-color: #21bf2b;
  transition: background-color .4s var(--h-piatti-s1);
}
.h-sugg__ico {
  display: none;
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  overflow: hidden;
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.h-sugg__label {
  display: flex;
  flex: none;
  flex-direction: column;
  color: #1f1f1f;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2em;
  white-space: pre;
  transition: color .4s var(--h-piatti-s1);
}
.h-sugg__t { display: none; }

/* variants — yes / no / blur-static: blurred icon, collapsed tooltip */
.h-sugg--yes .h-sugg__icon, .h-sugg--no .h-sugg__icon, .h-sugg--blur-static .h-sugg__icon { filter: blur(5px); }
.h-sugg--yes .h-sugg__tip, .h-sugg--no .h-sugg__tip, .h-sugg--blur-static .h-sugg__tip { opacity: 0; scale: 0; filter: blur(5px); }
.h-sugg--yes .h-sugg__ico--check, .h-sugg--blur-static .h-sugg__ico--check,
.h-sugg--yes .h-sugg__t--yes, .h-sugg--blur-static .h-sugg__t--yes { display: block; }
.h-sugg--yes .h-sugg__label, .h-sugg--no .h-sugg__label, .h-sugg--blur-static .h-sugg__label { color: #fff; }
.h-sugg--no .h-sugg__badge { background-color: #ff4040; }
.h-sugg--no .h-sugg__ico--x, .h-sugg--no .h-sugg__t--no { display: block; }
/* yes-static / no-static: sharp icon, tooltip shown */
.h-sugg--yes-static .h-sugg__ico--check, .h-sugg--yes-static .h-sugg__t--perte { display: block; }
.h-sugg--no-static .h-sugg__badge { background-color: rgb(207, 48, 103); }
.h-sugg--no-static .h-sugg__label { color: rgb(13, 11, 11); }
.h-sugg--no-static .h-sugg__ico--users, .h-sugg--no-static .h-sugg__t--per2 { display: block; }
/* plain (Framer "custom1"): sharp icon, no tooltip */
.h-sugg--plain .h-sugg__tip { display: none; }
/* hover states (yes / no only) */
@media (hover: hover) {
  .h-sugg--yes:hover .h-sugg__icon, .h-sugg--no:hover .h-sugg__icon { filter: blur(0px); scale: 1.2; }
  .h-sugg--yes:hover .h-sugg__tip, .h-sugg--no:hover .h-sugg__tip { opacity: 1; scale: 1; filter: blur(0px); }
  .h-sugg--yes:hover .h-sugg__label, .h-sugg--no:hover .h-sugg__label { color: #1f1f1f; }
  .h-sugg--yes:hover .h-sugg__t--yes, .h-sugg--no:hover .h-sugg__t--no, .h-sugg--no:hover .h-sugg__ico--x { display: none; }
  .h-sugg--yes:hover .h-sugg__t--perte, .h-sugg--no:hover .h-sugg__t--dividi, .h-sugg--no:hover .h-sugg__ico--users { display: block; }
  .h-sugg--no:hover .h-sugg__badge { background-color: rgb(255, 126, 94); }
}

/* ---- "Come scelgo un piatto?" ---- */
.h-piatti__helper {
  position: absolute;
  left: 50%;
  bottom: 122px;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 12px 16px;
  overflow: clip;
  background-color: #f6f6f6;
  border-radius: 16px;
  cursor: pointer;
  transform: translateX(-50%);
  will-change: transform;
  /* hover out = Motion's default transitions: colour tween .3s, scale spring 550/30 that settles (restDelta .005)
     at 80% after 90 ms and jumps to 1 */
  transition: background-color .3s cubic-bezier(.25, .1, .35, 1),
    transform 90ms linear(0, 0.017, 0.0625, 0.1288, 0.209, 0.2977, 0.39, 0.4821, 0.5711, 0.6547, 0.7313, 0.8);
}
@media (hover: hover) {
  .h-piatti__helper:hover {
    background-color: #ededed;
    transform: translateX(-50%) scale(1.025);
    transition: background-color .45s var(--h-piatti-s2), transform .45s var(--h-piatti-s2);
  }
}
.h-piatti__helper-ico {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  overflow: hidden;
  fill: none;
  stroke: #000;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.h-piatti__helper-txt { position: relative; z-index: 1; display: flex; flex: none; flex-direction: column; color: #000; white-space: pre; }

/* ---- guide overlay (portal in Framer) ---- */
.h-piatti-guide[hidden] { display: none; }
.h-piatti-guide__dim {
  position: fixed;
  inset: 0;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.6);
  user-select: none;
  opacity: 0;
}
.h-piatti-guide__content {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: clip;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.h-piatti-guide__modal {
  position: relative;
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 0;
  width: 1px;
  max-width: 350px;
  height: min-content;
  overflow: clip;
  background-color: #fff;
  border-radius: 44px;
  outline: none;
  opacity: 0;
  transform: translateY(30px);
}
/* open: dim tween .2s, modal spring bounce 0 / .4s — close: both tween .2s */
.h-piatti-guide.is-open .h-piatti-guide__dim { opacity: 1; transition: opacity .2s cubic-bezier(.5, 0, .88, .77); }
.h-piatti-guide.is-open .h-piatti-guide__modal { opacity: 1; transform: none; transition: opacity .4s var(--h-piatti-s3), transform .4s var(--h-piatti-s3); }
.h-piatti-guide.is-closing .h-piatti-guide__dim,
.h-piatti-guide.is-closing .h-piatti-guide__modal { transition: opacity .2s cubic-bezier(.12, .23, .5, 1), transform .2s cubic-bezier(.12, .23, .5, 1); }
.h-piatti-guide__art {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 290px;
  padding: 0;
  overflow: clip;
}
/* Food Suggestion Interaction Guide: Blur Static (1 s) ⇄ Yes Static (2 s) + cursor */
.h-guide {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 140px;
  height: 140px;
  overflow: visible;
}
.h-guide__sugg { position: relative; z-index: 2; flex: none; width: 140px; height: auto; aspect-ratio: 1 / 1; }
.h-guide__cursor {
  position: absolute;
  left: 131%;
  top: 98%;
  z-index: 2;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: min-content;
  height: min-content;
  translate: -50% -50%;
  transition: left .8s var(--h-piatti-s4), top .8s var(--h-piatti-s4);
}
.h-guide.is-hovered .h-guide__cursor { left: 62%; top: 62%; }
.h-guide__cursor-svg { display: block; width: 23px; height: 36px; overflow: visible; }
.h-piatti-guide__body {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  height: min-content;
  padding: 24px 32px 32px 32px;
  overflow: clip;
}
.h-piatti-guide__text {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: clip;
}
.h-piatti-guide__rt {   /* Framer rich-text box: flex column around the paragraph */
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.h-piatti-guide__title, .h-piatti-guide__desc { text-align: left; }
.h-piatti-guide__desc { color: #737373; }
.h-piatti-guide__close {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 8px 16px;
  overflow: clip;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  cursor: pointer;
}
.h-piatti-guide__close > span { position: relative; z-index: 1; display: flex; flex: none; flex-direction: column; color: #fff; white-space: pre; }

/* ---- tablet 810–1599 ---- */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-piatti { padding: 44px; }
  .h-piatti__food--ramen    { left: 19%; top: 29%; }
  .h-piatti__food--salad    { left: 33%; top: 72%; }
  .h-piatti__food--pizza    { left: 71%; top: 72%; }
  .h-piatti__food--sandwich { left: 81%; top: 29%; }
  /* ramen: no → plain · ice cream: yes → yes-static */
  .h-piatti__food--ramen .h-sugg .h-sugg__icon, .h-piatti__food--icecream .h-sugg .h-sugg__icon { filter: blur(0px); scale: 1; }
  .h-piatti__food--ramen .h-sugg .h-sugg__tip { display: none; }
  .h-piatti__food--icecream .h-sugg .h-sugg__tip { opacity: 1; scale: 1; filter: blur(0px); }
  .h-piatti__food--icecream .h-sugg .h-sugg__label { color: #1f1f1f; }
  .h-piatti__food--icecream .h-sugg .h-sugg__t--yes { display: none; }
  .h-piatti__food--icecream .h-sugg .h-sugg__t--perte { display: block; }
}

/* ---- phone ≤809 ---- */
@media (max-width: 809.98px) {
  .h-piatti {
    max-width: 500px;
    height: 73.22274881516587vh;
    padding: 0;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }
  .h-piatti__lens { width: 309px; height: 283px; }
  .h-piatti__lens-text { font-size: 58px; }
  .h-piatti__lens-text--reveal { clip-path: circle(60px at 50% 50%); }
  .h-piatti__food--chicken   { left: 50%; top: 77%; width: 100px; z-index: 5; }
  .h-piatti__food--ramen     { left: 13%; top: 30%; width: 90px; }
  .h-piatti__food--icecream  { left: 50%; top: 16%; width: 90px; }
  .h-piatti__food--pizza     { left: 7%; top: 68%; width: 100px; }
  .h-piatti__food--sandwich  { left: 87%; top: 26%; width: 90px; z-index: 3; }
  .h-piatti__food--chocolate { left: 95%; top: 69%; width: 100px; }
  /* chicken: no-static → yes-static */
  .h-piatti__food--chicken .h-sugg .h-sugg__badge { background-color: #21bf2b; }
  .h-piatti__food--chicken .h-sugg .h-sugg__label { color: #1f1f1f; }
  .h-piatti__food--chicken .h-sugg .h-sugg__ico--users, .h-piatti__food--chicken .h-sugg .h-sugg__t--per2 { display: none; }
  .h-piatti__food--chicken .h-sugg .h-sugg__ico--check, .h-piatti__food--chicken .h-sugg .h-sugg__t--perte { display: block; }
  /* ramen + chocolate (burger): → plain */
  .h-piatti__food--ramen .h-sugg .h-sugg__icon, .h-piatti__food--chocolate .h-sugg .h-sugg__icon { filter: blur(0px); scale: 1; }
  .h-piatti__food--ramen .h-sugg .h-sugg__tip, .h-piatti__food--chocolate .h-sugg .h-sugg__tip { display: none; }
  /* ice cream (sushi): yes → no-static */
  .h-piatti__food--icecream .h-sugg .h-sugg__icon { filter: blur(0px); scale: 1; }
  .h-piatti__food--icecream .h-sugg .h-sugg__tip { opacity: 1; scale: 1; filter: blur(0px); }
  .h-piatti__food--icecream .h-sugg .h-sugg__badge { background-color: rgb(207, 48, 103); }
  .h-piatti__food--icecream .h-sugg .h-sugg__label { color: rgb(13, 11, 11); }
  .h-piatti__food--icecream .h-sugg .h-sugg__ico--check, .h-piatti__food--icecream .h-sugg .h-sugg__t--yes, .h-piatti__food--icecream .h-sugg .h-sugg__t--perte { display: none; }
  .h-piatti__food--icecream .h-sugg .h-sugg__ico--users, .h-piatti__food--icecream .h-sugg .h-sugg__t--per2 { display: block; }
  /* pizza: yes-static → yes · sandwich: yes-static → no */
  .h-piatti__food--pizza .h-sugg .h-sugg__icon, .h-piatti__food--sandwich .h-sugg .h-sugg__icon { filter: blur(5px); }
  .h-piatti__food--pizza .h-sugg .h-sugg__tip, .h-piatti__food--sandwich .h-sugg .h-sugg__tip { opacity: 0; scale: 0; filter: blur(5px); }
  .h-piatti__food--pizza .h-sugg .h-sugg__label, .h-piatti__food--sandwich .h-sugg .h-sugg__label { color: #fff; }
  .h-piatti__food--pizza .h-sugg .h-sugg__t--perte, .h-piatti__food--sandwich .h-sugg .h-sugg__t--perte, .h-piatti__food--sandwich .h-sugg .h-sugg__ico--check { display: none; }
  .h-piatti__food--pizza .h-sugg .h-sugg__t--yes, .h-piatti__food--sandwich .h-sugg .h-sugg__t--no, .h-piatti__food--sandwich .h-sugg .h-sugg__ico--x { display: block; }
  .h-piatti__food--sandwich .h-sugg .h-sugg__badge { background-color: #ff4040; }
}
@media (max-width: 809.98px) and (hover: hover) {
  .h-piatti__food--pizza .h-sugg:hover .h-sugg__icon, .h-piatti__food--sandwich .h-sugg:hover .h-sugg__icon { filter: blur(0px); scale: 1.2; }
  .h-piatti__food--pizza .h-sugg:hover .h-sugg__tip, .h-piatti__food--sandwich .h-sugg:hover .h-sugg__tip { opacity: 1; scale: 1; filter: blur(0px); }
  .h-piatti__food--pizza .h-sugg:hover .h-sugg__label, .h-piatti__food--sandwich .h-sugg:hover .h-sugg__label { color: #1f1f1f; }
  .h-piatti__food--pizza .h-sugg:hover .h-sugg__t--yes, .h-piatti__food--sandwich .h-sugg:hover .h-sugg__t--no, .h-piatti__food--sandwich .h-sugg:hover .h-sugg__ico--x { display: none; }
  .h-piatti__food--pizza .h-sugg:hover .h-sugg__t--perte, .h-piatti__food--sandwich .h-sugg:hover .h-sugg__t--dividi, .h-piatti__food--sandwich .h-sugg:hover .h-sugg__ico--users { display: block; }
  .h-piatti__food--sandwich .h-sugg:hover .h-sugg__badge { background-color: rgb(255, 126, 94); }
}


/* ==========================================================================
   h05-comodo
   ========================================================================== */
/* 05 · COMODO (Framer "Features", #chisiamo) — base = desktop ≥1600 · tablet 810–1599 · phone ≤809
   Springs as CSS linear() (tools/spring.js): --h-comodo-s6 = bounce 0 / .6 s (mock-up states),
   --h-comodo-s4 = bounce 0 / .4 s (letter appear). */
.h-comodo {
  --h-comodo-s6: linear(0, 0.0251, 0.086, 0.1659, 0.2539, 0.3428, 0.428, 0.507, 0.5786, 0.6422, 0.698, 0.7464, 0.7879, 0.8233, 0.8534, 0.8786, 0.8998, 0.9175, 0.9323, 0.9445, 0.9546, 0.9629, 0.9697, 0.9754, 0.98, 0.9837, 0.9868, 0.9893, 0.9913, 0.993, 0.9943, 0.9954, 0.9963, 0.997, 0.9976, 0.9981, 0.9985, 0.9988, 1);
  --h-comodo-s4: linear(0, 0.0535, 0.1694, 0.3039, 0.4346, 0.5509, 0.6493, 0.7298, 0.794, 0.8443, 0.8832, 0.9129, 0.9354, 0.9523, 0.9649, 0.9743, 0.9812, 0.9863, 0.9901, 0.9928, 0.9948, 0.9963, 0.9973, 0.9981, 0.9986, 1);
  position: relative;
  z-index: 5;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 2160px;
  height: 1369px;
  padding: 100px 0 200px 0;
  overflow: visible;
  border-bottom-left-radius: 160px;
  border-bottom-right-radius: 160px;
}
/* The original sits on a dark (#141414) page wrapper that shows around the rounded corners (and beside the
   section above 2160px): painted here, under the white card. */
.h-comodo::before, .h-comodo::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.h-comodo::before { top: 0; bottom: 0; left: 50%; width: 100vw; translate: -50% 0; background-color: #141414; }
.h-comodo::after { inset: 0; border-radius: inherit; background-color: #fff; }
.h-comodo__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.h-comodo [hidden] { display: none !important; }
.h-comodo .is-instant, .h-comodo .is-instant * { transition: none !important; }

/* Framer rich-text box: flex column around the text element */
.h-comodo__rt { position: relative; display: flex; flex: none; flex-direction: column; justify-content: flex-start; height: auto; }
.h-comodo__rt--pre { width: auto; white-space: pre; }
.h-comodo__rt--wrap { width: 100%; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
.h-comodo__rt--grow { flex: 1 0 0px; width: 1px; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
.h-comodo__rt > * { margin: 0; }

/* ---- title & description (letters appear: blur 10 px, y 10, opacity → 1, 50 ms stagger) ---- */
.h-comodo__head {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 25px;
  width: 1155px;
  height: min-content;
  padding: 0;
  overflow: visible;
}
.h-comodo__title-box, .h-comodo__desc-box {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.h-comodo__desc-box { max-width: 500px; }
.h-comodo__title {
  margin: 0;
  color: #0a0a0a;
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 1em;
  text-align: center;
}
.h-comodo__title-l1 { font-size: inherit; line-height: 1em; }
.h-comodo__title-l2 {
  font-family: "Instrument Serif", "Instrument Serif Placeholder", serif;
  font-size: 68px;
  font-style: italic;
  line-height: 1em;
}
.h-comodo__title-l2 em { font-style: italic; line-height: 1em; }
.h-comodo__title-l2 strong { font-weight: 700; line-height: 1em; }
.h-comodo__desc { color: #000; text-align: center; }
.h-comodo__desc em strong {     /* preset "bold italic" face */
  font-family: "Proxima Nova Bold Italic", "Proxima Nova Bold Italic Placeholder", sans-serif;
  font-style: italic;
  font-weight: 700;
}
.h-split__w { display: inline; white-space: nowrap; }
.h-split__c { display: inline-block; filter: blur(0px); will-change: transform; }
.is-split .h-split__c { opacity: 0.001; filter: blur(10px); transform: translateY(10px); }
.is-split.is-played .h-split__c {
  opacity: 1;
  filter: blur(0px);
  transform: none;
  transition: opacity .4s var(--h-comodo-s4), filter .4s var(--h-comodo-s4), transform .4s var(--h-comodo-s4);
  transition-delay: calc(var(--i, 0) * 50ms);
}

/* ---- grid of feature boxes ---- */
.h-comodo__grid {
  position: relative;
  display: grid;
  flex: none;
  grid-auto-rows: 450px;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-template-rows: repeat(2, 450px);
  justify-content: center;
  gap: 10px;
  width: 900px;
  max-width: 900px;
  height: min-content;
  padding: 0;
  overflow: clip;
}
.h-feat {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  align-self: start;
  justify-self: start;
  gap: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: clip;
  background-color: #f6f6f6;
  border-radius: 22px;
}
.h-feat__graphic {
  position: relative;
  display: flex;
  flex: 1 0 0px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 1px;
  padding: 0;
  overflow: visible;
}
.h-feat__text {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 12px 32px 32px 32px;
  overflow: clip;
}
.h-feat__title { text-align: left; color: #000; }
.h-feat__desc { text-align: left; color: rgb(59, 59, 59); }
/* 3D food icon (Framer "3D Food Icons") */
.h-comodo__food { position: relative; width: 100%; height: 100%; aspect-ratio: 1 / 1; cursor: pointer; }

/* ---- 1 · Track Your Progress ---- */
.h-track {
  position: relative;
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 16px;
  width: 1px;
  height: 100%;
  padding: 0;
  overflow: clip;
}
.h-track__progress {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 0 16px;
  overflow: visible;
}
.h-track__summary {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 350px;
  height: min-content;
  padding: 24px;
  overflow: visible;
  background-color: #fff;
  border-radius: 32px;
}
.h-track__head {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: visible;
}
.h-track__label { color: rgb(120, 120, 120); }
.h-track__status {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 6px 12px;
  overflow: visible;
  border-radius: 100px;
  background-color: rgba(33, 191, 43, 0.15);
  transition: background-color .6s var(--h-comodo-s6);
}
.h-track__status-txt, .h-track__emoji { color: #21bf2b; transition: color .6s var(--h-comodo-s6); }
.h-track__points {
  margin: 0;
  color: #ccc;
  font-family: "Satoshi Variable", "Satoshi Variable Placeholder", sans-serif;
  font-size: 32px;
  font-weight: 400;
  font-variation-settings: "wght" 850;
  letter-spacing: -0.04em;
  line-height: 1.2em;
  text-align: left;
}
.h-track__num { color: #e81348; transition: color .6s var(--h-comodo-s6); }
.h-track__week {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 8px 0;
  overflow: clip;
}
.h-track__days {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-evenly;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: clip;
}
.h-track__day {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 4px;
  width: 64px;
  height: 64px;
  padding: 0;
  overflow: clip;
}
.h-track__dname, .h-track__dnum { text-align: center; color: #616161; transition: color .6s var(--h-comodo-s6); }
.h-track__day.is-active .h-track__dname, .h-track__day.is-active .h-track__dnum { color: #e81348; }
.h-track__highlight {
  position: absolute;
  top: 50%;
  left: 128px;
  z-index: 1;
  flex: none;
  width: 64px;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  translate: 0 -50%;
  border-radius: 19px;
  background-color: rgba(255, 128, 0, 0.15);
  transition: left .6s var(--h-comodo-s6);
}
/* states: W (default) · T · F · S */
.h-track[data-state="t"] .h-track__status { background-color: rgba(255, 64, 64, 0.15); }
.h-track[data-state="t"] .h-track__status-txt, .h-track[data-state="t"] .h-track__emoji, .h-track[data-state="t"] .h-track__num { color: #ff4040; }
.h-track[data-state="t"] .h-track__highlight { left: 192px; }
.h-track[data-state="f"] .h-track__status { background-color: rgba(191, 136, 33, 0.15); }
.h-track[data-state="f"] .h-track__status-txt { color: rgb(255, 112, 3); }
.h-track[data-state="f"] .h-track__highlight { left: 256px; }
.h-track[data-state="s"] .h-track__status { background-color: rgba(33, 138, 191, 0.15); }
.h-track[data-state="s"] .h-track__status-txt { color: rgb(23, 118, 227); }
.h-track[data-state="s"] .h-track__emoji { color: rgb(33, 162, 191); }
.h-track[data-state="s"] .h-track__num { color: rgb(150, 232, 19); }
.h-track[data-state="s"] .h-track__highlight { left: 320px; }

/* ---- 2 · Food Plans ---- */
.h-plans {
  position: relative;
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 10px;
  width: 1px;
  height: 100%;
  padding: 32px 0 0 0;
  overflow: clip;
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 41%) add;
  mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 41%) add;
}
.h-plans__plan {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 350px;
  height: min-content;
  padding: 24px;
  overflow: visible;
  background-color: #fff;
  border-radius: 32px;
}
.h-plans__head {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: visible;
}
.h-plans__who {
  position: relative;
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 5px;
  width: 1px;
  height: min-content;
  padding: 0;
  overflow: clip;
}
.h-plans__name { color: #1f1f1f; }
.h-plans__count { color: #616161; }
.h-plans__pill {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 6px 12px;
  overflow: visible;
  border-radius: 100px;
  background-color: rgba(33, 191, 43, 0.15);
  transition: background-color .6s var(--h-comodo-s6);
}
.h-plans__pill-txt { color: #21bf2b; transition: color .6s var(--h-comodo-s6); }
.h-plans__pill--red { background-color: rgba(255, 64, 64, 0.15); }
.h-plans__pill--red .h-plans__pill-txt { color: #ff4040; }
.h-plans__pill--orange { background-color: rgba(191, 117, 33, 0.15); }
.h-plans__pill--orange .h-plans__pill-txt { color: rgb(230, 125, 60); }
.h-plans__pill--pink { background-color: rgb(255, 5, 84); }
.h-plans__pill--pink .h-plans__pill-txt { color: #fff; }
.h-plans__row {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-evenly;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: clip;
}
.h-plans__icon { position: relative; flex: none; width: 55px; height: auto; aspect-ratio: 1 / 1; }
.h-plans__switch {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 55px;
  height: 55px;
  padding: 0;
  overflow: visible;
}
.h-plans__icon--switch { position: absolute; top: 0; left: 0; right: 0; z-index: 1; width: auto; }
.h-plans__more {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 46px;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  overflow: clip;
  border-radius: 50%;
  background-color: #f6f6f6;
  transition: background-color .6s var(--h-comodo-s6);
}
.h-plans__more-txt { color: #e81348; transition: color .6s var(--h-comodo-s6); }
.h-plans__more--red { background-color: rgb(255, 18, 18); }
.h-plans__more--red .h-plans__more-txt { color: #fff; }

/* ---- 3 · Food Database ---- */
.h-feat__graphic--search {
  align-items: flex-start;
  align-content: flex-start;
  padding: 32px 20px 0 20px;
  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 39%) add;
  mask: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 39%) add;
}
.h-search__box { position: relative; flex: 1 0 0px; width: 1px; max-width: 350px; height: auto; }
.h-search {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  height: 368px;
  padding: 24px;
  overflow: visible;
  background-color: #fff;
  border-radius: 32px;
}
.h-search__label { text-align: left; color: #1f1f1f; }
.h-search__field {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: visible;
}
.h-search__input {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  width: 100%;
  height: 34px;
  padding: 10px;
  overflow: clip;
  background-color: #f6f6f6;
  border-radius: 7px;
}
.h-search__value {
  position: relative;
  display: flex;
  flex: 1 0 0px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 10px;
  width: 1px;
  height: min-content;
  padding: 0;
  overflow: visible;
}
.h-search__placeholder { color: #b0b0b0; }
.h-search__typing { position: relative; flex: 1 0 0px; width: 1px; height: auto; }
.h-search__type {   /* TypewriterEffect */
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 1em;
  color: #1f1f1f;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2em;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: middle;
}
.h-search__caret { display: inline-block; width: 1ch; margin-left: 0; vertical-align: middle; }
.h-search__type.is-waiting .h-search__caret { animation: h-comodo-blink 1000ms step-end infinite; }
@keyframes h-comodo-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.h-search__query {
  margin: 0;
  color: #1f1f1f;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2em;
}
.h-search__ico {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  overflow: hidden;
  fill: none;
  stroke: #b0b0b0;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.h-search__list {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: space-evenly;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: clip;
}
.h-search__list--results { overflow: visible; }
/* Layers that carry will-change: transform in the original (its appear effects): same pixel snapping of the text */
.h-search__value > [data-search-part="placeholder"], .h-search__typing, .h-search__list[data-search-part="recent"],
.h-search__wait, .h-search__list--results > [data-search-anim], .h-plans__switch { will-change: transform; }
.h-search__list-head {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 0 0 6px 0;
  overflow: clip;
}
.h-search__muted { color: #b0b0b0; }
.h-search__muted--center { text-align: center; }
.h-search__wait {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  padding: 0;
  overflow: clip;
}
/* Spinner: conic mask turning 0 → 359° in 1 s (linear), then restarting */
@property --h-comodo-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.h-search__spinner {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
  -webkit-mask: conic-gradient(from var(--h-comodo-spin) at 50% 50%, rgba(0, 0, 0, 0) 0deg, rgb(0, 0, 0) 360deg) add;
  mask: conic-gradient(from var(--h-comodo-spin) at 50% 50%, rgba(0, 0, 0, 0) 0deg, rgb(0, 0, 0) 360deg) add;
  animation: h-comodo-spin 1s linear infinite;
}
@keyframes h-comodo-spin { from { --h-comodo-spin: 0deg; } to { --h-comodo-spin: 359deg; } }
.h-search__spinner svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #b0b0b0;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.h-search__extra {   /* stray text of the original component (Framer default text style) */
  margin: 0;
  color: #000;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;
  line-height: 1.2em;
}
/* Food Database Search Result */
.h-res {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: clip;
}
.h-res__icon { position: relative; flex: none; width: 55px; height: auto; aspect-ratio: 1 / 1; }
.h-res__info {
  position: relative;
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 5px;
  width: 1px;
  height: min-content;
  padding: 0;
  overflow: clip;
}
.h-res__name { color: #fff; }   /* white on white, as in the original */
.h-res__kcal { color: #616161; }
.h-res__arrow {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  overflow: hidden;
  fill: none;
  stroke: #b0b0b0;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- 4 · Barcode Scan Animation ---- */
.h-scan {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 0;
  overflow: clip;
}
.h-scan__frame { position: relative; flex-shrink: 0; display: block; width: 305px; height: 165px; fill: #e81348; image-rendering: pixelated; }
.h-scan__qr {
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: 50%;
  z-index: 1;
  flex: none;
  width: auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  translate: -50% 0;
}
.h-scan__beam {
  position: absolute;
  top: calc(49.69696969696972% - 134px / 2);
  left: 20px;
  z-index: 1;
  flex: none;
  width: 84px;
  height: 134px;
  overflow: clip;
  background: radial-gradient(100% 69% at 0% 50%, rgba(255, 128, 0, 0.65) 0%, rgba(255, 128, 0, 0) 100%);
  --h-scan-x: 220px;
}
.h-scan__beam::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-left: 2px solid #e81348;
  border-radius: inherit;
  pointer-events: none;
}
/* loop: x 0 → 220 px and back, 1.5 s each way, ease [.44, 0, .56, 1]; runs while in view (JS) */
.h-scan__beam.is-running { will-change: transform; animation: h-comodo-scan 1.5s cubic-bezier(.44, 0, .56, 1) infinite alternate; }
@keyframes h-comodo-scan { from { transform: translateX(0); } to { transform: translateX(var(--h-scan-x)); } }

/* ---- tablet 810–1599 ---- */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-comodo { padding: 119px 44px 119px 44px; }
  .h-comodo__title { font-size: 38px; }
  .h-comodo__title-l1 { font-size: 45px; }
  .h-comodo__title-l2 { font-size: inherit; }
  .h-comodo__grid { width: 746px; }
}

/* ---- phone ≤809 ---- */
@media (max-width: 809.98px) {
  .h-comodo {
    max-width: 500px;
    height: 2043px;
    padding: 73px 32px 73px 32px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
  }
  .h-comodo__head { width: 357px; }
  .h-comodo__title { font-size: 29px; }
  .h-comodo__title-l2 { font-size: 56px; }
  .h-comodo__grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    padding: 0 0 50px 0;
  }
  .h-feat { align-self: unset; width: 326px; height: 450px; }
  .h-feat--scan { height: auto; aspect-ratio: 0.7244444444444444 / 1; }
  .h-plans { padding: 32px 12px 0 12px; }   /* Food Plans "Secondary" states */
  .h-scan__frame { width: 198px; height: 107px; }
  .h-scan__beam { top: calc(50.46728971962619% - 86px / 2); left: 15px; width: 50px; height: 86px; --h-scan-x: 130px; }
}


/* ==========================================================================
   h06-manifesto
   ========================================================================== */
/* 06 manifesto — Framer "Meal Deconstruct" (#come): two scroll-revealed statements + "Ti chiedi Come Funziona?".
   The word-by-word reveal (Framer component "Text Reveal", style slideUp) is driven by src/js/h06-manifesto.js. */
.h-manifesto {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; flex: none; place-content: center; align-items: center; gap: 191px;
  width: 100%; max-width: 2160px; height: min-content; padding: 76px 64px;
  overflow: visible; background-color: #141414;
}
.h-manifesto__texts {
  position: relative;
  display: flex; flex-direction: column; flex: none; place-content: center; align-items: center; gap: 102px;
  width: 100%; height: min-content; padding: 0; overflow: clip;
  will-change: transform;   /* own layer: grayscale text antialiasing, like the original */
}
/* the heading is a wrapping flex row: every word is a flex item with margin-right .3em (like the component);
   width auto = fit-content, centred: narrower than the column only when the text fits on one line (very wide screens) */
.h-manifesto__reveal {
  position: relative; flex: none;
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: flex-start;
  width: auto; margin: 0; padding: 20px; overflow: visible; word-break: break-word;
  font-style: normal; line-height: 1.2; letter-spacing: 0em; text-align: left; color: #fff;
}
.h-manifesto__reveal--intro { font-family: "Proxima Nova Thin", "Proxima Nova Thin Placeholder", sans-serif; font-weight: 250; font-size: 48px; }
/* the original asks for this italic family with font-style normal: the browser uses the italic face as is */
.h-manifesto__reveal--claim { font-family: "Proxima Nova Semibold Italic", "Proxima Nova Semibold Italic Placeholder", sans-serif; font-weight: 600; font-size: 44px; }
.h-manifesto__word { display: inline-block; margin-right: .3em; }

.h-manifesto__title {
  position: relative; z-index: 1; flex: none; width: 100%; height: auto; margin: 0;
  white-space: pre-wrap; word-break: break-word; word-wrap: break-word; pointer-events: none;
  font-family: "Instrument Serif", "Instrument Serif Placeholder", serif; font-size: 66px; font-style: italic; font-weight: 400;
  line-height: .9em; letter-spacing: 0; text-align: center; color: #fff;
}
.h-manifesto__title-sans { font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif; font-style: normal; }
/* phone: letters appear one by one (JS); words never break inside */
.h-manifesto__title-word { white-space: nowrap; }
.h-manifesto__title-char { display: inline-block; will-change: transform; }

/* tablet 810–1599 */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-manifesto { padding: 44px; }
}
/* phone */
@media (max-width: 809.98px) {
  .h-manifesto { gap: 133px; max-width: 500px; padding: 117px 32px 150px; }
  .h-manifesto__texts { order: 0; gap: 75px; }
  .h-manifesto__reveal--intro { font-size: 38px; }
  .h-manifesto__reveal--claim { letter-spacing: -.05em; line-height: 1.1; }
  .h-manifesto__title { order: 1; will-change: transform; }
}


/* ==========================================================================
   h07-come
   ========================================================================== */
/* 07 come — Framer "How It Works" section + components "How It Works" (desktop/tablet), "How It Works Phone" (phone)
   and "How It Works Screens" (the app screen: Scanning / Results / Actions).
   The step lives in data-step="1|2|3" on .h-come__stage (scroll, src/js/h07-come.js) and on .h-come__mobile (pills).
   Transitions = the components' springs: bounce 0 · 0.4 s (texts, pills) and bounce 0 · 0.6 s (app screen). */
.h-come {
  --h-come-spring-4: linear(0, 0.0535, 0.1694, 0.3039, 0.4346, 0.5509, 0.6493, 0.7298, 0.794, 0.8443, 0.8832, 0.9129, 0.9354, 0.9523, 0.9649, 0.9743, 0.9812, 0.9863, 0.9901, 0.9928, 0.9948, 0.9963, 0.9973, 0.9981, 0.9986, 1);
  --h-come-spring-6: linear(0, 0.0251, 0.086, 0.1659, 0.2539, 0.3428, 0.428, 0.507, 0.5786, 0.6422, 0.698, 0.7464, 0.7879, 0.8233, 0.8534, 0.8786, 0.8998, 0.9175, 0.9323, 0.9445, 0.9546, 0.9629, 0.9697, 0.9754, 0.98, 0.9837, 0.9868, 0.9893, 0.9913, 0.993, 0.9943, 0.9954, 0.9963, 0.997, 0.9976, 0.9981, 0.9985, 0.9988, 1);
  position: relative; z-index: 1;
  display: flex; flex-direction: column; flex: none; place-content: center; align-items: center; gap: 0;
  width: 100%; max-width: 2160px; height: min-content; padding: 0 64px;
  overflow: visible; background-color: #141414;
}

/* ---------- desktop / tablet: sticky stage ---------- */
.h-come__sticky { position: sticky; top: 0; z-index: 1; flex: none; width: 100%; max-width: 100%; height: 100vh; }
.h-come__stage {
  position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 32px;
  width: 100%; max-width: 100%; height: 100%; padding: 0; overflow: visible;
}
.h-come__titles, .h-come__texts {
  position: relative; flex: 1 0 0px; width: 1px; height: 200px;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; padding: 0; overflow: visible;
}
.h-come__titles { max-width: 280px; }
.h-come__texts { max-width: 250px; }
/* the three texts of a column sit on top of each other, vertically centred; the active one is sharp and opaque */
.h-come__titles > .h-come__title, .h-come__texts > .h-come__text {
  position: absolute; top: 50%; z-index: 1; width: 100%; height: auto; margin: 0;
  white-space: pre-wrap; word-break: break-word; word-wrap: break-word; pointer-events: none;
  transform: translateY(-50%); opacity: 0; filter: blur(5px);
  transition: opacity .4s var(--h-come-spring-4), filter .4s var(--h-come-spring-4);
}
.h-come__titles > .h-come__title { right: 0; text-align: right; }
.h-come__texts > .h-come__text { left: 0; text-align: left; color: #fff; }
.h-come__stage[data-step="1"] .h-come__title--1, .h-come__stage[data-step="2"] .h-come__title--2, .h-come__stage[data-step="3"] .h-come__title--3,
.h-come__stage[data-step="1"] .h-come__text--1, .h-come__stage[data-step="2"] .h-come__text--2, .h-come__stage[data-step="3"] .h-come__text--3 {
  opacity: 1; filter: blur(0px); pointer-events: auto;
}

/* ---------- the iPhone ---------- */
.h-come__device {
  position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: min-content; height: min-content; padding: 0; overflow: clip;
}
.h-come__iphone {
  position: relative; z-index: 3; flex: none; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  width: min-content; height: min-content; padding: 0; overflow: visible; transform: perspective(1200px);
}
.h-come__frame {
  position: relative; z-index: 3; flex: none; width: 312px; height: auto; aspect-ratio: .4866666666666667 / 1;
  overflow: visible; pointer-events: none; -webkit-user-select: none; user-select: none;
}
.h-come__screen {
  position: absolute; z-index: 2; flex: none; width: 93%; height: 98%;
  left: calc(50.13698630136989% - 93% / 2); top: calc(50.03335557038028% - 98.4% / 2);
}

/* ---------- the app screen ---------- */
.h-come__app { position: relative; width: 100%; height: 100%; border-radius: 45px; overflow: clip; will-change: transform; }
.h-come__view {
  position: absolute; left: calc(49.79591836734696% - 100% / 2); top: calc(50.00000000000002% - 100% / 2); width: 100%; height: 100%;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; padding: 0; overflow: visible;
}
.h-come__shot {
  position: absolute; z-index: 1; flex: none; left: calc(50.204081632653086% - 100% / 2); top: calc(50.00000000000002% - 100% / 2);
  width: 100%; height: 100%; overflow: visible;
  transform: scale(1.1); transition: transform .6s var(--h-come-spring-6);
}
[data-step="2"] .h-come__shot, [data-step="3"] .h-come__shot { transform: none; }
.h-come__shot-img { visibility: hidden; }
[data-step="1"] .h-come__shot-img--1, [data-step="2"] .h-come__shot-img--2, [data-step="3"] .h-come__shot-img--3 { visibility: visible; }

.h-come__ui {
  position: relative; z-index: 3; flex: none; width: 100%; height: 100%;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 0; overflow: visible;
}
[data-step="3"] .h-come__ui { display: none; }   /* "Actions": the camera UI is not rendered */
.h-come__scan, .h-come__bar, .h-come__modes, .h-come__camera { transition: opacity .6s var(--h-come-spring-6); }
[data-step="2"] .h-come__scan, [data-step="2"] .h-come__bar, [data-step="2"] .h-come__modes, [data-step="2"] .h-come__camera { opacity: 0; }

.h-come__icon {
  display: block; flex: none; width: 16px; height: 16px; overflow: hidden;
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
/* scan corners: loop scale 1 ↔ .9 (tween linear 1 s, mirror) */
.h-come__scan {
  position: absolute; z-index: 1; left: 50%; top: 54%; width: 69%; height: auto; aspect-ratio: .9941520467836257 / 1;
  display: block; overflow: visible; transform: translate(-50%, -50%);
  animation: h-come-scan 1s linear infinite alternate;
}
@keyframes h-come-scan { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(.9); } }

.h-come__bar {
  position: absolute; z-index: 1; top: 44px; left: 16px; right: 16px; height: min-content;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 0; overflow: visible;
}
.h-come__btn {
  position: relative; z-index: 1; flex: none; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  width: min-content; height: min-content; padding: 6px; overflow: clip; will-change: transform; color: #fff;
  border-radius: 100%; background-color: rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.h-come__btn--back { box-shadow: inset .5px .5px 0 0 rgba(255, 255, 255, .35), inset -.5px -.5px 0 0 rgba(255, 255, 255, .35), inset 0 0 10px 0 rgb(82, 167, 248); }
.h-come__btn--more { box-shadow: inset .5px .5px 0 0 rgba(255, 255, 255, .35), inset -.5px -.5px 0 0 rgba(255, 255, 255, .35), inset 0 0 10px 0 rgb(65, 50, 34); }
.h-come__btn--flip {
  width: 44px; height: auto; aspect-ratio: 1 / 1;
  box-shadow: inset .5px .5px 0 0 rgba(255, 255, 255, .5), inset -.5px -.5px 0 0 rgba(255, 255, 255, .5), inset 0 0 10px 0 rgb(189, 161, 109);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.h-come__bar-title { position: relative; z-index: 1; flex: none; white-space: pre; overflow: clip; }

.h-come__modes {
  position: absolute; z-index: 1; bottom: 30px; left: 50%; width: min-content; height: min-content;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 12px; overflow: clip; will-change: transform; transform: translateX(-50%);
  border-radius: 12px; background-color: rgba(0, 0, 0, .1);
  box-shadow: inset .5px .5px 0 0 rgba(255, 255, 255, .5), inset -.5px -.5px 0 0 rgba(255, 255, 255, .5), inset 0 0 9px 0 rgb(242, 219, 179);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.h-come__icon--food { color: rgb(255, 221, 0); stroke-width: 2; }
.h-come__icon--scan { color: #fff; stroke-width: 2; }

.h-come__camera {
  position: absolute; bottom: 94px; left: 16px; right: 16px; height: min-content;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 0; overflow: visible;
}
.h-come__thumb { position: relative; flex: none; width: 44px; height: auto; aspect-ratio: 1 / 1; border-radius: 14px; overflow: clip; will-change: transform; }
.h-come__thumb img { object-position: 32.8% 31.1%; }
.h-come__shutter {
  position: relative; z-index: 1; flex: none; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  width: 52px; height: auto; aspect-ratio: 1 / 1; padding: 5px; overflow: clip; will-change: transform; border-radius: 100%;
}
.h-come__shutter::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box;
  border: 3px solid #fff; border-radius: inherit; pointer-events: none;
}
.h-come__shutter-dot { position: relative; flex: 1 0 0px; width: 1px; height: 100%; border-radius: 100%; background-color: #fff; }

/* order sheet ("Popup"): below the screen in step 1, slides up in step 2 (from 350px when it comes back from step 3) */
.h-come__sheet {
  position: absolute; z-index: 2; left: 10px; right: 5px; bottom: 9px; height: 170px;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0;
  padding: 6px; overflow: clip; will-change: transform;
  border-radius: 26px; background-color: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(179px); transition: transform .6s var(--h-come-spring-6);
}
[data-step="2"] .h-come__sheet { transform: none; }
[data-step="2"][data-prev="3"] .h-come__sheet { animation: h-come-sheet-in .6s var(--h-come-spring-6); }
@keyframes h-come-sheet-in { from { transform: translateY(350px); } to { transform: none; } }
.h-come__sheet-handle { position: relative; flex: none; width: 50px; height: 5px; border-radius: 100px; background-color: rgba(0, 0, 0, .15); }
.h-come__sheet-body {
  position: relative; flex: none; width: 100%; height: min-content;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 14px; padding: 10px; overflow: visible;
}
.h-come__order, .h-come__extra {
  position: relative; flex: none; width: 100%; height: min-content;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; padding: 0; overflow: visible;
}
.h-come__order-img { position: relative; flex: none; width: 44px; height: auto; aspect-ratio: 1 / 1; border-radius: 11px; overflow: visible; }
.h-come__order-img::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: inherit; pointer-events: none;
}
.h-come__order-info, .h-come__extra-info {
  position: relative; flex: 1 0 0px; width: 1px; height: min-content;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 4px; padding: 0; overflow: visible;
}
.h-come__order-name, .h-come__extra-name { display: block; flex: none; width: 100%; white-space: pre-wrap; word-break: break-word; word-wrap: break-word; }
.h-come__extra-name { color: #616161; }
.h-come__order-meta, .h-come__extra-label {
  display: block; flex: none; width: 100%; white-space: pre-wrap; word-break: break-word; word-wrap: break-word;
  font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-weight: 600; letter-spacing: -.04em; line-height: 1em; text-align: left;
}
.h-come__order-meta { font-size: 9px; color: #616161; }
.h-come__extra-label { font-size: 7px; color: rgb(105, 105, 105); }
.h-come__choices {
  position: relative; flex: none; width: 100%; height: min-content;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 6px; padding: 0; overflow: visible;
}
.h-come__choice {
  position: relative; flex: 1 0 0px; width: 1px; height: min-content;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 16px; overflow: clip; will-change: transform; border-radius: 12px; background-color: rgba(0, 0, 0, .08);
}
.h-come__choice--main { background-color: #e81348; }
.h-come__choice > span { position: relative; z-index: 1; flex: none; white-space: pre; color: rgb(130, 130, 130); }
.h-come__choice--main > span { color: #fff; }
.h-come__extra-icon { position: relative; flex: none; width: 36px; height: auto; aspect-ratio: 1 / 1; border-radius: 11px; background-color: rgb(31, 7, 20); overflow: visible; }
.h-come__extra-icon .h-come__icon { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; }

/* ---------- mascot + scroll triggers ---------- */
.h-come__mascot {
  position: absolute; z-index: 0; flex: none; top: -93px; left: 401px; width: 30%; height: auto; aspect-ratio: .8 / 1;
  overflow: clip; will-change: filter;
}
.h-come__trigger { position: relative; flex: none; width: 100%; height: 75vh; overflow: clip; background-color: #141414; }
.h-come__trigger--last { height: 54.4289vh; }

/* ---------- phone component ---------- */
.h-come__mobile {
  position: relative; flex: none; width: 100%; height: min-content;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 32px; padding: 0; overflow: visible;
}
.h-come__mobile .h-come__frame { width: 258px; }
.h-come__mobile .h-come__screen { width: 95%; left: calc(50.13698630136989% - 94.79452054794521% / 2); }
.h-come__pills {
  position: relative; flex: none; width: min-content; height: min-content;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0;
  padding: 2px; overflow: visible; border-radius: 15px; background-color: #ededed;
}
.h-come__pill {
  position: relative; flex: none; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px;
  width: 64px; height: 44px; padding: 4px 12px; overflow: clip; cursor: pointer; will-change: transform;
  border-radius: 13px; background-color: rgba(255, 128, 0, 0); box-shadow: inset 0 0 4px 0 rgba(255, 255, 255, 0);
  transition: background-color .4s var(--h-come-spring-4), box-shadow .4s var(--h-come-spring-4);
}
.h-come__pill > span {
  position: relative; z-index: 1; flex: none; white-space: pre; filter: blur(0px); text-align: center; color: #1f1f1f;
  transition: color .4s var(--h-come-spring-4);
}
.h-come__mobile[data-step="1"] .h-come__pill--1 { background-color: #e81348; }
.h-come__mobile[data-step="2"] .h-come__pill--2 { background-color: rgb(255, 145, 48); }
.h-come__mobile[data-step="3"] .h-come__pill--3 { background-color: rgb(64, 17, 28); }
.h-come__mobile[data-step="1"] .h-come__pill--1, .h-come__mobile[data-step="2"] .h-come__pill--2, .h-come__mobile[data-step="3"] .h-come__pill--3 {
  box-shadow: inset 0 0 4px 0 rgba(255, 255, 255, .75);
}
.h-come__mobile[data-step="1"] .h-come__pill--1 > span, .h-come__mobile[data-step="2"] .h-come__pill--2 > span, .h-come__mobile[data-step="3"] .h-come__pill--3 > span { color: #fff; }
.h-come__info {
  position: relative; flex: none; width: 100%; height: min-content;
  display: flex; flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 24px; padding: 0; overflow: visible;
}
.h-come__tag {
  position: relative; z-index: 1; flex: none; width: min-content; height: min-content; margin: 0;
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; overflow: clip; will-change: transform; border-radius: 16px; background-color: #f6f6f6;
}
.h-come__tag .h-come__icon { color: rgb(46, 46, 46); }
.h-come__tag > span { position: relative; z-index: 1; flex: none; white-space: pre; color: rgb(43, 43, 43); }
.h-come__info > .h-come__m-title, .h-come__info > .h-come__m-text {
  position: relative; z-index: 1; flex: none; width: 100%; height: auto; margin: 0; display: none;
  white-space: pre-wrap; word-break: break-word; word-wrap: break-word; filter: blur(0px); text-align: center;
}
.h-come__info > .h-come__m-text { color: #fff; }
.h-come__mobile[data-step="1"] .h-come__m-title--1, .h-come__mobile[data-step="2"] .h-come__m-title--2, .h-come__mobile[data-step="3"] .h-come__m-title--3,
.h-come__mobile[data-step="1"] .h-come__m-text--1, .h-come__mobile[data-step="2"] .h-come__m-text--2, .h-come__mobile[data-step="3"] .h-come__m-text--3 { display: block; }

/* tablet 810–1599 */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-come { padding: 44px; }
  .h-come__mascot { top: 89px; left: 82px; width: 38%; }
}
/* phone */
@media (max-width: 809.98px) {
  .h-come { max-width: 500px; padding: 32px; }
  .h-come__mascot { top: -187px; left: 50%; width: 52%; transform: translateX(-50%); }
}


/* ==========================================================================
   h08-galleria
   ========================================================================== */
/* 08 galleria — Framer "Work" (#work): three Ticker rows tilted with perspective(1200px) skewX(4deg) skewY(4deg).
   The block is 1930px wide on every breakpoint (centred, the page clips the overflow). Motion: fx.js data-ticker. */
.h-galleria {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; flex: none; place-content: center; align-items: center; gap: 0;
  width: 1930px; height: min-content; padding: 64px; overflow: visible; pointer-events: auto;
  background-color: #141414;
}
.h-galleria__row { position: relative; flex: none; width: 100%; height: 300px; transform: perspective(1200px) skewX(4deg) skewY(4deg); }
/* the Ticker viewport: edges faded with a mask (fade width 25%, last row 50%) */
.h-galleria__ticker {
  display: flex; place-items: center; width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12.5%, #000 87.5%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12.5%, #000 87.5%, rgba(0, 0, 0, 0) 100%);
}
.h-galleria__ticker--wide-fade {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 25%, #000 75%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 25%, #000 75%, rgba(0, 0, 0, 0) 100%);
}
.h-galleria__track {
  position: relative; display: flex; flex-direction: row; place-items: center; gap: 24px;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; list-style: none;
}
.h-galleria__item { flex-shrink: 0; }
.h-galleria__card { position: relative; flex-shrink: 0; width: 442px; height: 251px; border-radius: 24px; overflow: visible; }
.h-galleria__row:first-child .h-galleria__card { height: 250px; }
.h-galleria__card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, .1); border-radius: inherit; pointer-events: none;
}
.h-galleria__card--top img { object-position: center top; }
.h-galleria__card--bottom img { object-position: center bottom; }

/* tablet 810–1599 */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-galleria { padding: 64px 32px; }
}
/* phone */
@media (max-width: 809.98px) {
  .h-galleria { padding: 24px; }
}


/* ==========================================================================
   h09-attivita
   ========================================================================== */
/* 09 · Byup per le attività (Framer "Benefits")
   desktop ≥1600 = base · tablet 810–1599.98 · phone ≤809.98 */
.h-attivita {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 2160px;
  padding: 64px 64px 0;
  background-color: #141414;
  pointer-events: auto;
}
/* contenitore con l'appear allo scroll (JS): opacity 0 → 1, translateY 40 → 0, perspective 1200 */
.h-attivita__container {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 64px;
  width: 100%;
  max-width: 1440px;
  border-radius: 50px;
  scroll-margin-top: 150px;
  will-change: transform;
}
.h-attivita__inner {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
}
.h-attivita__text,
.h-attivita__content {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  overflow: hidden;
}
.h-attivita__content { gap: 73px; }

/* pill "Byup per le attività" (componente Elements/Badge, variante Large) */
.h-attivita__pill {
  position: relative;
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  border-radius: 50px;
  overflow: hidden;
  background-color: rgba(13, 13, 13, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1em;
  letter-spacing: -0.02em;
  color: rgb(251, 250, 252);
  text-align: center;
  white-space: pre;
}
.h-attivita__pill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  pointer-events: none;
}

/* titolo: Instrument Serif corsivo + prima riga in Coolvetica; le lettere sono inline-block (effetto in JS) */
.h-attivita__title {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
  font-family: "Instrument Serif", "Instrument Serif Placeholder", serif;
  font-size: 50px;
  font-style: italic;
  font-weight: 400;
  color: #fff;
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  pointer-events: none;
}
/* come Framer: l'interlinea in em vale per ogni elemento, rispetto alla sua dimensione */
.h-attivita__title,
.h-attivita__title * { line-height: 1em; }
.h-attivita__title-top {
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-style: normal;
}
.h-attivita__title-bottom { font-size: 66px; font-style: italic; }
.h-attivita__title strong { font-weight: 700; }
.h-attivita__title-br { display: none; }
.h-attivita__word { white-space: nowrap; }
.h-attivita__word--long { white-space: unset; }
.h-attivita__char { display: inline-block; will-change: transform; }

/* testo */
.h-attivita__body {
  position: relative;
  flex: none;
  width: 100%;
}
.h-attivita__p {
  font-family: "Proxima Nova Regular", "Proxima Nova Regular Placeholder", sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgb(194, 194, 194);
  text-align: center;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.h-attivita__p,
.h-attivita__p * { line-height: 1.5em; }
.h-attivita__p--2 { font-size: 20px; }
.h-attivita__gap,
.h-attivita__p-text { font-size: 26px; letter-spacing: -0.02em; }
.h-attivita__p strong { font-weight: 700; }

/* ---------- tablet ---------- */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-attivita { padding: 64px 32px 0; }
  .h-attivita__container { gap: 24px; }
  .h-attivita__title { font-size: 38px; }
  .h-attivita__title-top { font-size: 50px; }
  .h-attivita__title-bottom { font-size: inherit; }
  /* nell'originale lo stile di testo del paragrafo non viene caricato: Inter 16px, allineato a sinistra */
  .h-attivita__p {
    font-family: "Inter", "Inter Placeholder", sans-serif;
    font-size: 16px;
    letter-spacing: normal;
    text-align: start;
  }
  .h-attivita__p,
  .h-attivita__p * { line-height: 1.2em; }
  .h-attivita__p--2 { color: #000; }
  .h-attivita__gap { letter-spacing: normal; }
  .h-attivita__p-text { font-size: inherit; letter-spacing: normal; color: rgb(194, 194, 194); }
}

/* ---------- phone ---------- */
@media (max-width: 809.98px) {
  .h-attivita { padding: 64px 24px 0; }
  .h-attivita__pill { background-color: rgba(166, 0, 52, 0.4); }
  .h-attivita__title { font-size: 24px; }
  .h-attivita__title,
  .h-attivita__title * { line-height: 0.9em; }
  .h-attivita__title-bottom { font-size: 53px; }
  .h-attivita__title-pre { font-size: 30px; }
  .h-attivita__title-sp { display: none; }
  .h-attivita__title-br { display: inline; }
  .h-attivita__p {
    font-family: "Inter", "Inter Placeholder", sans-serif;
    font-size: 16px;
    letter-spacing: normal;
    text-align: center;
  }
  .h-attivita__p,
  .h-attivita__p * { line-height: 1.2em; }
  .h-attivita__p--2 { color: #000; }
  .h-attivita__gap { letter-spacing: normal; }
  .h-attivita__p-text { font-size: inherit; letter-spacing: normal; color: rgb(194, 194, 194); }
}


/* ==========================================================================
   h10-pagamenti
   ========================================================================== */
/* 10 · Metodi di pagamento (Framer "Logos" + Ticker)
   desktop ≥1600 = base · tablet 810–1599.98 (= desktop) · phone ≤809.98 */
.h-pagamenti {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 100px 64px 0;
  background-color: #141414;
  overflow: hidden;
}
/* contenitore con l'appear allo scroll (JS, come la sezione 09) */
.h-pagamenti__container {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: 1200px;
  padding: 36px 0;
  scroll-margin-top: 150px;
  will-change: transform;
}
.h-pagamenti__label {
  position: relative;
  flex: none;
  font-family: "Satoshi", "Satoshi Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4em;
  letter-spacing: -0.02em;
  color: rgb(153, 153, 153);
  text-align: center;
  white-space: pre;
}
/* ticker: sfumatura ai lati (fadeWidth 50 → 25% per lato), overflow nascosto */
.h-pagamenti__ticker {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  width: 100%;
  height: 55px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 25%, #000 75%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 25%, #000 75%, rgba(0, 0, 0, 0) 100%);
}
.h-pagamenti__track {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
}
.h-pagamenti__logo { flex: none; width: 176px; }
.h-pagamenti__logo--small { width: 136px; }
.h-pagamenti__logo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3.33333;
  object-fit: cover;
}

/* ---------- phone ---------- */
@media (max-width: 809.98px) {
  .h-pagamenti { padding: 0 64px; }
  .h-pagamenti__container { gap: 20px; width: 150%; padding: 46px 0; }
  .h-pagamenti__track { gap: 29px; }
}


/* ==========================================================================
   h11-prodotti
   ========================================================================== */
/* 11 · Prodotti Byup (Framer "Features")
   desktop ≥1600 = base (griglia 3 colonne) · tablet 810–1599.98 (2 colonne) · phone ≤809.98 (1 colonna) */
.h-prodotti {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 80px;
  width: 100%;
  max-width: 2160px;
  padding: 0 100px;
  background-color: #141414;
  overflow: hidden;
}
.h-prodotti__grid {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  grid-template-rows: repeat(4, 200px);
  grid-auto-rows: 200px;
  justify-content: center;
  gap: 20px;
  width: 100%;
  min-height: 800px;
  overflow: hidden;
}

/* card (appear in vista: fx.js) — bordo 1px come ::after, sopra le immagini */
.h-prodotti__card {
  position: relative;
  flex: none;
  place-self: start;
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  will-change: transform;
}
.h-prodotti__card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid var(--h-prodotti-border, transparent);
  border-radius: inherit;
  pointer-events: none;
}
.h-prodotti__card--manager {
  grid-area: span 2 / span 2;
  justify-content: flex-start;
  align-items: flex-start;
  background: linear-gradient(180deg, #ff006240 0%, #141414 100%);
  --h-prodotti-border: #ff004d96;
}
.h-prodotti__card--sistema {
  grid-row: span 2;
  justify-content: center;
  align-items: flex-end;
  background: linear-gradient(#ffe3f0d6 0%, #14141400 100%);
  --h-prodotti-border: #3b3b3b;
}
.h-prodotti__card--aggiornato {
  grid-row: span 2;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, #361525 0%, #141414 100%);
  --h-prodotti-border: #242424;
}
.h-prodotti__card--fresh {
  grid-area: span 2 / span 2;
  justify-content: flex-start;
  align-items: flex-end;
  background: linear-gradient(180deg, #141414 0%, #f86c5f42 100%);
  --h-prodotti-border: #f76b5e96;
}

/* intestazioni Byup Manager / Byup Fresh: logo in alto, nome al centro, claim in basso */
.h-prodotti__head {
  position: absolute;
  z-index: 1;
  left: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: min-content;
  border-radius: 8px;
}
.h-prodotti__head--manager { top: 117px; bottom: 31px; }
.h-prodotti__head--fresh { bottom: 33px; height: 281px; }
.h-prodotti__logo { position: relative; flex: none; width: 245px; height: 107px; }
.h-prodotti__brand,
.h-prodotti__claim {
  position: relative;
  flex: none;
  font-weight: 400;
  white-space: pre;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}
/* interlinea in em applicata a ogni elemento (come Framer) */
.h-prodotti__brand,
.h-prodotti__brand * { line-height: 1.2em; }
.h-prodotti__claim,
.h-prodotti__claim * { line-height: 0.8em; }
.h-prodotti__brand--manager {
  font-family: "Instrument Serif", "Instrument Serif Placeholder", serif;
  font-size: 40px;
  font-style: italic;
  letter-spacing: -0.04em;
  color: rgb(221, 25, 82);
}
.h-prodotti__brand-byup {
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-style: normal;
  letter-spacing: 0;
}
.h-prodotti__brand-sp {
  font-family: "Geist", "Geist Placeholder", sans-serif;
  font-style: normal;
  font-weight: 600;
}
.h-prodotti__claim--manager {
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 58px;
  color: #fff;
}
.h-prodotti__brand--fresh {
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 40px;
  color: rgb(255, 77, 90);
}
.h-prodotti__brand--fresh em { font-style: italic; }
.h-prodotti__claim--fresh {
  font-family: "Geist", "Geist Placeholder", sans-serif;
  font-size: 58px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #fff;
}

/* titoli delle card centrali */
.h-prodotti__title {
  position: absolute;
  z-index: 1;
  top: 40px;
  left: 50%;
  transform: translate(-50%);
  font-family: "Geist", "Geist Placeholder", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2em;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: pre;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
}
.h-prodotti__title--dark { color: #000; }

/* immagini */
.h-prodotti__media { position: relative; z-index: 0; flex: none; overflow: hidden; }
.h-prodotti__media img { object-fit: contain; }
.h-prodotti__media--manager { flex: 1 0 0px; width: 1px; height: 100%; will-change: transform; }
.h-prodotti__media--manager img { object-position: right center; }
.h-prodotti__media--phone {
  position: absolute;
  top: 12.7381%;
  left: 6.51214%;
  width: 82%;
  height: 123%;
  -webkit-mask-image: linear-gradient(#000 75%, #00000080 100%);
  mask-image: linear-gradient(#000 75%, #00000080 100%);
}
.h-prodotti__media--watch {
  width: 169%;
  height: 174%;
  will-change: transform;
  -webkit-mask-image: linear-gradient(#000 60%, #00000080 100%);
  mask-image: linear-gradient(#000 60%, #00000080 100%);
}
.h-prodotti__media--watch img { object-position: center bottom; }
.h-prodotti__media--fresh {
  width: 100%;
  height: 85%;
  will-change: transform;
  -webkit-mask-image: linear-gradient(#000 80%, #0000 100%);
  mask-image: linear-gradient(#000 80%, #0000 100%);
}
.h-prodotti__media--fresh img { object-position: right center; }

/* ---------- tablet ---------- */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-prodotti { gap: 40px; padding: 80px 40px; }
  .h-prodotti__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-template-rows: repeat(6, 200px); }
  .h-prodotti__claim--fresh { font-size: 34px; }
}

/* ---------- phone ---------- */
@media (max-width: 809.98px) {
  .h-prodotti { gap: 40px; padding: 0 20px; }
  .h-prodotti__grid { grid-template-columns: repeat(1, minmax(50px, 1fr)); height: 1659px; }
  .h-prodotti__card--manager { grid-column: span 1; }
  .h-prodotti__card--sistema { --h-prodotti-border: #696969; }
  .h-prodotti__card--aggiornato { height: 82%; }
  .h-prodotti__card--fresh { position: absolute; z-index: 1; bottom: 0; left: calc(50% - 175px); width: 350px; height: 420px; }

  .h-prodotti__head { top: 12px; bottom: 12px; left: 10px; }
  .h-prodotti__head--fresh { height: auto; }
  .h-prodotti__logo { width: 131px; height: 54px; }
  .h-prodotti__brand,
  .h-prodotti__claim { position: absolute; z-index: 1; }
  .h-prodotti__brand--manager {
    top: 54px;
    left: 4px;
    font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
    font-size: 21px;
    font-style: normal;
    letter-spacing: normal;
    text-align: center;
    font-feature-settings: normal;
  }
  .h-prodotti__brand--manager,
  .h-prodotti__brand--manager * { line-height: 0.9em; }
  .h-prodotti__brand--manager .h-prodotti__brand-sp { font-family: inherit; font-weight: inherit; }
  .h-prodotti__claim--manager { top: 96px; right: -56px; font-size: 16px; font-feature-settings: normal; }
  .h-prodotti__claim--manager span { font-size: 28px; }
  .h-prodotti__brand--fresh { top: 57px; left: 5px; font-size: 18px; font-feature-settings: normal; }
  .h-prodotti__claim--fresh {
    top: 95px;
    right: -24px;
    font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
    font-size: 21px;
    font-weight: 400;
    letter-spacing: normal;
  }

  .h-prodotti__media--manager { position: absolute; flex: none; top: calc(85.9524% - 220.5px); left: calc(58.2857% - 184px); width: 368px; height: 441px; }
  .h-prodotti__media--manager img { object-position: center top; }
  .h-prodotti__media--watch { height: 171%; }
  .h-prodotti__media--fresh { position: absolute; top: 41.1905%; left: 4%; width: 92%; height: 61%; }
  .h-prodotti__media--fresh img { object-fit: cover; object-position: center; }
}


/* ==========================================================================
   h12-intro
   ========================================================================== */
/* 12 · Introduzione (Framer "Introduction")
   desktop ≥1600 = base · tablet 810–1599.98 · phone ≤809.98 */
.h-intro {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 2160px;
  padding: 0 100px 100px;
  background-color: #141414;
  border-radius: 0 0 150px 150px;
}
/* #text-reveal: la sua posizione nello schermo guida il testo karaoke (0 = bordo alto in cima → 1 = bordo basso in fondo) */
.h-intro__wrap {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  height: 1635px;
}
.h-intro__sticky {
  position: sticky;
  top: 40px;
  z-index: 1;
  flex: 1 0 0px;
  width: 1px;
  height: 93.2401vh;
  max-height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  padding: 0 0 100px;
  overflow: hidden;
}
.h-intro__spacer {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  width: 100%;
  min-height: 29px;
  overflow: hidden;
}

/* "Byup" gigante: SVG con viewBox fisso → il testo scala con la larghezza (fit text di Framer) */
.h-intro__word {
  position: absolute;
  z-index: 1;
  top: -461px;
  left: 0;
  right: 0;
  height: auto;
  flex: none;
  overflow: hidden;
}
.h-intro__word-fit { overflow: visible; transform-origin: center center; }
.h-intro__word-text {
  margin: 0;
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 168.82357688367594px;
  font-weight: 400;
  line-height: 1.2em;
  letter-spacing: -0.07px;
  color: rgba(255, 255, 255, 0.06);
  white-space: pre;
}

/* testo karaoke: una span per carattere (JS), grigia e sfocata → bianca quando "accesa" */
.h-intro__reveal {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  width: 100%;
}
.h-intro__karaoke {
  position: relative;
  flex: none;
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: "Geist", "Geist Placeholder", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: pre-wrap;
  user-select: text;
}
.h-intro__char {
  color: rgb(166, 166, 166);
  filter: blur(3px);
  transition: color 0.2s ease-out, background 0.2s ease-out, filter 0.2s ease-out;
}
.h-intro__char.is-on { color: #fff; filter: blur(0px); }

/* Byuppino: centrato al 59% (translate), scala 0.85 → 1 e y 40 → 0 mentre attraversa lo schermo (fx.js) */
.h-intro__mascot {
  position: absolute;
  z-index: 1;
  top: -25px;
  left: 59%;
  translate: -50% 0;
  flex: none;
  width: 511px;
  height: auto;
  aspect-ratio: 0.697074;
  overflow: hidden;
  will-change: transform;
  -webkit-mask-image: linear-gradient(#000 40%, #0000 80%);
  mask-image: linear-gradient(#000 40%, #0000 80%);
}
.h-intro__mascot img { object-fit: contain; }

/* ---------- tablet ---------- */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-intro { padding: 0 40px 100px; }
  .h-intro__wrap { height: 1600px; }
  .h-intro__sticky { height: 60vh; max-height: none; justify-content: center; padding: 0; }
  .h-intro__karaoke { font-size: 32px; }
  .h-intro__char,
  .h-intro__char.is-on { filter: blur(0px); transition: color 0.2s ease-out, background 0.2s ease-out; }
}

/* ---------- phone ---------- */
@media (max-width: 809.98px) {
  .h-intro { padding: 0 20px 60px; border-radius: 0 0 50px 50px; }
  .h-intro__wrap { height: 1057px; }
  .h-intro__sticky { height: 67.891vh; max-height: none; justify-content: center; gap: 0; padding: 100px 0; }
  .h-intro__spacer { order: 0; min-height: 260px; padding: 105px 0; }
  .h-intro__reveal { order: 3; height: 438px; padding: 99px 0; }
  .h-intro__karaoke { height: 117%; font-size: 20px; }
  .h-intro__char { color: rgb(31, 31, 31); }
  .h-intro__char,
  .h-intro__char.is-on { filter: blur(0px); transition: color 0.2s ease-out, background 0.2s ease-out; }
  .h-intro__mascot { order: 2; top: 62px; left: 107px; translate: none; width: 185px; height: 294px; aspect-ratio: auto; }
}


/* ==========================================================================
   h13-recensioni
   ========================================================================== */
/* 13 · Recensioni — "Cosa ne pensano le persone?"
   Original: Container .framer-1g7y29w + Ticker ×2 (desktop/tablet) / SlideShow (phone),
   cards = component "Testimonial" (f7KpmaN4s / e5u4h7ri6), avatars = AvatarGroupEditable. */
.h-recensioni {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  max-width: 2160px;
  height: min-content;
  padding: 224px 80px;
  overflow: hidden;
  border-top-left-radius: 50px;
  border-top-right-radius: 20px;
}

/* ---- title (characters are wrapped by h13-recensioni.js for the appear effect) ---- */
.h-recensioni__title {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 66px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  color: #000;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  pointer-events: none;
}
.h-recensioni__title em {
  font-family: "Instrument Serif", "Instrument Serif Placeholder", serif;
  font-style: italic;
}
.h-recensioni__title .h13-word { white-space: nowrap; }
.h-recensioni__title .h13-char { display: inline-block; }

/* ---- avatar group (200×55 box, 5 × 48px circles overlapping by 12px) ---- */
.h-recensioni__avatars {
  position: relative;
  flex: none;
  width: 200px;
  height: 55px;
}
.h-recensioni__avatar {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: #f5f5f5;
}
.h-recensioni__avatar:nth-child(1) { left: 0; z-index: 5; }
.h-recensioni__avatar:nth-child(2) { left: 36px; z-index: 4; }
.h-recensioni__avatar:nth-child(3) { left: 72px; z-index: 3; }
.h-recensioni__avatar:nth-child(4) { left: 108px; z-index: 2; }
.h-recensioni__avatar:nth-child(5) { left: 144px; z-index: 1; }
.h-recensioni__avatar picture { display: contents; }
.h-recensioni__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- desktop / tablet: two tickers ---- */
.h-recensioni__tickers {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  overflow: hidden;
}
.h-recensioni__ticker {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 260px;
  padding: 10px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12.5%, #000 87.5%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 12.5%, #000 87.5%, rgba(0, 0, 0, 0) 100%);
}
.h-recensioni__row {
  position: relative;
  display: flex;
  flex-direction: row;
  place-items: center;
  gap: 24px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.h-recensioni__slot {
  flex-shrink: 0;
  width: 400px;
  height: 260px;
}

/* ---- review card ---- */
.h-review {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 24px;
  overflow: hidden;
  background-color: rgb(250, 250, 250);
  border-radius: 16px;
}
.h-review::after {                 /* 1px border drawn inside, like Framer's data-border */
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgb(238, 238, 238);
  border-radius: inherit;
  pointer-events: none;
}
.h-review__body {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: 100%;
}
.h-review__stars {                 /* 5 Phosphor "star" (fill) 20px, gap 4px */
  flex: none;
  display: block;
  width: 116px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 307.2 256'%3E%3Cpath fill='rgb(255,208,0)' d='M234.29,114.85l-45,38.83L203,211.75a16.4,16.4,0,0,1-24.5,17.82L128,198.49,77.47,229.57A16.4,16.4,0,0,1,53,211.75l13.76-58.07-45-38.83A16.46,16.46,0,0,1,31.08,86l59-4.76,22.76-55.08a16.36,16.36,0,0,1,30.27,0l22.75,55.08,59,4.76a16.46,16.46,0,0,1,9.37,28.86Z'/%3E%3C/svg%3E") 0 0 / 24px 20px repeat-x;
}
.h-review__quote {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0;
}
.h-review__quote p {
  width: 100%;
  color: rgb(109, 109, 109);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.h-review__author {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding-top: 32px;
}
.h-review__photo {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 40px;
  object-fit: cover;
}
.h-review__name { white-space: pre; }

/* ---- phone: slideshow ---- */
.h-recensioni__slider {
  position: relative;
  flex: none;
  width: 100%;
  height: 350px;
  user-select: none;
  -webkit-user-select: none;
}
.h-recensioni__viewport {
  position: absolute;
  inset: 0;
  padding-bottom: 40px;
  overflow: hidden;
}
.h-recensioni__track {
  display: flex;
  flex-direction: row;
  place-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  cursor: grab;
  touch-action: pan-y;
}
.h-recensioni__track.is-grabbing { cursor: grabbing; }
.h-recensioni__slide {
  flex: none;
  width: 100%;
  height: 100%;
}
.h-recensioni__slide img { -webkit-user-drag: none; }
.h-recensioni__arrows {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.h-recensioni__arrow {                    /* SlideShow arrows: 28px, rgba(0,0,0,.2), whileTap scale .9 / .15s */
  display: block;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 40px;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  transition: transform 0.15s cubic-bezier(0.42, 0, 0.58, 1);
}
.h-recensioni__arrow:active { transform: scale(0.9); }
.h-recensioni__arrow img { width: 28px; height: 28px; }

/* ---- tablet (810–1599.98) ---- */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-recensioni { padding: 224px 40px; }
  .h-recensioni__title { font-size: 38px; }
  .h-recensioni__tickers { gap: 20px; }
  .h-recensioni__row { gap: 20px; }
}

/* ---- phone (≤ 809.98) ---- */
@media (max-width: 809.98px) {
  .h-recensioni { padding: 40px 24px; }
  .h-recensioni__title { font-size: 32px; }
}


/* ==========================================================================
   h14-faq
   ========================================================================== */
/* 14 · FAQ — "Ci chiedono spesso" (#news)
   Original: section .framer-1jsqqo0, Eyes (N0V1UBRTC + Mouse_follow), FAQs (yv4GP7RB_) with 6 × Accordion (SZSyEhTTf).
   Open/close: spring stiffness 500 / damping 60 (h14-faq.js). */
.h-faq {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 2160px;
  height: min-content;
  padding: 64px;
  overflow: visible;
  background-color: #141414;
  border-top-left-radius: 150px;
  border-top-right-radius: 150px;
}

/* ---- head: eyes, title, subtitle ---- */
.h-faq__head {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  overflow: clip;
}
.h-faq__eyes {
  position: relative;
  flex: none;
  width: 56px;
  height: 36px;
}
.h-faq__eye {                    /* left: 24×36 box; right: 24px × the eyes box height (34.6px on phone) */
  position: absolute;
  top: 0;
  width: 24px;
}
.h-faq__eye:first-child { left: 0; height: 36px; }
.h-faq__eye:last-child { right: 0; bottom: 0; }
.h-faq__eye::before {             /* the white shape is always 24×36 */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 36px;
  border-radius: 40px;
  background-color: rgb(255, 254, 253);
}
.h-faq__pupil-box {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.h-faq__pupil-follow {            /* moved towards the cursor (max 10px) by h14-faq.js */
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.h-faq__pupil {
  position: relative;
  z-index: 2;
  flex: none;
  width: 16px;
  height: 22px;
  border-radius: 100%;
  background-color: rgb(12, 12, 12);
}
.h-faq__glint {
  position: absolute;
  z-index: 1;
  bottom: 3px;
  left: calc(50% - 1.5px);
  width: 3px;
  height: 3px;
  border-radius: 100%;
  background-color: rgb(255, 254, 253);
}
.h-faq__title {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 66px;
  font-weight: 400;
  line-height: 0.9;
  text-align: center;
  color: #fff;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  pointer-events: none;
}
.h-faq__subtitle {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
  max-width: 550px;
  color: #ededed;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  pointer-events: none;
}

/* ---- accordion ---- */
.h-faq__list-box {                /* FAQs container (max 800px) */
  position: relative;
  flex: none;
  width: 100%;
  max-width: 800px;
}
.h-faq__list {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 26px;
}
.h-faq__item {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  padding: 24px;
  overflow: hidden;
  cursor: pointer;
  background-color: #fff;
  border-radius: 24px;
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.06);
}
.h-faq__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: inherit;
  pointer-events: none;
}
.h-faq__content {
  position: relative;
  flex: 1 0 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 1px;
}
.h-faq__q {
  flex: none;
  width: 100%;
  margin: 0;
  font: inherit;
}
.h-faq__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  border-radius: 4px;
}
.h-faq__btn:focus { outline: none; }
.h-faq__btn:focus-visible { outline: 2px solid rgb(235, 52, 86); outline-offset: 4px; }
.h-faq__q-text {
  flex: 1 0 0px;
  display: block;
  width: 1px;
  text-align: left;
  color: #1a1a1a;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  user-select: none;
  -webkit-user-select: none;
}
.h-faq__plus {
  flex: none;
  width: 24px;
  height: 24px;
  overflow: hidden;
  fill: none;
  stroke: rgb(235, 52, 86);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.h-faq__item.is-open .h-faq__plus { transform: rotate(45deg); }
.h-faq__a {                       /* closed: parked below the card (bottom -120px), invisible */
  position: absolute;
  bottom: -120px;
  left: 0;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.h-faq__item.is-open .h-faq__a {
  position: relative;
  bottom: auto;
  left: auto;
  opacity: 1;
}
.h-faq__a p {
  flex: 1 0 0px;
  width: 1px;
  text-align: left;
  color: #6b6b75;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- tablet (810–1599.98) ---- */
@media (min-width: 810px) and (max-width: 1599.98px) {
  .h-faq { padding: 44px; }
  .h-faq__title { font-size: 38px; }
}

/* ---- phone (≤ 809.98) ---- */
@media (max-width: 809.98px) {
  .h-faq {
    max-width: 500px;
    padding: 32px;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }
  .h-faq__eyes { width: 50px; height: auto; aspect-ratio: 1.4444444444444444 / 1; }
  .h-faq__title { font-size: 32px; }
}


/* ==========================================================================
   h15-cta
   ========================================================================== */
/* 15 · CTA — "In arrivo in Inverno 2027" (component "CTA Section" NE3HsOnaV, home only).
   The component switches variant with the SITE layout breakpoints: Desktop ≥ 1200, Tablet 810–1199.98
   (padding 44), Phone ≤ 809.98 (padding 69/32, no paragraph, container max 500px). */
.h-cta {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 2160px;
  height: min-content;
  padding: 64px;
  overflow: visible;
  background: linear-gradient(180deg, rgb(20, 20, 20) 0%, rgba(54, 10, 22, 0.74) 54%, rgba(255, 255, 255, 0) 98.49848016962275%);
}

/* ---- app icon with crown ---- */
.h-cta__icon {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
}
.h-cta__app {
  position: relative;
  z-index: 1;
  flex: none;
  width: 192px;
  height: 192px;
  object-fit: cover;
}
.h-cta__crown {
  position: absolute;
  z-index: 3;
  top: -47px;
  right: 1px;
  width: 94px;
  height: 94px;
  object-fit: cover;
  transform: rotate(15deg);
}

/* ---- "In Arrivo su tutti gli Store" pill (component AppStore Badge, variant 1) ---- */
.h-cta__pill {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  padding: 10px 14px;
  overflow: clip;
  background-color: #f6f6f6;
  border-radius: 100px;
}
.h-cta__pill-play {
  flex: none;
  width: 14px;
  height: auto;
  aspect-ratio: 0.9095043201455206 / 1;
  object-fit: cover;
}
.h-cta__pill-store {
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.002 16'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0.4975' x2='0.5025' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='rgb(24,191,251)'/%3E%3Cstop offset='1' stop-color='rgb(32,114,243)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 12.768 0 L 3.232 0 C 1.446 0 0 1.446 0 3.232 L 0 12.77 C 0 14.554 1.446 16 3.232 16 L 12.77 16 C 14.554 16 16.002 14.554 16.002 12.768 L 16.002 3.232 C 16 1.446 14.554 0 12.768 0 Z' fill='url(%23g)'/%3E%3Cpath d='M 7.93 3.677 L 8.254 3.117 C 8.454 2.767 8.9 2.649 9.25 2.849 C 9.6 3.049 9.718 3.495 9.518 3.845 L 6.396 9.249 L 8.654 9.249 C 9.386 9.249 9.796 10.109 9.478 10.705 L 2.858 10.705 C 2.454 10.705 2.13 10.381 2.13 9.977 C 2.13 9.573 2.454 9.249 2.858 9.249 L 4.714 9.249 L 7.09 5.131 L 6.348 3.843 C 6.148 3.493 6.266 3.051 6.616 2.847 C 6.966 2.647 7.408 2.765 7.612 3.115 Z M 5.122 11.455 L 4.422 12.669 C 4.222 13.019 3.776 13.137 3.426 12.937 C 3.076 12.737 2.958 12.291 3.158 11.941 L 3.678 11.041 C 4.266 10.859 4.744 10.999 5.122 11.455 Z M 11.15 9.253 L 13.044 9.253 C 13.448 9.253 13.772 9.577 13.772 9.981 C 13.772 10.385 13.448 10.709 13.044 10.709 L 11.992 10.709 L 12.702 11.941 C 12.902 12.291 12.784 12.733 12.434 12.937 C 12.084 13.137 11.642 13.019 11.438 12.669 C 10.242 10.595 9.344 9.043 8.748 8.009 C 8.138 6.957 8.574 5.901 9.004 5.543 C 9.482 6.363 10.196 7.601 11.15 9.253 Z' fill='rgb(255,255,255)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.h-cta__pill-text {
  position: relative;
  z-index: 1;
  flex: none;
  white-space: pre;
}

/* ---- animated gradient background (masked towards the top) + grain ---- */
.h-cta__bg {
  position: absolute;
  z-index: 0;
  left: calc(50% - 100% / 2);
  top: calc(50.06640106241702% - 100.265604249668% / 2);
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask: linear-gradient(0deg, #000 0%, #000 46.846846846846844%, rgba(0, 0, 0, 0) 100%) add;
  mask: linear-gradient(0deg, #000 0%, #000 46.846846846846844%, rgba(0, 0, 0, 0) 100%) add;
}
.h-cta__gradient {               /* TEMP: CSS approximation of the WebGL warp (props in data-warp) */
  position: absolute;
  inset: -8%;
  background:
    radial-gradient(20% 24% at 72% 47%, rgba(246, 200, 212, 0.75) 0%, rgba(246, 200, 212, 0) 100%),
    radial-gradient(24% 38% at 63% 64%, rgba(236, 150, 172, 0.95) 0%, rgba(236, 150, 172, 0) 100%),
    radial-gradient(18% 42% at 88% 84%, rgba(205, 50, 92, 0.85) 0%, rgba(205, 50, 92, 0) 100%),
    radial-gradient(44% 58% at 65% 68%, rgba(228, 100, 135, 1) 0%, rgba(228, 100, 135, 0) 100%),
    linear-gradient(90deg, rgb(57, 14, 28) 0%, rgb(57, 14, 28) 33%, rgb(150, 24, 58) 50%, rgb(175, 35, 70) 80%, rgb(110, 18, 44) 100%);
  will-change: transform;
  animation: h-cta-drift 16s ease-in-out infinite alternate;
}
@keyframes h-cta-drift {
  from { transform: translate3d(-3%, 1.5%, 0) rotate(-1.5deg); }
  to { transform: translate3d(3%, -1.5%, 0) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) { .h-cta__gradient { animation: none; } }
.h-cta__gradient:has(> canvas) { inset: 0; background: none; animation: none; transform: none; }   /* WebGL mounted */
.h-cta__gradient > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.h-cta__grain {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background: url(../img/home-hero-grana.webp) 0 0 / 200px repeat;
}

/* ---- title ---- */
.h-cta__head {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 0;
  overflow: clip;
}
.h-cta__title {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
  font-family: "Coolvetica Regular", "Coolvetica Regular Placeholder", sans-serif;
  font-size: 52px;
  font-weight: 400;
  line-height: 0.9;
  text-align: center;
  color: #fff;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  pointer-events: none;
}
.h-cta__tbr { font-size: 66px; }
.h-cta__t2 {
  font-family: "Instrument Serif", "Instrument Serif Placeholder", serif;
  font-size: 100px;
  font-style: italic;
}

/* ---- paragraph ---- */
.h-cta__text {
  position: relative;
  flex: none;
  width: 852px;
  font-family: "Proxima Nova Thin", sans-serif;
  font-size: 18px;
  font-weight: 250;
  letter-spacing: -0.02em;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.h-cta__sb {
  font-family: "Proxima Nova Semibold", "Proxima Nova Semibold Placeholder", sans-serif;
  font-weight: 600;
}

/* ---- "Preordina Gratis" (component "Download for iPhone Button", variant Large) ---- */
.h-cta__btn {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  padding: 0;
  cursor: pointer;
}
.h-cta__btn-box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  padding: 12px 16px;
  overflow: clip;
  background-color: #1f1f1f;
  border-radius: 16px;
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.33), inset 0 0 5px 0 rgba(255, 255, 255, 0);
  /* spring bounce 0.2 / 0.4 s */
  transition:
    box-shadow 0.4s linear(0, 0.0533, 0.1755, 0.3245, 0.474, 0.6093, 0.7234, 0.8145, 0.8838, 0.9341, 0.9688, 0.9913, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1.0051, 1.0035, 1.0023, 1.0014, 1.0007, 1),
    transform 0.4s linear(0, 0.0533, 0.1755, 0.3245, 0.474, 0.6093, 0.7234, 0.8145, 0.8838, 0.9341, 0.9688, 0.9913, 1.0049, 1.012, 1.0148, 1.015, 1.0136, 1.0115, 1.0092, 1.007, 1.0051, 1.0035, 1.0023, 1.0014, 1.0007, 1);
}
@media (hover: hover) {
  .h-cta__btn:hover .h-cta__btn-box { box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.45), inset 0 0 5px 0 rgba(255, 255, 255, 0.49); }
}
.h-cta__btn:active .h-cta__btn-box {
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.45), inset 0 0 5px 0 #fff;
  transform: scale(0.985);
}
.h-cta__btn:focus { outline: none; }
.h-cta__btn:focus-visible .h-cta__btn-box { outline: 2px solid #fff; outline-offset: 3px; }
.h-cta__btn-logo {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min-content;
  padding-bottom: 2px;
  overflow: clip;
}
.h-cta__btn-logo svg { width: 13px; height: 16px; fill: #fff; overflow: visible; }
.h-cta__btn-label {
  position: relative;
  z-index: 1;
  flex: none;
  color: #fff;
  white-space: pre;
}

/* ---- CTA "Tablet" variant: site layout 810–1199.98 ---- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .h-cta { padding: 44px; }
}

/* ---- phone (≤ 809.98) ---- */
@media (max-width: 809.98px) {
  .h-cta { max-width: 500px; padding: 69px 32px; }
  .h-cta__crown { top: -41px; }
  .h-cta__title { font-size: 28px; }
  .h-cta__t1 { font-size: 40px; }
  .h-cta__text { display: none; }
}


/* ==========================================================================
   p02-hero
   ========================================================================== */
/* 02 · HERO (/prodotti) — valori dal CSS servito (rvAJfzTar, classi framer-1ab3o8r …)
   desktop ≥1200 = base · tablet 810–1199.98 · phone ≤809.98 */

.p-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  padding: 136px 30px 120px 30px;
  overflow: hidden;
  background-color: #f86c5f;
}

/* aloni sfocati (Shadow Left / Right) */
.p-hero__glow { position: absolute; flex: none; pointer-events: none; user-select: none; -webkit-user-select: none; filter: blur(100px); }
.p-hero__glow--left { left: -160px; bottom: -245px; width: 715px; height: 502px; background-color: rgba(222, 0, 78, .52); }
.p-hero__glow--right { right: 50px; top: 0; width: 330px; max-width: 330px; height: auto; aspect-ratio: 1.65 / 1; background-color: rgba(222, 0, 70, .37); }

/* ---- immagini: dashboard + card ---- */
.p-hero__images {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 60px;
  width: 46%;
  max-width: 650px;
  height: min-content;
}

.p-hero__card {
  position: absolute;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 25%;
  max-width: 140px;
  height: auto;
  padding: 1px;
  border-radius: 10px;
  background: linear-gradient(130deg, #ffffff 0%, rgba(255, 255, 255, .05) 75%);
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.p-hero__card--01 { left: 30px; top: 7px; aspect-ratio: 1.09375 / 1; }
.p-hero__card--02 { left: 57%; top: -10px; aspect-ratio: 1.386138613861386 / 1; translate: -50% 0; }

.p-hero__card-bg {
  position: relative;
  display: flex;
  flex: 1 0 0px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 1px;
  height: 100%;
  border-radius: 10px;
  background-color: #161616;
  overflow: hidden;
}
.p-hero__card-img { position: relative; flex: 1 0 0px; width: 1px; height: auto; border-radius: 10px; object-fit: cover; }
.p-hero__card-img--01 { aspect-ratio: 1.0952380952380953 / 1; }
.p-hero__card-img--02 { aspect-ratio: 1.393939393939394 / 1; }

.p-hero__card-glow {
  position: absolute;
  right: -26px;
  top: -13px;
  flex: none;
  width: 74%;
  height: auto;
  aspect-ratio: 1.8214285714285714 / 1;
  border-radius: 100%;
  background-color: #ff0051;
  opacity: .4;
  filter: blur(30px);
  transform: rotate(12deg);
  pointer-events: none;
}
.p-hero__card-glow--02 { background-color: #de003b; }

.p-hero__dashboard {
  position: relative;
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 1.0351617440225036 / 1;
  object-fit: fill;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* card 03 / 04: trascinabili (tornano al loro posto al rilascio) */
.p-hero__float {
  position: absolute;
  z-index: 1;
  flex: none;
  height: auto;
  box-shadow: 22px 14px 16px 0 rgba(0, 0, 0, .07), 17px 2px 19px 0 rgba(0, 0, 0, .05);
  cursor: grab;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.p-hero__float.is-dragging { cursor: grabbing; }
.p-hero__float--03 { right: -40px; top: -30px; width: 32%; max-width: 180px; aspect-ratio: 1.1812080536912752 / 1; border-radius: 12px; }
.p-hero__float--04 { left: -57px; bottom: 37px; width: 50%; max-width: 275px; aspect-ratio: 1.5027322404371584 / 1; border-radius: 24px; }
.p-hero__float--04 img { object-fit: contain; }

/* ---- testo ---- */
.p-hero__container {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 1170px;
  scroll-margin-top: 100px;
}
.p-hero__content {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 50%;
  will-change: transform;
}
.p-hero__logo { position: relative; flex: none; display: block; width: 164px; height: 72px; object-fit: cover; }

.p-hero__rating {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: 100%;
  height: 35px;
}
.p-hero__pill {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 70%;
  height: 100%;
  padding: 4px 12px;
  border-radius: 18px;
  background-color: #fbfbfb;
  overflow: hidden;
  will-change: transform;
}
.p-hero__pill-inner {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 308px;
  height: 27px;
  overflow: hidden;
}
.p-hero__pill-icon {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 31px;
  width: 24px;
  height: 25px;
  padding: 4px;
  border-radius: 5px;
  background-color: #f86c5f;
  overflow: hidden;
}
.p-hero__pill-icon svg { flex: none; display: block; width: 17px; height: 17px; overflow: hidden; fill: none; stroke: #ffffff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.p-hero__pill-text {
  position: relative;
  flex: none;
  display: block;
  width: 269px;
  height: 27px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7em;
  letter-spacing: 0;
  color: #3d3d3d;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: nowrap;
}

.p-hero__title {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 142px;
  width: 100%;
  overflow: hidden;
}
.p-hero__h1 { flex: none; width: 100%; margin: 0; font-weight: 400; }
.p-hero__h1-a {
  display: block;
  font-family: var(--font-coolvetica);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: 0;
  color: #ffffff;
  text-align: left;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  word-break: break-word;
}
.p-hero__h1-b {
  position: absolute;
  left: 0;
  right: 0;
  top: 47%;
  z-index: 1;
  display: block;
  transform: translateY(-50%);
  font-family: var(--font-serif);
  font-size: 130px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1em;
  letter-spacing: -.04em;
  color: #ffffff;
  text-align: left;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: pre-wrap;
  word-break: break-word;
}
.p-hero__text {
  position: relative;
  flex: none;
  width: 100%;
  font-family: var(--font-proxima);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4em;
  letter-spacing: -.5px;
  color: #ffffff;
  text-align: left;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: pre-wrap;
  word-break: break-word;
}
/* come l'originale: grassetto e corsivo sintetici sulla stessa famiglia */
.p-hero__text strong { font-weight: 700; }
.p-hero__text em { font-style: italic; }

.p-hero__cta { position: relative; flex: none; will-change: transform; }
.p-hero__spacer { position: relative; flex: none; width: 100%; max-width: 732px; min-height: 35px; }

/* ---- "Main Button" (variante Hero Button): usato anche dalla sezione 03 ---- */
.p-mainbtn {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min-content;
  height: min-content;
  padding: 14px 28px 14px 32px;
  border-radius: 12px;
  background-color: #2f69ff;
  box-shadow: inset 0 0 29px 0 #088cff;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.44, 0, .56, 1), box-shadow .3s cubic-bezier(.44, 0, .56, 1);
}
.p-mainbtn__label {
  position: relative;
  flex: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5em;
  letter-spacing: 0;
  color: #ffffff;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: pre;
}
.p-mainbtn__icon {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 18px;
  height: 18px;
  overflow: hidden;
}
.p-mainbtn__icon svg {
  position: relative;
  flex: none;
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.78;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.44, 0, .56, 1);
}
/* hover: sfondo scuro e la freccia scorre (in Framer: justify-content flex-end → flex-start, animato).
   Con JS (classe is-js) l'hover è animato da src/js/p02-hero.js con l'interpolazione dei colori di Framer. */
.p-mainbtn.is-js, .p-mainbtn.is-js .p-mainbtn__icon svg { transition: none; }
.p-mainbtn:not(.is-js):hover { background-color: #3d3d3d; box-shadow: inset 0 0 29px 0 rgba(255, 255, 255, .22); }
.p-mainbtn:not(.is-js):hover .p-mainbtn__icon svg { transform: translateX(28px); }

/* ---- tablet ---- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .p-hero { gap: 80px; padding: 160px 0 0 30px; }
  .p-hero__images { position: relative; right: auto; bottom: auto; order: 3; width: 100%; max-width: none; }
  .p-hero__float--04 { left: -10px; bottom: 37px; }
  .p-hero__container { order: 2; }
  .p-hero__content { flex: 1 0 0px; gap: 40px; width: 1px; padding: 0 30px 0 0; }
  /* CORREZIONE VOLUTA (difetto dell'originale): su tablet Framer usa gap 24 px e "Semplificare" a top 47 % /
     translateY(-50 %), così titolo, "Semplificare" e paragrafo si sovrappongono. Qui si riprende il ritmo
     del desktop: paragrafo 142 px sotto "Pensato per" e "Semplificare" a 76.08 px dall'alto del blocco
     (= 47 % di 314 px − 71.5 px, la sua posizione su desktop), cioè 11 px sopra il paragrafo. */
  .p-hero__title { gap: 142px; }
  .p-hero__h1-b { top: 76.08px; transform: none; }
  .p-hero__spacer { max-width: 660px; }
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .p-hero { gap: 60px; padding: 110px 0 0 20px; }
  .p-hero__images { position: relative; right: auto; bottom: auto; order: 3; width: 100%; max-width: none; }
  .p-hero__float--03 { right: -31px; top: -19px; border-radius: 10px; }
  .p-hero__float--04 { left: -10px; bottom: 58px; border-radius: 12px; }
  .p-hero__container { order: 2; padding: 0 20px 0 0; }
  .p-hero__content { flex: 1 0 0px; gap: 30px; width: 1px; }
  .p-hero__logo { order: 0; }
  .p-hero__rating { order: 1; gap: 20px; }
  .p-hero__pill { gap: 10px; width: 100%; will-change: auto; }
  .p-hero__title { order: 2; gap: 96px; padding: 8px 0; }
  .p-hero__h1-a {
    font-family: var(--font-body);
    font-size: 36px;
    font-weight: 700;
    line-height: .7em;
    letter-spacing: -.05em;
    font-feature-settings: normal;
  }
  .p-hero__h1-b { top: 35px; transform: none; font-size: 63px; line-height: 1.2em; letter-spacing: 0; font-feature-settings: normal; }
  .p-hero__text { font-family: var(--font-body); font-size: 16px; line-height: 1.2em; letter-spacing: 0; font-feature-settings: normal; }
  .p-hero__cta { order: 3; will-change: auto; }
}


/* ==========================================================================
   p03-about
   ========================================================================== */
/* 03 · ABOUT (/prodotti) — valori dal CSS servito (rvAJfzTar: framer-6c5r1x …) e dai componenti
   Badge (bOOFj2uBX, variante LG), Marquee Box (tUHe3N4XE), Marquee Image (wpunB4T2q), About Gallery (gzPA477fN).
   Il wrapper "About/Features" non ha sfondo: resta il bianco della pagina.
   desktop ≥1200 = base · tablet 810–1199.98 · phone ≤809.98 */

.p-about {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 149px 0 0 0;
}

.p-about__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1 0 0px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 70px;
  width: 1px;
  max-width: 1260px;
}

/* ---- titolo ---- */
.p-about__top {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
  width: 100%;
  max-width: 980px;
  padding: 0 30px;
}
.p-about__title {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 10px;
  width: 79%;
  margin: 0;
  overflow: clip;
  font-weight: 400;
  will-change: transform;
}
.p-about__w {
  position: relative;
  flex: none;
  display: block;
  font-family: var(--font-stack);
  font-size: 48px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2em;
  letter-spacing: 0;
  color: #131515;
  text-align: center;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: pre;
}
.p-about__w--serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; }
.p-about__w--solo { font-family: var(--font-serif); font-size: 50px; font-style: italic; font-weight: 400; letter-spacing: -.04em; }

/* pillola con la galleria (About Gallery: 4 immagini, cambio ogni 2,5 s con dissolvenza) */
.p-about__pill {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 9px 0 0 0;
  overflow: clip;
}
.p-about__gallery { position: relative; display: block; flex: none; width: 92px; height: 44px; }
.p-about__gallery-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  object-fit: cover;
  /* spring bounce 0, 0.7 s (tools/spring.js) */
  transition: opacity .7s linear(0, 0.0192, 0.0669, 0.1317, 0.2054, 0.2824, 0.3586, 0.4317, 0.5001, 0.563, 0.62, 0.6711, 0.7164, 0.7564, 0.7914, 0.8219, 0.8483, 0.8711, 0.8907, 0.9075, 0.9218, 0.9341, 0.9445, 0.9533, 0.9608, 0.9671, 0.9724, 0.9769, 0.9807, 0.9839, 0.9865, 0.9888, 0.9906, 0.9922, 0.9935, 0.9946, 0.9955, 0.9963, 0.9969, 0.9974, 0.9979, 0.9982, 0.9985, 0.9988, 1);
}
.p-about__gallery-img:nth-child(1) { z-index: 4; will-change: transform; }
.p-about__gallery-img:nth-child(2) { z-index: 3; will-change: transform; }
.p-about__gallery-img:nth-child(3) { z-index: 2; will-change: transform; }
.p-about__gallery-img:nth-child(4) { z-index: 1; }
.p-about__gallery[data-step="2"] .p-about__gallery-img:nth-child(-n+1),
.p-about__gallery[data-step="3"] .p-about__gallery-img:nth-child(-n+2),
.p-about__gallery[data-step="4"] .p-about__gallery-img:nth-child(-n+3) { opacity: 0; }

/* ---- "Nato per tutti i migliori locali:" + tag ---- */
.p-about__intro {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  overflow: clip;
}
.p-about__lead {
  position: relative;
  flex: none;
  width: 100%;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 22px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  line-height: 1.4em;
  letter-spacing: 0;
  color: #494d4d;
  text-align: center;
  text-wrap: balance;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: pre-wrap;
  word-break: break-word;
  will-change: transform;
}
.p-about__tags {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  overflow: clip;
}
.p-about__tag {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 14px 6px 14px;
  border-radius: 50px;
  background-color: #e8e8e8;
  overflow: clip;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  line-height: 1.3em;
  letter-spacing: 0;
  color: #131515;
  text-align: center;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: pre;
  will-change: transform;
}

/* ---- centro: monitor + ticker ---- */
.p-about__center {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  height: 255px;
}
.p-about__monitor { position: relative; z-index: 2; flex: none; width: 40%; max-width: 1200px; height: 145%; overflow: clip; }

.p-about__tickers {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 1200px;
  max-width: 2160px;
  height: min-content;
  padding: 70px 0;
  overflow: clip;
  transform: translateY(-50%);
}
.p-about__fade {
  position: absolute;
  top: -50px;
  bottom: -50px;
  z-index: 2;
  flex: none;
  width: 230px;
  overflow: clip;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.p-about__fade--left { left: -50px; background: linear-gradient(90deg, #ffffff 26.576576576576578%, rgba(255, 255, 255, 0) 100%); }
.p-about__fade--right { right: -50px; background: linear-gradient(270deg, #ffffff 26.576576576576578%, rgba(255, 255, 255, 0) 100%); }

/* ticker (effetto Ticker di Framer): contenitore trascinabile in orizzontale, lista spostata in JS */
.p-about__ticker {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 2160px;
  height: min-content;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.p-about__ticker-list {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
.p-about__ticker-item { position: relative; flex: 0 0 auto; height: fit-content; }

/* Marquee Box */
.p-about__box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 150px;
  height: 150px;
  padding: 20px;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 8px 20px 0 rgba(19, 21, 21, .05);
  overflow: clip;
}
.p-about__box-icon {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--p-about-icon);
  box-shadow: 0 10px 15px 0 var(--p-about-icon-shadow);
  overflow: clip;
}
.p-about__box-icon img { position: relative; flex: none; display: block; width: 24px; height: 24px; object-fit: contain; }
.p-about__box-text {
  position: relative;
  flex: none;
  width: 100%;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  line-height: 1.3em;
  letter-spacing: 0;
  color: #131515;
  text-align: center;
  text-wrap: balance;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: pre-wrap;
  word-break: break-word;
}
.p-about__box--teal   { --p-about-icon: #0283a7; --p-about-icon-shadow: rgba(2, 131, 167, .5); }
.p-about__box--orange { --p-about-icon: #ff4c00; --p-about-icon-shadow: rgba(255, 76, 0, .5); }
.p-about__box--green  { --p-about-icon: #12a70a; --p-about-icon-shadow: rgba(18, 167, 10, .5); }
.p-about__box--blue   { --p-about-icon: #0022ff; --p-about-icon-shadow: rgba(0, 34, 255, .5); }
.p-about__box--red    { --p-about-icon: #ff0000; --p-about-icon-shadow: #ff0000; }
.p-about__box--purple { --p-about-icon: #9000ff; --p-about-icon-shadow: rgba(144, 0, 255, .5); }
.p-about__box--azure  { --p-about-icon: #0059ff; --p-about-icon-shadow: rgba(0, 89, 255, .5); }
.p-about__box--pink   { --p-about-icon: #ff00a1; --p-about-icon-shadow: rgba(255, 0, 161, .5); }

/* Marquee Image */
.p-about__photo { position: relative; display: block; width: 150px; height: 150px; border-radius: 20px; overflow: clip; }
.p-about__photo img { pointer-events: none; user-select: none; -webkit-user-select: none; }

/* ---- parte bassa ---- */
.p-about__bottom {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 660px;
  padding: 15px 30px;
}
.p-about__tagline {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  padding: 8px 20px;
  border-radius: 100px;
  background-color: #ffffff;
  overflow: clip;
  will-change: transform;
}
.p-about__tagline::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(19, 21, 21, .05);
  border-radius: inherit;
  pointer-events: none;
}
.p-about__star { position: relative; flex: none; display: block; width: 14px; height: 14px; object-fit: contain; }
.p-about__tagline-text {
  position: relative;
  flex: none;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  line-height: 1.3em;
  letter-spacing: 0;
  color: #131515;
  text-align: center;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: pre;
}
.p-about__text {
  position: relative;
  flex: none;
  width: 107%;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  line-height: 1.3em;
  letter-spacing: 0;
  color: #494d4d;
  text-align: center;
  text-wrap: balance;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  white-space: pre-wrap;
  word-break: break-word;
  will-change: transform;
}
.p-about__text strong { font-weight: 700; }
.p-about__buttons {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}
.p-about__cta { position: relative; flex: none; will-change: transform; }

/* ---- nuvole (escono sotto la sezione, come nell'originale) ---- */
.p-about__cloud {
  position: absolute;
  flex: none;
  display: block;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.p-about__cloud--01 { left: -330px; bottom: -440px; z-index: 1; height: 588px; aspect-ratio: 2994 / 589; opacity: .96; }
.p-about__cloud--02 { right: -150px; bottom: -140px; z-index: 0; height: 296px; aspect-ratio: 894 / 297; }
.p-about__cloud--03 { left: -20px; bottom: -190px; z-index: 0; height: 300px; aspect-ratio: 749 / 448; }

/* ---- tablet + phone: il titolo usa il testo di base (Inter 16 px), come nell'originale ---- */
@media (max-width: 1199.98px) {
  .p-about { padding: 10px 0 0 0; }
  .p-about__w,
  .p-about__w--serif,
  .p-about__w--solo {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    font-feature-settings: normal;
  }
  .p-about__w--serif { font-style: italic; }
  .p-about__w--solo { font-style: normal; }
}

/* ---- tablet ---- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .p-about__title { gap: 6px; }
  .p-about__pill { padding: 4px 0 0 0; }
  .p-about__gallery { width: 70px; height: 30px; }
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .p-about__container { gap: 30px; }
  .p-about__top { gap: 30px; padding: 54px 20px; }
  .p-about__title { gap: 2px 6px; }
  .p-about__pill { padding: 6px 0 0 0; }
  .p-about__gallery { width: 40px; height: 20px; }
  .p-about__tags { gap: 8px; }
  .p-about__monitor { width: 85%; max-width: 330px; height: 100%; }
  .p-about__fade { width: 180px; }
  .p-about__bottom { gap: 24px; padding: 31px 20px; }
  .p-about__cta { will-change: auto; }
}


/* ==========================================================================
   p04-problemi
   ========================================================================== */
/* ==========================================================================
   04 · Problemi (/prodotti #smart-assist — Framer "AI Suggestions")
   Desktop ≥ 1200 (base) · tablet 810–1199.98 · phone ≤ 809.98
   ========================================================================== */
.p-problemi {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  flex: none;
  width: 100%;
  max-width: 1920px;          /* "About/Features" wrapper */
  margin-top: 10px;           /* wrapper gap (About → Problemi) */
  padding: 62px 0;
}
.p-problemi__container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
  max-width: 1260px;
  padding: 0 30px;
}
.p-problemi__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(50px, 1fr));
  grid-template-rows: repeat(2, min-content);
  grid-auto-rows: min-content;
  justify-content: center;
  gap: 80px 50px;
  width: 100%;
}

/* ---- left column ---- */
.p-problemi__left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  grid-column: span 2;
  place-self: start;
  width: 100%;
  padding: 31px 0;
}
.p-problemi__top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
}
.p-problemi__fx { position: relative; flex: none; will-change: transform; }

/* pill (Framer "Pre Title") */
.p-problemi__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min-content;
  padding: 8px 20px;
  overflow: clip;
  border-radius: 100px;
  background-color: #fff;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3;
  color: #131515;
  text-align: center;
  white-space: pre;
}
.p-problemi__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(19, 21, 21, 0.05);
  border-radius: inherit;
  pointer-events: none;
}

/* headline: 30px line + 52px lines (phone: everything 31px) */
.p-problemi__title {
  position: relative;
  width: 100%;
  font-family: "Stack Sans Headline", "Stack Sans Headline Placeholder", sans-serif;
  font-size: 30px;
  font-weight: 500;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #131515;
  text-align: left;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  will-change: transform;
}
.p-problemi__title strong { font-weight: 700; }
.p-problemi__title-a { letter-spacing: 0; }
.p-problemi__title-br { font-size: 48px; }
.p-problemi__title-b { font-size: 52px; letter-spacing: -0.02em; }
.p-problemi__title-b--bold { font-weight: 700; }

.p-problemi__text {
  position: relative;
  width: 100%;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3;
  color: rgb(73, 77, 77);
  text-align: left;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  will-change: transform;
}
.p-problemi__text strong { font-weight: 700; }

/* ---- CTA (Framer "Main Button", variant Hero Button) ---- */
.p-problemi__bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  will-change: transform;
}
.p-problemi__cta-wrap { position: relative; flex: none; will-change: transform; }
.p-problemi__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min-content;
  padding: 14px 28px 14px 32px;
  overflow: hidden;
  border-radius: 12px;
  background-color: rgb(47, 105, 255);
  box-shadow: inset 0 0 29px 0 rgb(8, 140, 255);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s cubic-bezier(0.44, 0, 0.56, 1), box-shadow 0.3s cubic-bezier(0.44, 0, 0.56, 1);
}
.p-problemi__cta-label {
  flex: none;
  font-family: "Inter", "Inter Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 600;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  letter-spacing: 0;
  line-height: 1.5;
  color: #fff;
  white-space: pre;
}
/* two chevrons in an 18px window: the second one shows, on hover the row slides right */
.p-problemi__cta-icon {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  overflow: hidden;
}
.p-problemi__cta-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 10px;
  transform: translateX(-28px);
  transition: transform 0.3s cubic-bezier(0.44, 0, 0.56, 1);
}
.p-problemi__cta-track svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.78;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .p-problemi__cta:hover {
    background-color: rgb(61, 61, 61);
    box-shadow: inset 0 0 29px 0 rgba(255, 255, 255, 0.22);
  }
  .p-problemi__cta:hover .p-problemi__cta-track { transform: translateX(0); }
}

/* ---- image ---- */
.p-problemi__media {
  position: relative;
  grid-column: span 3;
  place-self: start;
  width: 100%;
  height: 100%;
  overflow: clip;
  border-radius: 20px;
  will-change: transform;
}

/* ---- pain-point cards (Framer "Feature Card") ---- */
.p-problemi__cards {
  position: relative;
  display: grid;
  grid-column: span 5;
  grid-template-columns: repeat(4, minmax(50px, 1fr));
  grid-template-rows: repeat(1, min-content);
  grid-auto-rows: min-content;
  justify-content: center;
  place-self: start;
  gap: 30px;
  width: 100%;
}
.p-problemi__card-wrap {
  position: relative;
  place-self: start;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.p-problemi__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding: 30px;
  overflow: clip;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 8px 20px 0 rgba(19, 21, 21, 0.05);
}
.p-problemi__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 50px;
  height: 50px;
  overflow: clip;
  border-radius: 50%;
}
.p-problemi__icon img { flex: none; width: 24px; height: 24px; object-fit: contain; }
.p-problemi__icon--blue { background-color: rgb(0, 34, 255); box-shadow: 0 10px 15px 0 rgba(0, 34, 255, 0.5); }
.p-problemi__icon--red { background-color: rgb(255, 0, 0); box-shadow: 0 10px 15px 0 rgba(255, 0, 0, 0.5); }
.p-problemi__icon--pink { background-color: rgb(255, 0, 195); box-shadow: 0 10px 15px 0 rgba(144, 0, 255, 0.5); }
.p-problemi__icon--green { background-color: rgb(18, 167, 10); box-shadow: 0 10px 15px 0 rgba(18, 167, 10, 0.5); }
.p-problemi__spacer { flex: none; width: 100%; height: 60px; pointer-events: none; user-select: none; }
.p-problemi__card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: none;
  width: 100%;
  padding-top: 2px;
}
.p-problemi__card-title {
  width: 100%;
  font-family: "Stack Sans Headline", "Stack Sans Headline Placeholder", sans-serif;
  font-size: 24px;
  font-weight: 500;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  letter-spacing: 0;
  line-height: 1.2;
  color: #131515;
  text-align: left;
  text-wrap: balance;
}
.p-problemi__card-text {
  width: 100%;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  letter-spacing: 0;
  line-height: 1.3;
  color: rgb(73, 77, 77);
  text-align: left;
  text-wrap: balance;
}

/* ---- tablet ---- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .p-problemi { padding: 120px 0; }
  .p-problemi__grid { grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: 30px; }
  .p-problemi__left { grid-column: auto; padding: 50px 0; }
  .p-problemi__media { grid-column: auto; }
  .p-problemi__cards { grid-column: span 2; grid-template-columns: repeat(2, minmax(50px, 1fr)); }
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .p-problemi { padding: 84px 0; }
  .p-problemi__container { padding: 0 20px; }
  .p-problemi__grid { grid-template-columns: repeat(1, minmax(50px, 1fr)); gap: 30px; }
  .p-problemi__left { grid-column: span 1; gap: 20px; padding: 0; }
  .p-problemi__top { gap: 26px; }
  .p-problemi__title { font-size: 31px; }
  .p-problemi__title-br, .p-problemi__title-b { font-size: inherit; }
  .p-problemi__text { font-size: 16px; }
  .p-problemi__text > span { font-size: 18px; }
  .p-problemi__cta-wrap { will-change: unset; }
  .p-problemi__media { grid-column: span 1; height: 581px; }
  .p-problemi__cards { grid-column: span 1; grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: 20px; }
  .p-problemi__card { padding: 20px; }
  .p-problemi__icon { width: 44px; height: 44px; }
  .p-problemi__icon img { width: 20px; height: 20px; }
  .p-problemi__spacer { height: 30px; }
  .p-problemi__card-title { font-size: 20px; }
  .p-problemi__card-text { font-size: 16px; }
}


/* ==========================================================================
   p05-funzioni
   ========================================================================== */
/* ==========================================================================
   05 · Funzioni (/prodotti #features — Framer "Features")
   Desktop ≥ 1200 (base) · tablet 810–1199.98 · phone ≤ 809.98
   ========================================================================== */
.p-funzioni {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: none;
  width: 100%;
  max-width: 1920px;          /* "About/Features" wrapper */
  margin-top: 10px;           /* wrapper gap (Problemi → Funzioni) */
  padding: 49px 0 0;
}
.p-funzioni__container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  flex: 1 0 0px;
  width: 1px;
  max-width: 1260px;
  padding: 0 30px;
}

/* ---- heading ---- */
.p-funzioni__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}
.p-funzioni__head-left {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1 0 0px;
  width: 1px;
}
.p-funzioni__head-right {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 1 0 0px;
  width: 1px;
}
.p-funzioni__fx { position: relative; flex: none; will-change: transform; }
.p-funzioni__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min-content;
  padding: 8px 20px;
  overflow: clip;
  border-radius: 100px;
  background-color: #fff;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3;
  color: #131515;
  text-align: center;
  white-space: pre;
}
.p-funzioni__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(19, 21, 21, 0.05);
  border-radius: inherit;
  pointer-events: none;
}
.p-funzioni__title {
  position: relative;
  width: 100%;
  font-family: "Instrument Serif", "Instrument Serif Placeholder", serif;
  font-size: 48px;
  font-weight: 400;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  letter-spacing: -0.04em;
  line-height: 1.2;
  color: #131515;
  text-align: left;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  will-change: transform;
}
.p-funzioni__title-a {
  font-family: "Stack Sans Headline", "Stack Sans Headline Placeholder", sans-serif;
  font-weight: 500;
  letter-spacing: 0;
}
.p-funzioni__title-b { font-size: 66px; letter-spacing: -0.04em; }
.p-funzioni__title-b em { font-style: italic; }
.p-funzioni__intro {
  position: relative;
  width: 100%;
  max-width: 420px;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3;
  color: rgb(73, 77, 77);
  text-align: left;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  will-change: transform;
}

/* ---- bento grid ---- */
.p-funzioni__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-template-rows: repeat(2, min-content);
  grid-auto-rows: min-content;
  justify-content: center;
  gap: 30px;
  width: 100%;
}
.p-funzioni__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 40px;
  place-self: start;
  width: 100%;
  height: 100%;
  padding: 40px;
  overflow: clip;
  border-radius: 20px;
  box-shadow: 0 8px 20px 0 rgba(19, 21, 21, 0.05);
  will-change: transform;
}
.p-funzioni__card--tavoli,
.p-funzioni__card--foodcost { gap: 0; background-color: #fff3f1; }
.p-funzioni__card--tavoli::after,
.p-funzioni__card--foodcost::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(235, 52, 86, 0.12);
  border-radius: inherit;
  pointer-events: none;
}
.p-funzioni__card--tavoli { padding: 0 0 40px; }
.p-funzioni__card--foodcost { padding: 0; }
.p-funzioni__card--cassa { background: linear-gradient(#296dff 0%, rgba(0, 40, 128, 0.42) 100%); }
.p-funzioni__card--staff { background: linear-gradient(143deg, #296cff 0%, rgba(0, 40, 128, 0.44) 100%); }
.p-funzioni__card--flussi {
  flex-direction: row;
  gap: 0;
  grid-column: span 2;
  height: min-content;
  padding: 31px 40px;
  background: linear-gradient(155deg, #f86c5f 0%, #f25559 45%, #eb3456 78%, #fd1569 100%);
}

.p-funzioni__card-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: none;
  width: 100%;
  overflow: clip;
}
.p-funzioni__card-top--tavoli { z-index: auto; padding: 40px; }
.p-funzioni__card-top--foodcost { padding: 30px; }
.p-funzioni__card--flussi .p-funzioni__card-top { z-index: auto; gap: 10px; }
.p-funzioni__card-title {
  width: 100%;
  font-family: "Stack Sans Headline", "Stack Sans Headline Placeholder", sans-serif;
  font-size: 24px;
  font-weight: 500;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  letter-spacing: 0;
  line-height: 1.2;
  color: #fff;
  text-align: left;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.p-funzioni__card-title--dark { color: #1a1a1a; }
.p-funzioni__card-text,
.p-funzioni__note {
  width: 100%;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  letter-spacing: 0;
  line-height: 1.3;
  color: #fff;
  text-align: left;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.p-funzioni__card-text--grey { color: #6b6b75; }
.p-funzioni__card-text--soft { color: rgba(255, 255, 255, 0.85); }
.p-funzioni__note { position: relative; flex: none; font-size: 14px; color: rgba(255, 255, 255, 0.85); }

/* widget slots */
.p-funzioni__center {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  flex: none;
  width: 100%;
  overflow: clip;
}
.p-funzioni__center--tavoli { z-index: auto; align-items: center; justify-content: center; padding: 0 40px 40px; }
.p-funzioni__center--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(50px, 1fr));
  grid-template-rows: repeat(2, min-content);
  grid-auto-rows: min-content;
  justify-content: center;
  gap: 40px;
}
.p-funzioni__center--foodcost {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 2px;
  overflow: visible;
}
.p-funzioni__widget-box { position: relative; flex: 1 0 0px; width: 1px; height: 300px; }
.p-funzioni__widget-box--full { grid-column: 1 / -1; place-self: start; width: 100%; }
.p-funzioni__widget-box--foodcost { flex: none; width: 94%; }

/* ticker of feature chips (Framer ticker: 20 px/s, ×0.1 on hover) */
.p-funzioni__ticker {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  width: 100%;
  cursor: ew-resize;
}
.p-funzioni__chips { display: flex; align-items: center; gap: 40px; flex: none; will-change: transform; touch-action: pan-y; }
.p-funzioni__chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex: none;
  padding: 10px 20px 10px 10px;
  overflow: clip;
  border-radius: 200px;
  background-color: #fff;
  box-shadow: 0 8px 20px 0 rgba(19, 21, 21, 0.05);
}
.p-funzioni__chip--1 { width: 216px; }
.p-funzioni__chip--2, .p-funzioni__chip--3 { width: 215px; }
.p-funzioni__chip--4 { width: 187px; }
.p-funzioni__chip--5 { width: 223px; }
.p-funzioni__chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  overflow: clip;
  border-radius: 50%;
}
.p-funzioni__chip-icon img { flex: none; width: 14px; height: 14px; object-fit: contain; }
.p-funzioni__chip-icon--orange { background-color: rgb(255, 76, 0); box-shadow: 0 10px 15px 0 rgba(255, 76, 0, 0.5); }
.p-funzioni__chip-icon--purple { background-color: rgb(144, 0, 255); box-shadow: 0 10px 15px 0 rgba(144, 0, 255, 0.5); }
.p-funzioni__chip-icon--teal { background-color: rgb(2, 131, 167); box-shadow: 0 10px 15px 0 rgba(2, 131, 167, 0.5); }
.p-funzioni__chip-icon--green { background-color: rgb(18, 167, 10); box-shadow: 0 10px 15px 0 rgba(18, 167, 10, 0.5); }
.p-funzioni__chip-icon--blue { background-color: rgb(0, 34, 255); box-shadow: 0 10px 15px 0 rgba(0, 34, 255, 0.5); }
.p-funzioni__chip-label {
  flex: 1 0 0px;
  width: 1px;
  padding-top: 2px;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3;
  color: #131515;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

/* card 03 */
.p-funzioni__flussi-left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 103px;
  flex: 1 0 0px;
  width: 1px;
  overflow: clip;
}
.p-funzioni__flussi-top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  overflow: clip;
}
.p-funzioni__flussi-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 0 0px;
  width: 1px;
}

/* "Lista d'attesa gratuita" (Framer "Button": desktop = Default with hover, tablet/phone = Default - Phone) */
.p-funzioni__btn-wrap {
  position: relative;
  flex: none;
  will-change: transform;
  transition: transform 0.4s linear(0, 0.0597, 0.2005, 0.3761, 0.5536, 0.7128, 0.8431, 0.941, 1.0082, 1.0488, 1.0685, 1.0732, 1.068, 1.0572, 1.0443, 1.0313, 1.0199, 1.0106, 1.0037, 0.999, 0.9962, 0.9949, 0.9947, 0.9951, 0.9959, 1);
}
.p-funzioni__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: min-content;
  padding: 16px 34px;
  overflow: clip;
  border-radius: 100px;
  background-color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.p-funzioni__btn-content {
  position: relative;
  display: block;
  flex: none;
  height: 22px;
  overflow: clip;
}
.p-funzioni__btn-track {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: transform 0.45s linear(0, 0.0434, 0.1459, 0.2755, 0.411, 0.5392, 0.6527, 0.7484, 0.8257, 0.8859, 0.9311, 0.9636, 0.9859, 1.0004, 1.0091, 1.0135, 1.0151, 1.0148, 1.0135, 1.0116, 1.0095, 1.0076, 1.0058, 1.0042, 1.003, 1.002, 1.0012, 1.0007, 1);
}
.p-funzioni__btn-text {
  flex: none;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3;
  color: #131515;
  text-align: center;
  white-space: pre;
}
@media (min-width: 1200px) and (hover: hover) {
  .p-funzioni__btn-wrap:hover {
    transform: scale(0.95);
    transition: transform 0.45s linear(0, 0.0473, 0.1592, 0.3003, 0.4469, 0.5838, 0.7031, 0.8012, 0.8779, 0.935, 0.9752, 1.0017, 1.0176, 1.0257, 1.0283, 1.0274, 1.0245, 1.0206, 1.0164, 1.0125, 1.009, 1.0061, 1.0038, 1.0021, 1.0009, 1.0001, 0.9996, 0.9993, 1);
  }
  .p-funzioni__btn:hover .p-funzioni__btn-track { transform: translateY(-34.8px); }
}

/* ==========================================================================
   Widgets (Framer code component "ByupFeatureWidget") — DOM built by p05-funzioni.js
   ========================================================================== */
.p-fw {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 240px;
  padding: 16px;
  overflow: hidden;
  border-radius: 22px;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(253, 21, 105, 0.55) 0%, rgba(253, 21, 105, 0) 60%),
    linear-gradient(155deg, #f86c5f 0%, #f25559 45%, #eb3456 78%, #fd1569 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  /* the original asks for "Plus Jakarta Sans" but never loads it: it renders with Inter */
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: #000;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
}
.p-fw b { font-weight: 700; }
.p-fw__glass {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px -14px rgba(120, 10, 40, 0.45), 0 2px 6px -2px rgba(120, 10, 40, 0.18);
}
.p-fw__col { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.p-fw__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.p-fw__h { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.p-fw__meta { font-size: 12px; font-weight: 600; color: #6b6b75; }
.p-fw__meta b { color: #1a1a1a; }
.p-fw__right { display: flex; align-items: center; gap: 8px; }
.p-fw__right--10 { gap: 10px; }
.p-fw__min0 { min-width: 0; }
.p-fw__num { display: inline-block; }
.p-fw__tab { font-variant-numeric: tabular-nums; }

/* "Live" badge */
.p-fw__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(235, 52, 86, 0.1);
  font-size: 11px;
  font-weight: 700;
  color: #eb3456;
}
.p-fw__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #fd1569;
  animation: p-fw-live 1.4s infinite;
}
@keyframes p-fw-live {
  0% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  50% { transform: scale(1.7); opacity: 0.35; animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  100% { transform: scale(1); opacity: 1; }
}

/* 1 · Tavoli */
.p-fw__tables {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
}
.p-fw__table {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border-radius: 14px;
  cursor: pointer;
}
.p-fw__table.is-pop { animation: p-fw-pop 0.45s; }
@keyframes p-fw-pop {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  50% { transform: scale(1.08); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  100% { transform: scale(1); }
}
.p-fw__table-n { font-size: 17px; font-weight: 800; line-height: 1; color: #1a1a1a; }
.p-fw__state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.p-fw__state::before { content: ""; width: 5px; height: 5px; border-radius: 5px; background: currentColor; }
.p-fw__state--libero { color: #16a34a; background: rgba(22, 163, 74, 0.1); }
.p-fw__state--occupato { color: #eb3456; background: rgba(235, 52, 86, 0.1); }
.p-fw__state--conto { color: #296cff; background: rgba(41, 108, 255, 0.1); }
.p-fw__state--prenotato { color: #fd1569; background: rgba(253, 21, 105, 0.08); }

/* 2 · Cassa */
.p-fw__cassa { display: flex; align-items: stretch; gap: 12px; height: 100%; }
.p-fw__bill { flex: 1.25; display: flex; flex-direction: column; min-width: 0; padding: 16px; }
.p-fw__bill-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.p-fw__bill-title { font-size: 13px; font-weight: 800; color: #1a1a1a; }
.p-fw__small { font-size: 11px; color: #6b6b75; }
.p-fw__badge-slot { display: flex; }   /* the badge is a flex item of the head, like the original motion.span */
.p-fw__paid { padding: 5px 10px; border-radius: 999px; background: #296cff; font-size: 11px; font-weight: 800; color: #fff; }
.p-fw__rows { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.p-fw__row { display: flex; justify-content: space-between; font-size: 12.5px; color: #1a1a1a; }
.p-fw__row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-fw__row-name b { color: #eb3456; }
.p-fw__row-price { color: #6b6b75; font-variant-numeric: tabular-nums; }
.p-fw__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px dashed rgba(0, 0, 0, 0.12); }
.p-fw__total-label { font-size: 12px; font-weight: 700; color: #6b6b75; }
.p-fw__total-value { font-size: 22px; font-weight: 800; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.p-fw__side { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.p-fw__split { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 14px; }
.p-fw__split-label { font-size: 11.5px; font-weight: 700; color: #6b6b75; }
.p-fw__people { display: flex; gap: 6px; }
.p-fw__person {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.p-fw__split-value { font-size: 17px; font-weight: 800; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.p-fw__split-value span { font-size: 11px; font-weight: 600; color: #6b6b75; }
.p-fw__receipt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.p-fw__receipt-icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: rgba(41, 108, 255, 0.12); }
.p-fw__receipt-icon svg { display: inline; fill: #296cff; }
.p-fw__receipt-title { font-size: 12px; font-weight: 700; color: #1a1a1a; }

/* 3 · Flussi */
.p-fw__flussi { gap: 12px; }
.p-fw__bar--gap { gap: 10px; }
.p-fw__flow { position: relative; flex: 1; display: flex; align-items: center; padding: 18px 16px 34px; }
.p-fw__flow-in { position: relative; width: 100%; }
.p-fw__flow-track { position: absolute; left: 10%; right: 10%; top: 20px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.06); }
.p-fw__flow-fill { width: 0; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #f86c5f, #fd1569); }
.p-fw__steps { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; }
.p-fw__step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.p-fw__step-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #f2f2f5;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: background 0.4s ease;
}
.p-fw__step-icon svg { display: inline; fill: #a1a1aa; }
.p-fw__step-label { font-size: 12px; font-weight: 700; color: #a1a1aa; }
.p-fw__step.is-on .p-fw__step-icon {
  background: linear-gradient(145deg, #f86c5f, #fd1569);
  box-shadow: 0 8px 18px -8px rgba(253, 21, 105, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.p-fw__step.is-on .p-fw__step-icon svg { fill: #fff; }
.p-fw__step.is-on .p-fw__step-label { color: #1a1a1a; }
.p-fw__step-desc { max-width: 110px; font-size: 10.5px; color: #6b6b75; }
.p-fw__done {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #296cff;
  box-shadow: 0 10px 20px -10px rgba(41, 108, 255, 0.8);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

/* 4 · Staff */
.p-fw__shifts { flex: 1; display: flex; padding: 12px 14px; }
.p-fw__shifts-in { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.p-fw__now { position: absolute; top: 14px; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; border-radius: 2px; background: #1a1a1a; opacity: 0.85; }
.p-fw__now::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 10px; background: #1a1a1a; }
.p-fw__hours { display: grid; grid-template-columns: 92px 1fr; font-size: 10px; font-weight: 600; color: #6b6b75; }
.p-fw__hours div { display: flex; justify-content: space-between; }
.p-fw__person-row { flex: 1; display: grid; grid-template-columns: 92px 1fr; align-items: center; }
.p-fw__who { display: flex; align-items: center; gap: 7px; min-width: 0; }
.p-fw__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.p-fw__who-text { min-width: 0; }
.p-fw__who-name { font-size: 11.5px; font-weight: 700; line-height: 1.1; color: #1a1a1a; }
.p-fw__who-role { font-size: 9.5px; color: #6b6b75; }
.p-fw__lane { position: relative; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, 0.04); }
.p-fw__shift { position: absolute; top: 0; bottom: 0; border-radius: 8px; transition: background 0.3s ease; }

/* 5 · FoodCost */
.p-fw__fc-label { font-size: 11px; font-weight: 700; color: #6b6b75; }
.p-fw__fc-value { font-size: 22px; font-weight: 800; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.p-fw__dishes { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.p-fw__dish { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.p-fw__dish-row { display: flex; justify-content: space-between; font-size: 12px; }
.p-fw__dish-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #1a1a1a; }
.p-fw__dish-cost { white-space: nowrap; color: #6b6b75; font-variant-numeric: tabular-nums; }
.p-fw__dish-cost b { color: #1a1a1a; }
.p-fw__dish-bar { display: flex; align-items: center; gap: 8px; }
.p-fw__meter { flex: 1; height: 8px; overflow: hidden; border-radius: 8px; background: rgba(0, 0, 0, 0.06); }
.p-fw__meter-fill { height: 100%; border-radius: 8px; }
.p-fw__pct { width: 38px; font-size: 11.5px; font-weight: 800; color: #1a1a1a; text-align: right; font-variant-numeric: tabular-nums; }
.p-fw__pct.is-low { color: #eb3456; }
.p-fw__alert {
  position: absolute;
  top: -14px;
  right: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.5);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* ---- tablet ---- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .p-funzioni { padding: 120px 0 0; }
  .p-funzioni__head-right { flex: 0.7 0 0px; }
  .p-funzioni__grid { grid-template-columns: repeat(1, minmax(50px, 1fr)); }
  .p-funzioni__card--flussi { grid-column: span 1; }
  .p-funzioni__flussi-left { gap: 30px; }
  .p-funzioni__flussi-top { gap: 20px; }
}

/* ---- tablet + phone: button variant "Default - Phone" (no hover) ---- */
@media (max-width: 1199.98px) {
  .p-funzioni__btn-wrap { will-change: unset; }
  .p-funzioni__btn { padding: 12px 26px; cursor: auto; }
  .p-funzioni__btn-content { height: auto; }
  .p-funzioni__btn-text--hover { display: none; }
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .p-funzioni { padding: 120px 0 0; }
  .p-funzioni__container { gap: 30px; padding: 0 20px; }
  .p-funzioni__head { flex-direction: column; align-items: flex-start; }
  .p-funzioni__head-left { flex: none; width: 100%; }
  .p-funzioni__head-right { flex: none; align-items: flex-start; width: 100%; }
  .p-funzioni__grid { grid-template-columns: repeat(1, minmax(50px, 1fr)); gap: 20px; }
  .p-funzioni__card--tavoli { padding: 0 0 20px; }
  .p-funzioni__card-top--tavoli, .p-funzioni__card-top--foodcost { padding: 20px; }
  .p-funzioni__center--tavoli { padding: 0 20px 20px; }
  .p-funzioni__chips { gap: 20px; }
  .p-funzioni__card--cassa, .p-funzioni__card--staff { gap: 20px; height: min-content; padding: 20px; }
  .p-funzioni__card--flussi { flex-direction: column; grid-column: span 1; }
  .p-funzioni__card--foodcost { height: min-content; }
  .p-funzioni__flussi-left { flex: none; gap: 20px; width: 100%; }
  .p-funzioni__flussi-top { gap: 20px; }
  .p-funzioni__flussi-right { flex: none; width: 100%; height: 300px; }
  .p-funzioni__center--grid { grid-template-columns: repeat(1, minmax(50px, 1fr)); gap: 20px; }
  .p-funzioni__btn-text { font-size: 16px; }
  .p-funzioni__chip-icon--orange { box-shadow: 0 6px 15px 0 rgba(255, 76, 0, 0.5); }
  .p-funzioni__chip-icon--purple { box-shadow: 0 6px 15px 0 rgba(144, 0, 255, 0.5); }
  .p-funzioni__chip-icon--teal { box-shadow: 0 6px 15px 0 rgba(2, 131, 167, 0.5); }
  .p-funzioni__chip-icon--green { box-shadow: 0 6px 15px 0 rgba(18, 167, 10, 0.5); }
  .p-funzioni__chip-icon--blue { box-shadow: 0 6px 15px 0 rgba(0, 34, 255, 0.5); }
}


/* ==========================================================================
   p06-demo
   ========================================================================== */
/* 06 · Demo — "Il gestionale, dal vivo." (#demo)
   Last section of the original "About/Features" wrapper (no background, gap 10px → margin-top). */
.p-demo {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1920px;               /* the wrapper's max-width */
  height: min-content;
  margin-top: 10px;                /* the wrapper's gap between About / AI Suggestions / Features / Demo */
  padding: 48px 24px;
  overflow: clip;
}
.p-demo__container {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  height: min-content;
  overflow: clip;
}

/* pill "Provalo adesso" */
.p-demo__badge {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 8px 20px;
  border-radius: 100px;
  background-color: #fff;
  overflow: clip;
}
.p-demo__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #1315151a;
  border-radius: inherit;
  pointer-events: none;
}
.p-demo__badge-text {
  font-family: var(--font-gsans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
  text-align: center;
  color: rgb(19, 21, 21);
  white-space: pre;
}

.p-demo__title {
  flex: none;
  width: 100%;
  max-width: 900px;
  font-family: var(--font-gsans);
  font-size: 54px;
  font-weight: 600;
  letter-spacing: -1.5px;
  line-height: 1.08em;
  text-align: center;
  color: rgb(19, 21, 21);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.p-demo__subtitle {
  flex: none;
  width: 100%;
  max-width: 640px;
  font-family: var(--font-gsans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45em;
  text-align: center;
  color: rgb(97, 97, 97);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* ---- ByupDemo: glass browser frame ---- */
.p-demo__frame-box {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 1200px;
  height: 720px;
  container-type: inline-size;     /* narrow mode (< 700px): Panoramica only, short hint */
}
.p-demo__frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.4),
              0 40px 80px -30px rgba(235, 52, 86, 0.45), 0 12px 30px -12px rgba(0, 0, 0, 0.25);
  /* the component asks for "Plus Jakarta Sans", "Inter" but the page never loads Plus Jakarta Sans:
     the original renders in Inter (Framer's font) — keep what is actually shown */
  font-family: "Inter", "Inter Placeholder", system-ui, sans-serif;
  will-change: transform;
}
.p-demo__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.6);
}
.p-demo__dots { display: flex; gap: 7px; }
.p-demo__dots span { width: 12px; height: 12px; border-radius: 12px; background: #ff5f57; }
.p-demo__dots span:nth-child(2) { background: #febc2e; }
.p-demo__dots span:nth-child(3) { background: #28c840; }

.p-demo__tabs {
  position: relative;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
}
.p-demo__tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  color: #555;
  cursor: pointer;
}
.p-demo__tab.is-active { font-weight: 700; color: #eb3456; }
.p-demo__tab:focus-visible { outline: 2px solid #eb3456; outline-offset: 2px; }
/* white pill behind the active tab (moved between tabs by p06-demo.js, spring 500/38) */
.p-demo__tab-pill {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.15);
  transform-origin: 0 50%;
}

.p-demo__hint {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(235, 52, 86, 0.1);
  font-size: 12px;
  font-weight: 700;
  color: #eb3456;
}
.p-demo__hint-narrow { display: none; }
/* live dot: scale [1, 1.5, 1], opacity [1, .4, 1], 1.6s, easeOut on each segment, infinite */
.p-demo__live {
  width: 7px;
  height: 7px;
  border-radius: 7px;
  background: #fd1569;
  will-change: transform;
  animation: p-demo-live 1.6s infinite;
}
@keyframes p-demo-live {
  0%   { transform: scale(1);   opacity: 1;   animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  50%  { transform: scale(1.5); opacity: 0.4; animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  100% { transform: scale(1);   opacity: 1; }
}

@container (max-width: 699.98px) {
  .p-demo__tab--wide { display: none; }
  .p-demo__hint-wide { display: none; }
  .p-demo__hint-narrow { display: inline; }
}

/* live demo area: iframes (created by p06-demo.js) + loader */
.p-demo__view {
  position: relative;
  flex: 1;
  background: #eceef1;
}
.p-demo__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.p-demo__iframe.is-current { opacity: 1; pointer-events: auto; }
.p-demo__loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #999;
}
.p-demo__loader[hidden] { display: none; }
.p-demo__loader.is-leaving { opacity: 0; transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.35, 1); }
.p-demo__spinner {
  width: 18px;
  height: 18px;
  border-radius: 18px;
  border: 2.5px solid rgba(235, 52, 86, 0.2);
  border-top-color: #fd1569;
  animation: p-demo-spin 0.9s linear infinite;
}
@keyframes p-demo-spin { to { transform: rotate(360deg); } }

/* ---- tablet ---- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .p-demo { padding: 72px 24px; }
  .p-demo__frame-box { height: 600px; }
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .p-demo { padding: 56px 24px; }
  .p-demo__title { font-size: 38px; line-height: 1.1em; }
  .p-demo__subtitle { font-size: 17px; }
  .p-demo__frame-box { height: 440px; }
}


/* ==========================================================================
   p07-recensioni
   ========================================================================== */
/* 07 · Recensioni — "Cosa dicono i locali che hanno provato la beta" (#reviews) */
.p-recensioni {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-width: 100px;
  max-width: 2160px;
  height: min-content;
  padding: 0 0 40px;
  overflow: visible;
}
.p-recensioni__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.p-recensioni__container {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 50px;
  width: 100%;
  max-width: 1260px;
  height: min-content;
  padding: 10px 30px;
  overflow: visible;
}
.p-recensioni__top {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 500px;
  height: min-content;
  overflow: clip;
}

/* pill (component "PreTitle") */
.p-recensioni__pill {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 8px 20px;
  border-radius: 100px;
  background-color: #fff;
  overflow: clip;
  will-change: transform;
}
.p-recensioni__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #1315151a;
  border-radius: inherit;
  pointer-events: none;
}
.p-recensioni__pill-text {
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3em;
  text-align: center;
  color: #131515;
  white-space: pre;
}

.p-recensioni__title {
  position: relative;
  flex: none;
  width: 100%;
  font-family: var(--font-stack);
  font-size: 48px;
  font-weight: 500;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  letter-spacing: -0.03em;
  line-height: 1.2em;
  text-align: center;
  color: #131515;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  text-wrap: balance;
  will-change: transform;
}
.p-recensioni__title em { font-style: italic; }
.p-recensioni__title strong { font-weight: 700; }

.p-recensioni__tagline {
  position: relative;
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  overflow: clip;
  will-change: transform;
}
.p-recensioni__tagline-text {
  flex: 1 0 0;
  width: 1px;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3em;
  text-align: center;
  color: #131515;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ---- ByupReviews: two endless rows (CSS marquee, like the original "byupRvScroll") ---- */
.p-recensioni__marquee { position: relative; flex: none; width: 100%; }
.p-recensioni__rows {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
.p-recensioni__row { display: flex; overflow: hidden; padding: 10px 0; }
.p-recensioni__track { display: flex; gap: 18px; width: max-content; padding-right: 18px; }
/* a lap = half of the (duplicated) track: 55s, second row 55 × .85 = 46.75s in reverse */
.p-recensioni__track.is-running { animation: p-recensioni-scroll 55s linear infinite; }
.p-recensioni__row--reverse .p-recensioni__track.is-running { animation-duration: 46.75s; animation-direction: reverse; }
.p-recensioni__row:hover .p-recensioni__track { animation-play-state: paused; }
@keyframes p-recensioni-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .p-recensioni__track.is-running { animation: none; } }

/* card — the component asks for "Plus Jakarta Sans", "Inter" but the page never loads Plus Jakarta Sans:
   the original renders in Inter, keep what is actually shown */
.p-recensioni__card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex-shrink: 0;
  width: 340px;
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 14px 34px -20px rgba(120, 10, 40, 0.35);
  font-family: "Inter", "Inter Placeholder", system-ui, sans-serif;
}
.p-recensioni__stars { display: flex; gap: 3px; }
.p-recensioni__stars svg { fill: #f5a623; }
.p-recensioni__text { flex: 1; margin: 0; font-size: 15px; line-height: 1.5; color: #2a2a30; }
.p-recensioni__author { display: flex; align-items: center; gap: 12px; }
.p-recensioni__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
/* avatar palette of the original, by review (Google-style: one colour + initial) */
.p-recensioni__avatar--c0 { background: #f86c5f; }
.p-recensioni__avatar--c1 { background: #296cff; }
.p-recensioni__avatar--c2 { background: #fd1569; }
.p-recensioni__avatar--c3 { background: #eb3456; }
.p-recensioni__avatar--c4 { background: #7c3aed; }
.p-recensioni__avatar--c5 { background: #0ea5a4; }
.p-recensioni__avatar--c6 { background: #f59e0b; }
.p-recensioni__avatar--c7 { background: #16a34a; }
.p-recensioni__avatar--c8 { background: #f25559; }
.p-recensioni__who { flex: 1; min-width: 0; }
.p-recensioni__name { display: block; font-size: 14.5px; font-weight: 700; color: #1a1a1a; }
.p-recensioni__role { display: block; font-size: 12.5px; color: #6b6b75; }
.p-recensioni__tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(235, 52, 86, 0.08);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #eb3456;
  white-space: nowrap;
}
.p-recensioni__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 100%);
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .p-recensioni__tagline-text { font-size: 16px; }
}


/* ==========================================================================
   p08-prezzi
   ========================================================================== */
/* 08 · Prezzi — "Pricing Plans" (code component ByupPricing, fixed width / auto height).
   Section = framer-10yodia; panel = the component root (fluid paddings/heading via clamp + vw). */
.p-prezzi {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 1400px;
  height: min-content;
  padding: 64px;
  overflow: visible;
}

.p-prezzi__panel {
  position: relative;
  flex: none;
  width: 100%;
  max-width: 1920px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 40px);
  border-radius: 40px;
  overflow: hidden;
  color: #fff;
  /* the component asks for "Plus Jakarta Sans", which byup.it never loads: it renders in Inter */
  font-family: var(--font-body);
  background:
    radial-gradient(70% 60% at 0% 0%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
    radial-gradient(60% 70% at 100% 100%, rgba(253, 21, 105, 0.6) 0%, rgba(253, 21, 105, 0) 65%),
    linear-gradient(160deg, #f86c5f 0%, #f25559 42%, #eb3456 78%, #fd1569 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 40px 80px -40px rgba(235, 52, 86, 0.6);
}

.p-prezzi__pill {
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.p-prezzi__head { text-align: center; max-width: 720px; }
.p-prezzi__title {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.08;
}
.p-prezzi__sub { font-size: 17px; line-height: 1.5; opacity: 0.88; margin-top: 14px; }

/* ---- Mensile / Annuale ---- */
.p-prezzi__toggle {
  display: flex;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.p-prezzi__opt {
  position: relative;
  z-index: 1;               /* each button is a stacking context: the pill (z -1) sits under its label */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  color: #fff;
  transition: color 0.25s ease;
}
.p-prezzi__opt.is-active { color: #eb3456; }
/* white pill (layoutId "byup-pricing-pill-v2"): only the active button shows it;
   JS animates left/right from the previous button (spring stiffness 500, damping 38) */
.p-prezzi__thumb {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 16px -6px rgba(120, 10, 40, 0.45);
}
.p-prezzi__opt.is-active .p-prezzi__thumb { display: block; }
.p-prezzi__thumb.is-moving {
  transition:
    left 0.45s linear(0, 0.0527, 0.1718, 0.3157, 0.4593, 0.5889, 0.6986, 0.787, 0.8554, 0.9063, 0.9429, 0.9683, 0.9851, 0.9956, 1.0018, 1.0049, 1.0062, 1.0063, 1.0057, 1.0049, 1.0039, 1.0031, 1.0023, 1.0017, 1.0012, 1.0008, 1.0005, 1.0003, 1),
    right 0.45s linear(0, 0.0527, 0.1718, 0.3157, 0.4593, 0.5889, 0.6986, 0.787, 0.8554, 0.9063, 0.9429, 0.9683, 0.9851, 0.9956, 1.0018, 1.0049, 1.0062, 1.0063, 1.0057, 1.0049, 1.0039, 1.0031, 1.0023, 1.0017, 1.0012, 1.0008, 1.0005, 1.0003, 1);
}
.p-prezzi__off {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.p-prezzi.is-yearly .p-prezzi__off { background: rgba(41, 108, 255, 0.12); color: #296cff; }

/* ---- plans ---- */
.p-prezzi__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 6px;
}

/* whileInView (amount .25, once) + whileHover y -6: same tween for both, delay idx × 0.08 s */
.p-prezzi__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 24px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 24px 50px -28px rgba(90, 10, 30, 0.55);
  opacity: 0;
  transform: translateY(26px);
  will-change: transform;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.p-prezzi__card:nth-child(2) { transition-delay: 0.08s; }
.p-prezzi__card:nth-child(3) { transition-delay: 0.16s; }
.p-prezzi__card:nth-child(4) { transition-delay: 0.24s; }
.p-prezzi__card.is-in { opacity: 1; transform: none; }
@media (hover: hover) {
  .p-prezzi__card.is-in:hover { transform: translateY(-6px); }
}
.p-prezzi__card--hl { box-shadow: 0 0 0 2.5px #296cff, 0 30px 60px -24px rgba(41, 108, 255, 0.55); }

.p-prezzi__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #296cff;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(41, 108, 255, 0.9);
}
.p-prezzi__name { font-size: 18px; font-weight: 800; }

.p-prezzi__price-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  overflow: hidden;
  min-height: 40px;
}
.p-prezzi__price {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  filter: blur(0px);
}
.p-prezzi__price.is-new { will-change: transform; }
.p-prezzi__per { font-size: 13px; color: #6b6b75; }
.p-prezzi__bill { font-size: 12.5px; color: #6b6b75; min-height: 18px; }

.p-prezzi__quota { padding: 10px 12px; border-radius: 14px; background: rgba(235, 52, 86, 0.06); }
.p-prezzi__card--hl .p-prezzi__quota { background: rgba(41, 108, 255, 0.07); }
.p-prezzi__orders { font-size: 17px; font-weight: 800; color: #eb3456; }
.p-prezzi__orders span { font-size: 13px; font-weight: 700; }
.p-prezzi__card--hl .p-prezzi__orders { color: #296cff; }
.p-prezzi__extra { font-size: 12px; color: #6b6b75; }

.p-prezzi__feats { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.p-prezzi__feat { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.4; color: #33333a; }
.p-prezzi__tick { flex-shrink: 0; margin-top: 2px; color: #eb3456; }
.p-prezzi__card--hl .p-prezzi__tick { color: #296cff; }

/* whileHover scale 1.03 / whileTap .97 — Motion's default scale spring (stiffness 550, damping 30, restSpeed 10):
   it settles (snaps to the target) once within 0.005 → curve cut at 95 ms */
.p-prezzi__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(90deg, #f86c5f, #fd1569);
  box-shadow: 0 12px 24px -12px rgba(253, 21, 105, 0.8);
  transition: transform 0.095s linear(0, 0.0158, 0.0582, 0.1203, 0.1961, 0.2803, 0.3687, 0.4577, 0.5443, 0.6266, 0.7029, 0.7721, 0.8337);
}
.p-prezzi__card--hl .p-prezzi__cta { background: #296cff; box-shadow: 0 12px 24px -12px rgba(41, 108, 255, 0.9); }
@media (hover: hover) {
  .p-prezzi__cta:hover { transform: scale(1.03); }
}
.p-prezzi__cta:active { transform: scale(0.97); }

.p-prezzi__note { font-size: 13.5px; opacity: 0.85; text-align: center; max-width: 720px; }

/* ---- tablet ---- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .p-prezzi { padding: 64px 44px 44px; }
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .p-prezzi { max-width: 500px; padding: 56px 32px 32px; }
}


/* ==========================================================================
   p09-faq
   ========================================================================== */
/* 09 · FAQ — "Le risposte, prima che le chiedi" */
.p-faq {
  /* springs of the original (Framer bounce/duration → exact CSS linear()) */
  --p-faq-spring-acc: linear(0, 0.0247, 0.0868, 0.1718, 0.2684, 0.3685, 0.4664, 0.5582, 0.6416, 0.7153, 0.779, 0.8328, 0.8775, 0.9137, 0.9426, 0.965, 0.982, 0.9944, 1.0032, 1.0091, 1.0127, 1.0145, 1.0152, 1.0149, 1.014, 1.0127, 1.0113, 1.0098, 1.0083, 1.0069, 1.0056, 1.0044, 1.0035, 1.0026, 1.0019, 1.0014, 1.0009, 1.0006, 1);   /* bounce .2 / .6s */
  --p-faq-spring-btn: linear(0, 0.0434, 0.1459, 0.2755, 0.411, 0.5392, 0.6527, 0.7484, 0.8257, 0.8859, 0.9311, 0.9636, 0.9859, 1.0004, 1.0091, 1.0135, 1.0151, 1.0148, 1.0135, 1.0116, 1.0095, 1.0076, 1.0058, 1.0042, 1.003, 1.002, 1.0012, 1.0007, 1);   /* bounce .2 / .45s */
  position: relative;
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: min-content;
  padding: 0;
  overflow: visible;
}
.p-faq__container {
  position: relative;
  flex: 1 0 0;
  width: 1px;
  max-width: 1260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 50px;
  height: min-content;
  padding: 0 30px;
  overflow: visible;
}
.p-faq__content {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 100px;
  width: 100%;
  height: min-content;
  padding: 68px 0;
  overflow: visible;
}

/* ---- left column ---- */
.p-faq__left {
  position: relative;
  flex: 0.6 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 80px;
  height: min-content;
  overflow: visible;
}
.p-faq__top {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  height: min-content;
  overflow: visible;
}
/* pill (component "PreTitle") */
.p-faq__pill {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 8px 20px;
  border-radius: 100px;
  background-color: #fff;
  overflow: clip;
  will-change: transform;
}
.p-faq__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #1315151a;
  border-radius: inherit;
  pointer-events: none;
}
.p-faq__pill-text {
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3em;
  text-align: center;
  color: #131515;
  white-space: pre;
}
.p-faq__title {
  position: relative;
  flex: none;
  width: 100%;
  font-family: var(--font-stack);
  font-size: 48px;
  font-weight: 500;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.2em;
  text-align: left;
  color: #131515;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  text-wrap: balance;
  will-change: transform;
}

/* "Non trovi la risposta?" card */
.p-faq__cta {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
  width: 100%;
  height: min-content;
  padding: 30px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 8px 20px 0 #1315150d;
  overflow: clip;
  will-change: transform;
}
.p-faq__cta-icon {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ff4c00;
  box-shadow: 0 10px 15px 0 #ff4c0080;
  overflow: clip;
}
.p-faq__cta-icon img { flex: none; width: 22px; height: 22px; object-fit: contain; }
.p-faq__cta-bottom {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  height: min-content;
}
.p-faq__cta-title {
  position: relative;
  flex: none;
  width: 100%;
  font-family: var(--font-stack);
  font-size: 24px;
  font-weight: 500;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.2em;
  text-align: left;
  color: #131515;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* "Contattaci" (component "Button", variant Dark; tablet/phone "Dark - Phone": smaller, no hover).
   Desktop hover: the box scales to .95 (spring bounce .25 / .45s; back with Motion's default scale spring
   550/30, which stops at 90% after 105ms) and the label rolls to its copy (spring bounce .2 / .45s). */
.p-faq__btn-box {
  position: relative;
  flex: none;
  width: auto;
  height: auto;
  will-change: transform;
  transition: transform 105ms linear(0, 0.0192, 0.0699, 0.1431, 0.2309, 0.3267, 0.4252, 0.5221, 0.6142, 0.6993, 0.7758, 0.8429, 0.9003 99.9%, 1);
}
.p-faq__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: min-content;
  height: min-content;
  padding: 16px 34px;
  border-radius: 100px;
  background-color: #131515;
  box-shadow: 0 4px 10px 0 #13151580, 0 10px 35px 0 #13151580;
  overflow: clip;
  text-decoration: none;
  cursor: pointer;
}
.p-faq__btn:focus-visible { outline: 2px solid #131515; outline-offset: 3px; }
.p-faq__btn-roll {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: min-content;
  height: 22px;
  overflow: clip;
}
.p-faq__btn-text {
  flex: none;
  display: block;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3em;
  text-align: center;
  color: #fff;
  white-space: pre;
  transition: transform 0.45s var(--p-faq-spring-btn);
}
@media (min-width: 1200px) and (hover: hover) {
  .p-faq__btn-box:hover {
    transform: scale(0.95);
    transition: transform 0.45s linear(0, 0.0473, 0.1592, 0.3003, 0.4469, 0.5838, 0.7031, 0.8012, 0.8779, 0.935, 0.9752, 1.0017, 1.0176, 1.0257, 1.0283, 1.0274, 1.0245, 1.0206, 1.0164, 1.0125, 1.009, 1.0061, 1.0038, 1.0021, 1.0009, 1.0001, 0.9996, 0.9993, 1);
  }
  /* justify-content flex-start → flex-end: both labels move up by 22 - (23.4 + 10 + 23.4) */
  .p-faq__btn:hover .p-faq__btn-text { transform: translateY(-34.8px); }
}

/* ---- accordion (component "Accordion": Close / Open, phone variants) ---- */
.p-faq__list {
  position: relative;
  flex: 1 0 0;
  width: 1px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  height: min-content;
  overflow: visible;
}
.p-faq__item-box { position: relative; flex: none; width: 100%; height: auto; will-change: transform; }
.p-faq__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;     /* (original: center — same at rest; flex-start keeps the question on top while the height animates) */
  width: 100%;
  height: min-content;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 8px 20px 0 #1315150d;
  overflow: hidden;
}
.p-faq__q { width: 100%; flex: none; }
.p-faq__q-btn {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 20px;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}
.p-faq__q-btn:focus-visible { outline: 2px solid #131515; outline-offset: -4px; border-radius: 20px; }
.p-faq__q-text {
  flex: 1 0 0;
  width: 1px;
  min-height: 34px;
  display: flex;
  align-items: center;
  font-family: var(--font-stack);
  font-size: 20px;
  font-weight: 500;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.2em;
  color: #131515;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* "+" that turns into "×" (rotate 135°) */
.p-faq__icon {
  position: relative;
  flex: none;
  width: 34px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: #e8e8e8;
}
.p-faq__icon::before,
.p-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 3px;
  background-color: #131515;
}
.p-faq__icon::after { width: 2px; height: 16px; margin: -8px 0 0 -1px; }
.p-faq__item.is-open .p-faq__icon { transform: rotate(135deg); }
.p-faq.is-ready .p-faq__icon { transition: transform 0.6s var(--p-faq-spring-acc); }

.p-faq__a {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 0 20px 20px;
  overflow: hidden;
}
.p-faq__a[hidden] { display: none; }
.p-faq__a-text {
  flex: 1 0 0;
  width: 1px;
  max-width: 700px;
  font-family: "Google Sans Flex Variable", "Google Sans Flex Variable Placeholder", sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "opsz" 18, "wdth" 100, "wght" 500, "GRAD" 0, "ROND" 0, "slnt" 0;
  font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  line-height: 1.3em;
  color: #494d4d;
  text-wrap: balance;
  will-change: transform;
}

/* ---- tablet ---- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .p-faq__content, .p-faq__left { gap: 30px; }
  .p-faq__btn-box { will-change: auto; }
  .p-faq__btn { padding: 12px 26px; cursor: auto; }
  .p-faq__btn-roll { height: min-content; }
  .p-faq__btn-text--hover { display: none; }
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .p-faq__container { padding: 0 20px; }
  .p-faq__content { flex-direction: column; gap: 30px; }
  .p-faq__left { flex: none; width: 100%; gap: 30px; }
  .p-faq__top { gap: 10px; }
  .p-faq__cta { gap: 20px; padding: 20px; }
  .p-faq__btn-box { will-change: auto; }
  .p-faq__btn { padding: 12px 26px; cursor: auto; }
  .p-faq__btn-roll { height: min-content; }
  .p-faq__btn-text--hover { display: none; }
  .p-faq__list { flex: none; width: 100%; }
  .p-faq__q-btn { padding: 12px 12px 12px 20px; }
  .p-faq__q-text { min-height: 32px; text-wrap: balance; }
  .p-faq__icon { width: 32px; }
}
/* text presets of the original switch at 809px */
@media (max-width: 809px) {
  .p-faq__q-text { font-size: 16px; }
  .p-faq__a-text, .p-faq__btn-text { font-size: 16px; }
}


/* ==========================================================================
   p10-lista
   ========================================================================== */
/* 10 · Lista d'attesa — "Waitlist" (section framer-1e2x4aa inside main framer-v9wdgc).
   Countdown = code component ByupCountdown (theme "Su sfondo scuro", size 1 / phone .8 → --s). */
.p-lista {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: min-content;
  padding: 24px;
  overflow: clip;
}

.p-lista__box {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1200px;
  height: min-content;
  padding: 80px;
  border-radius: 40px;
  overflow: clip;
  will-change: transform;
  background: linear-gradient(155deg, #f86c5f 0%, #f25559 45%, #eb3456 78%, #fd1569 100%);
}

.p-lista__glow {
  position: absolute;
  z-index: 0;
  flex: none;
  border-radius: 100%;
  filter: blur(80px);
  pointer-events: none;
}
.p-lista__glow--top { top: -100px; left: -100px; width: 300px; height: 300px; background-color: #ffffff40; }
.p-lista__glow--bottom { right: -100px; bottom: -100px; width: 320px; height: 320px; background-color: #ffd1dc4d; }

.p-lista__badge {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 9px 16px;
  border-radius: 999px;
  overflow: clip;
  will-change: transform;
  background-color: #ffffff2e;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2em;
  color: #fff;
  text-align: center;
  white-space: pre;
}
.p-lista__badge::after,
.p-lista__form::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #ffffff59;
  border-radius: inherit;
  pointer-events: none;
}

.p-lista__title {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
  font-family: var(--font-body);
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.05em;
  color: #fff;
  text-align: center;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}
.p-lista__text {
  position: relative;
  z-index: 1;
  flex: none;
  width: 100%;
  max-width: 620px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.45em;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  text-wrap: balance;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ---- countdown (all sizes × --s, like the component's "size" prop) ---- */
.p-lista__countdown {
  --s: 1;
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14px * var(--s));
  font-family: var(--font-body);   /* "Plus Jakarta Sans" is never loaded on byup.it: Inter */
}
.p-lista__launch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13px * var(--s));
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
/* animate {scale [1, 1.6, 1], opacity [1, .4, 1]}, 1.6 s, repeat ∞ (Motion's default "easeOut" per segment) */
.p-lista__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background: #fd1569;
  box-shadow: 0 0 12px #fd1569;
  will-change: transform;
  animation: p-lista-pulse 1.6s infinite;
}
@keyframes p-lista-pulse {
  0% { transform: scale(1); opacity: 1; animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  50% { transform: scale(1.6); opacity: 0.4; animation-timing-function: cubic-bezier(0, 0, 0.58, 1); }
  100% { transform: scale(1); opacity: 1; }
}
.p-lista__tiles { display: flex; gap: calc(10px * var(--s)); }
.p-lista__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4px * var(--s));
  min-width: calc(84px * var(--s));
  padding: calc(14px * var(--s)) calc(12px * var(--s)) calc(10px * var(--s));
  border-radius: calc(20px * var(--s));
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.14);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.08) 38%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.32), 0 10px 28px -10px rgba(120, 20, 40, 0.35), 0 2px 6px -2px rgba(120, 20, 40, 0.18);
}
.p-lista__digits {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(40px * var(--s));
  min-width: calc(56px * var(--s));
}
.p-lista__num {
  font-size: calc(38px * var(--s));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  filter: blur(0px);
  will-change: transform;
}
.p-lista__unit { font-size: calc(12px * var(--s)); font-weight: 600; color: rgba(255, 255, 255, 0.72); }

/* ---- form (Framer FormContainer + FormPlainTextInput) ---- */
.p-lista__form {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  height: min-content;
  padding: 16px;
  border-radius: 24px;
  overflow: clip;
  will-change: transform;
  background-color: #ffffff29;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.p-lista__form::after { border-color: #ffffff4d; }

.p-lista__field {
  position: relative;
  flex: 1 0 0px;
  width: 1px;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  overflow: hidden;
  background: #fffffff2;
  cursor: default;
}
.p-lista__field::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #fffc;
  border-radius: 14px;
  pointer-events: none;
}
.p-lista__field:focus-within::after { border-color: #09f; }
.p-lista__input {
  flex: 1;
  width: auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2em;
  color: #1a1a1a;
  cursor: text;
}
.p-lista__input::placeholder { color: #1a1a1a80; opacity: 1; }
.p-lista__input:focus-visible { outline: none; }

/* container whileHover scale 1.02 (spring bounce .15 / .25 s); back with Motion's default scale spring
   (550/30, restSpeed 10: snaps to 1 once within 0.005 → curve cut at 84 ms) */
.p-lista__submit-wrap {
  position: relative;
  flex: none;
  width: auto;
  height: 52px;
  will-change: transform;
  transition: transform 0.084s linear(0, 0.0126, 0.0469, 0.0979, 0.1612, 0.2329, 0.3097, 0.3887, 0.4676, 0.5445, 0.6179, 0.6867, 0.7501);
}
@media (hover: hover) {
  .p-lista__submit-wrap:hover {
    transform: scale(1.02);
    transition: transform 0.25s linear(0, 0.1084, 0.319, 0.5307, 0.7029, 0.8272, 0.9091, 0.9587, 0.9861, 0.9996, 1.0051, 1.0063, 1.0056, 1.0043, 1.0029, 1.0018, 1);
  }
}
.p-lista__submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min-content;
  height: 100%;
  padding: 0 20px;
  border-radius: 14px;
  overflow: clip;
  will-change: transform;
  background-color: #296cff;
  cursor: pointer;
}
.p-lista__submit-label {
  flex: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2em;
  color: #fff;
  text-align: center;
  white-space: pre;
}

.p-lista__error {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2em;
  color: #fff;
  text-align: center;
}
.p-lista__error[hidden] { display: none; }

.p-lista__micro {
  position: relative;
  z-index: 1;
  flex: none;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.2em;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  white-space: pre;
}

/* ---- tablet ---- */
@media (min-width: 810px) and (max-width: 1199.98px) {
  .p-lista__box { padding: 56px; }
  .p-lista__title { font-size: 40px; }
  .p-lista__form { flex-direction: column; }
  .p-lista__field { flex: none; width: 100%; }
  .p-lista__submit-wrap { width: 100%; }
  .p-lista__submit { width: 100%; }
}

/* ---- phone ---- */
@media (max-width: 809.98px) {
  .p-lista__box { gap: 24px; padding: 28px; }
  .p-lista__title { font-size: 32px; letter-spacing: -0.8px; }
  .p-lista__countdown { --s: 0.8; }
  .p-lista__form { flex-direction: column; }
  .p-lista__field { flex: none; width: 100%; }
  .p-lista__submit-wrap { width: 100%; }
  .p-lista__submit { width: 100%; }
  .p-lista__micro { width: 100%; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
}