/* Roast My Page – Hybrid Works -ilme. Mobiili ensin. */
/* Itse hostatut fontit (SIL OFL 1.1, ks. assets/fonts/OFL-*.txt). Lähde: @fontsource/anton 5.3.0 (Google Fonts v27) ja @fontsource/heebo 5.3.0 (v28).
   Ei Google Fonts -pyyntöjä. Heebo: latin + latin-ext + symbols (→ ▶) + math (≈); Anton: latin + latin-ext. Selain lataa osajoukon vain, jos sivulla on sen merkkejä. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/anton-latin-ext-400-normal.woff2) format('woff2');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:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/anton-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/heebo-math-400-normal.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/heebo-symbols-400-normal.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/heebo-latin-ext-400-normal.woff2) format('woff2');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:'Heebo';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/heebo-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/heebo-math-500-normal.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/heebo-symbols-500-normal.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/heebo-latin-ext-500-normal.woff2) format('woff2');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:'Heebo';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/heebo-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/heebo-math-700-normal.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/heebo-symbols-700-normal.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/heebo-latin-ext-700-normal.woff2) format('woff2');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:'Heebo';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/heebo-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Heebo';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/heebo-math-800-normal.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/heebo-symbols-800-normal.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF}
@font-face{font-family:'Heebo';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/heebo-latin-ext-800-normal.woff2) format('woff2');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:'Heebo';font-style:normal;font-weight:800;font-display:swap;src:url(assets/fonts/heebo-latin-800-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --navy:#16232B; --navy-2:#1A2933; --navy-3:#0F191F; --line:#283F4E;
  --orange:#F15D22; --orange-dk:#D94C14;
  --teal:#095056; --teal-lt:#5FC4C9;
  --cream:#F4EEE0;
  --text:#FFFFFF; --body:#DCE2E6; --muted:#9AABB5;
  --head:'Anton', Impact, 'Arial Narrow', sans-serif;
  --sans:'Heebo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --r:14px; --wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--navy);color:var(--body);font:400 1.0625rem/1.65 var(--sans);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{color:var(--text);margin:0 0 .6em;line-height:1.08}
h2{font:400 clamp(2rem,6vw,3.25rem)/1.05 var(--head);text-transform:uppercase;letter-spacing:.01em}
h3{font:700 1.25rem/1.3 var(--sans)}
p{margin:0 0 1rem}
a{color:var(--teal-lt)}
:focus-visible{outline:3px solid var(--teal-lt);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}
.wrap--narrow{max-width:820px}
.center{text-align:center}
.small{font-size:.9rem}
.muted{color:var(--muted)}
.accent{color:var(--orange)}
.lead{font-size:1.2rem;color:var(--body)}
.eyebrow{font:700 .85rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-lt);margin-bottom:1rem}
.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}
.skip-link{position:absolute;left:1rem;top:-4rem;z-index:10;background:var(--orange);color:#fff;padding:.6rem 1rem;border-radius:8px;font-weight:700}
.skip-link:focus{top:1rem}

/* Napit */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:52px;padding:.8rem 1.5rem;border-radius:10px;border:2px solid transparent;
  font:800 1.05rem/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:transform .15s,background-color .15s,box-shadow .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
/* valkoinen teksti oranssilla on vain ~3,4:1 → käytetään navy-tekstiä (≈5,1:1) */
.btn--primary{background:var(--orange);color:var(--navy-3);box-shadow:0 8px 24px rgba(241,93,34,.35)}
.btn--primary:hover{background:#FF6A2E}
.btn--teal{background:var(--teal);color:#fff;border-color:var(--teal-lt)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{border-color:#fff}
.btn--block{width:100%}
.btn--xl{min-height:60px;font-size:1.15rem;padding:1rem 2rem}
.btn[aria-disabled="true"]{opacity:.7;cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 1rem}

/* Hero */
.hero{position:relative;min-height:min(100svh,960px);display:flex;align-items:center;padding:3rem 0 3.5rem;isolation:isolate;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--navy-3)}
/* Kuvakerros (parallax). Inset -24px: peittää alueen myös hiiriliikkeen (±12 px) ja scale 1.0 -ääripäässä. */
.hero__img{position:absolute;inset:-24px;background:url("assets/hero-kannettava.jpg") center 35%/cover no-repeat var(--navy-3);transform-origin:50% 40%}
.hero-fx .hero__img{transform:scale(1.12);will-change:transform}
.hero__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,25,31,.55) 0%,rgba(15,25,31,.55) 40%,rgba(22,35,43,.92) 85%,var(--navy) 100%)}
.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__brand{margin:0 0 1.25rem}
.logo{display:inline-block;position:relative;vertical-align:top}
.logo img{width:min(64vw,250px)}
@media (min-width:960px){.logo img{width:320px}}
/* HW-merkki Roastin t:n poikkiviivan alle, rungon oikealle puolelle (viiva x≈72–91 %, alareuna y≈9,5 %; runko päättyy x≈73 %; tyhjä tasku y≈10–47 %).
   Vaihtoehto (Pagen viimeisen e:n alle): right:3.5%; top:74%; */
.logo .logo__tm{position:absolute;right:10.5%;top:12.3%;width:auto;height:max(14px,10.5%);filter:none;mix-blend-mode:normal;pointer-events:none}
/* Vaihtoehto A: musta logo kermanvärisellä merkillä */
.logo--badge{background:var(--cream);padding:.4rem .9rem;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55);transform:rotate(-2deg)}
.logo--badge img{mix-blend-mode:multiply}
/* Vaihtoehto B: logo käännetään valkoiseksi suoraan tummalle (vaatii läpinäkyvän tai tasaisen paperitaustan) */
.logo--invert img:not(.logo__tm){filter:invert(1) brightness(1.1);mix-blend-mode:screen}
.hero__tagline{font:400 clamp(2.3rem,9vw,4.2rem)/1.04 var(--head);text-transform:uppercase;color:#fff;max-width:16ch;margin:0 0 1rem;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.hero__lead{max-width:640px;font-size:1.1rem;color:#EEF2F4;text-shadow:0 1px 10px rgba(0,0,0,.7)}

/* Tilauslomake */
.order-form{width:100%;max-width:680px;margin-top:1rem;text-align:left}
.order-form__row{display:flex;flex-direction:column;gap:.6rem}
.order-form__input{width:100%;min-height:56px;padding:.8rem 1rem;border-radius:10px;border:2px solid rgba(255,255,255,.35);background:rgba(255,255,255,.96);color:var(--navy);
  font:500 1.05rem/1.2 var(--sans)}
.order-form__input::placeholder{color:#5B6B75}
.order-form__input:focus-visible{outline:3px solid var(--teal-lt);outline-offset:2px;border-color:var(--teal-lt)}
.order-form__input[aria-invalid="true"]{border-color:#FF8A8A}
.order-form__error{min-height:1.4em;margin:.4rem 0 0;color:#FFB4A0;font-weight:700;font-size:.95rem}
.order-form__error:empty{min-height:0;margin:0}
.order-form .btn{width:100%}
.order-form .small{margin-top:.6rem;text-align:center}
.seo-check{display:flex;align-items:flex-start;gap:.65rem;margin-top:.9rem;cursor:pointer;color:#fff;font-weight:500}
.seo-check input{flex:none;width:22px;height:22px;margin:.15rem 0 0;accent-color:var(--orange);cursor:pointer}
.seo-check__total{color:var(--body)}
.seo-check--card{background:var(--navy-3);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;margin:1rem 0 0}
.hero .seo-check{background:rgba(15,25,31,.7);border-radius:10px;padding:.7rem .9rem}

/* Osiot */
.section{padding:4.5rem 0}
.section--panel{background:var(--navy-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.25rem}
.step{background:var(--navy-2);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;position:relative}
.step__num{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--orange);color:var(--navy-3);font:400 1.6rem/1 var(--head);margin-bottom:1rem}
.step p{margin:0}

.example{display:grid;gap:2rem;align-items:center}
.scorecard{margin:0;background:var(--navy-3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.scorecard img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:3px solid var(--orange)}
.scorecard figcaption{padding:1.25rem}
.scorecard__total{display:flex;justify-content:space-between;align-items:baseline;font:400 1.4rem/1 var(--head);color:#fff;text-transform:uppercase;margin-bottom:1rem}
.scorecard__total strong{font-weight:400;font-size:2.4rem;color:var(--orange)}
.scorecard__site{color:var(--teal-lt);letter-spacing:.03em}
.scores{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.scores li{display:grid;grid-template-columns:minmax(0,1fr) 90px 2.6rem;align-items:center;gap:.75rem;font-size:.95rem}
.scores b{color:#fff;text-align:right}
.bar{height:10px;border-radius:5px;background:var(--line);position:relative;overflow:hidden}
.bar::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--s) * 20%);background:linear-gradient(90deg,var(--teal-lt),var(--orange));border-radius:5px}

.pricing{display:grid;gap:2rem}
.price-big{display:block;font-size:clamp(4.5rem,16vw,7.5rem);line-height:1;color:var(--orange)}
.card{background:var(--navy-2);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:var(--r);padding:1.5rem}
.checklist{list-style:none;margin:0 0 1.5rem;padding:0}
.checklist li{position:relative;padding-left:1.9rem;margin-bottom:.55rem}
.checklist li::before{content:"";position:absolute;left:0;top:.5em;width:1.05rem;height:.55rem;border-left:3px solid var(--teal-lt);border-bottom:3px solid var(--teal-lt);transform:rotate(-45deg)}
.addon{border-top:1px solid var(--line);padding-top:1.5rem;margin-bottom:1.5rem}
.card .small{margin:.8rem 0 0;text-align:center}

.faq{display:grid;gap:.75rem;margin-top:1.5rem}
.faq details{background:var(--navy);border:1px solid var(--line);border-radius:12px}
.faq details[open]{border-color:var(--teal)}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 3rem 1.1rem 1.2rem;position:relative;color:#fff;font-weight:700;font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font:400 1.7rem/1 var(--sans);color:var(--orange)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 1.2rem 1.2rem;margin:0}

.trust{display:grid;gap:2rem;align-items:start}
.trust__list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.trust__list li{background:var(--navy-2);border-left:4px solid var(--teal-lt);border-radius:0 10px 10px 0;padding:1rem 1.2rem;color:#fff}

.cta-final{background:radial-gradient(ellipse at 50% 0%,rgba(241,93,34,.18),transparent 60%),var(--navy-3);border-top:1px solid var(--line)}
.cta-final__title{font-size:clamp(2.4rem,8vw,4.5rem)}
.order-form--final{margin:1.5rem auto 0}
.order-form--final .small{text-align:center!important}

.footer{background:var(--navy-3);padding:1.25rem 0}
.footer__inner{display:flex;align-items:center;gap:.75rem;padding:0 1.25rem}
.footer__logo{width:136px;height:auto;display:block}
.footer p{margin:0}

/* Tablet ja ylös */
@media (min-width:720px){
  .order-form__row{flex-direction:row}
  .order-form .btn{width:auto;flex:none}
  .order-form .small{text-align:left}
  .steps{grid-template-columns:repeat(3,1fr)}
  .section{padding:6rem 0}
}
@media (min-width:960px){
  .hero__inner{align-items:flex-start;text-align:left}
  .hero__bg::after{background:linear-gradient(90deg,rgba(15,25,31,.88) 0%,rgba(15,25,31,.6) 50%,rgba(15,25,31,.2) 100%),linear-gradient(180deg,transparent 75%,var(--navy) 100%)}
  .example{grid-template-columns:1fr 1.1fr;gap:3.5rem}
  .pricing{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
  .trust{grid-template-columns:1fr 1fr;gap:3.5rem}
  .order-form--final .order-form__row{justify-content:center}
}

/* Mobiilihero: ilmaa selitetekstin alle, pehmeä liukuma ilman kovaa reunaa, läppäri näkyviin */
.hero__lead{margin:0 0 1.75rem}
@media (max-width:959px){
  .hero__img{background-position:78% center}
  .hero__bg::after{background:linear-gradient(180deg,rgba(15,25,31,.6) 0%,rgba(15,25,31,.55) 30%,rgba(15,25,31,.78) 55%,rgba(22,35,43,.95) 80%,var(--navy) 100%)}
}

/* Esimerkkiosio: kuvitteellisen yrityksen merkintä + HW-logo luottamusosiossa */
.scorecard__label{display:inline-block;margin:0 0 .9rem;color:var(--teal-lt);border:1px solid var(--teal-lt);border-radius:999px;padding:.3rem .75rem;font:700 .72rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.trust__logo{margin:0 0 1rem;line-height:0}
.trust__logo img{width:min(240px,70%);height:auto}

/* Esimerkkiosio: havainnot, lisäosarivi ja videodialogi */
.findings{margin:0 0 1rem;padding-left:1.2rem;display:grid;gap:.4rem}
.findings li::marker{color:var(--orange)}
.scores__addon{border-top:1px solid var(--line);padding-top:.6rem;margin-top:.2rem;color:var(--teal-lt)}
.scorecard__site{overflow-wrap:anywhere;font-size:1rem}
.video-dialog{padding:0;border:0;background:var(--navy-3);border-radius:var(--r);width:min(1100px,94vw);max-width:none}
.video-dialog::backdrop{background:rgba(5,10,14,.82)}
.video-dialog video{display:block;width:100%;height:auto;background:#000}
.video-dialog form{display:flex;justify-content:flex-end;padding:.75rem}

/* Stripe Checkout: hinnoittelukortin tilauslomake, ALV-rivi, peruutusilmoitus, myyjätiedot */
.order-form--card{max-width:none;margin:0}
.order-form--card .addon{margin-bottom:1.25rem}
.order-form__label{display:block;margin:0 0 .45rem;color:#fff;font-weight:700}
.order-form--card .btn{width:100%;margin-top:.9rem}
.order-form--card .order-form__error:not(:empty){margin-top:.5rem}
.card .vat-note{color:var(--body)}
.card .small a,.footer a{color:var(--teal-lt)}
.btn[aria-busy="true"]{opacity:.75;cursor:progress}
.notice{background:rgba(95,196,201,.12);border:1px solid var(--teal-lt);border-radius:10px;padding:.8rem 1rem;color:#fff;font-weight:500}
.footer__inner{flex-wrap:wrap}
.footer__seller{flex-basis:100%}
@media (min-width:720px){.footer__seller{flex-basis:auto;margin-left:auto!important}}

/* ============================================================
   Animaatiot (progressive enhancement)
   Lähtötilat piilotetaan VAIN kun JS on lisännyt <html class="anim">
   (ei lisätä, jos prefers-reduced-motion: reduce). Ilman JS:ää ja
   reduced-motion-tilassa lopputila näkyy heti. Animoidaan vain
   transform / opacity / SVG stroke-dashoffset.
   ============================================================ */
:root{--ease:cubic-bezier(.22,.61,.36,1)}

/* 1. Hero: osoitekentän skannaus + mallimerkit */
.order-form__field{position:relative;display:block;flex:1 1 auto;min-width:0}
.scan{position:absolute;inset:0;border-radius:10px;overflow:hidden;pointer-events:none}
.scan__beam{position:absolute;top:0;bottom:0;left:0;width:100%;opacity:0;transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(241,93,34,0) 55%,rgba(241,93,34,.16) 97%,rgba(241,93,34,0) 100%)}
.scan__beam::after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--orange);box-shadow:0 0 10px 2px rgba(241,93,34,.55)}
.anim .is-scanning .scan__beam{animation:scan-sweep .9s var(--ease) both}
@keyframes scan-sweep{0%{opacity:1;transform:translateX(-100%)}80%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(0)}}

.models{display:flex;flex-wrap:wrap;gap:.45rem;margin:.75rem 0 0}
.model-pill{position:relative;display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .75rem;border-radius:999px;
  border:1px solid rgba(95,196,201,.55);background:rgba(15,25,31,.72);color:#fff;font:700 .76rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.model-pill::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--teal-lt)}
.model-pill::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--orange);background:rgba(241,93,34,.22);
  box-shadow:0 0 14px rgba(241,93,34,.45);opacity:0;transition:opacity .3s var(--ease)}
.models .model-pill{transition:transform .3s var(--ease)}
.models .model-pill.is-lit{transform:translateY(-1px) scale(1.04)}
.models .model-pill.is-lit::after{opacity:1}

/* 2. Esimerkin pisteet: palkit täyttyvät (scaleX) porrastetusti, luku juoksee JS:llä */
.bar::after{transform-origin:left center}
.scores li:nth-child(1){--i:0}.scores li:nth-child(2){--i:1}.scores li:nth-child(3){--i:2}.scores li:nth-child(4){--i:3}
.scores li:nth-child(5){--i:4}.scores li:nth-child(6){--i:5}.scores li:nth-child(7){--i:6}.scores li:nth-child(8){--i:7}
.anim .scorecard .bar::after{transform:scaleX(0);transition:transform .6s var(--ease) calc(var(--i) * 90ms)}
.anim .scorecard .scores b{opacity:0;transition:opacity .3s var(--ease) calc(var(--i) * 90ms + 250ms)}
.anim .scorecard.is-counted .bar::after{transform:none}
.anim .scorecard.is-counted .scores b{opacity:1}
.scorecard__total > span:last-child{white-space:nowrap;flex:none}
.scorecard__total strong{display:inline-block;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}

/* 3. Kolmen mallin äänestys (havainnollistus) */
.vote{display:grid;gap:1.5rem;align-items:center;margin-top:3rem;background:var(--navy-3);border:1px solid var(--line);border-left:4px solid var(--teal-lt);border-radius:var(--r);padding:1.4rem 1.25rem}
.vote h3{margin-bottom:.5rem}
.vote__text p:last-child{margin-bottom:0}
.vote__tag{display:inline-block;margin:0 0 .8rem;color:var(--orange);border:1px solid var(--orange);border-radius:999px;padding:.28rem .7rem;font:700 .72rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.vote__viz{display:flex;align-items:center;justify-content:center;gap:.6rem}
.vote__models{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vote__models li{display:flex;align-items:center;justify-content:space-between;gap:.55rem;height:44px;min-width:7.6rem}
.vote__score{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy-2);border:2px solid var(--teal-lt);color:#fff;font:400 1.15rem/1 var(--head)}
.vote__lines{flex:none;width:48px;height:156px;overflow:visible}
.vote__lines path{fill:none;stroke:var(--teal-lt);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;opacity:.8}
.vote__result{flex:none;display:grid;justify-items:center;gap:.15rem;min-width:6rem;padding:.8rem .7rem;border-radius:var(--r);background:var(--navy-2);border:2px solid var(--orange);box-shadow:0 10px 30px rgba(241,93,34,.18);text-align:center}
.vote__num{font:400 1.4rem/1 var(--head);color:#fff}
.vote__num strong{font-weight:400;font-size:2.6rem;color:var(--orange)}
.vote__area{font:700 .7rem/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--teal-lt)}
@media (min-width:720px){.vote{padding:1.75rem 2rem}.vote__lines{width:72px}.vote__viz{gap:.9rem}}
@media (min-width:960px){.vote{grid-template-columns:1fr 1.1fr;gap:3.5rem}}
.vote__models li:nth-child(2){--i:1}.vote__models li:nth-child(3){--i:2}
.vote__lines path:nth-child(2){--i:1}.vote__lines path:nth-child(3){--i:2}
.anim .vote__models li{opacity:0;transform:translateX(-10px);transition:opacity .4s var(--ease) calc(var(--i,0) * 120ms),transform .4s var(--ease) calc(var(--i,0) * 120ms)}
.anim .vote__score{transform:scale(.6);transition:transform .35s var(--ease) calc(var(--i,0) * 120ms + 200ms)}
.anim .vote__lines path{stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease) calc(var(--i,0) * 80ms + 600ms)}
.anim .vote__result{opacity:0;transform:scale(.88);transition:opacity .4s var(--ease) 1.05s,transform .45s var(--ease) 1.05s}
.anim .vote.is-in .vote__models li{opacity:1;transform:none}
.anim .vote.is-in .vote__score{transform:none}
.anim .vote.is-in .vote__lines path{stroke-dashoffset:0}
.anim .vote.is-in .vote__result{opacity:1;transform:none}

/* 4. Roast-hetki: punakynäalleviivaus + käsin kirjoitetun tyylinen merkintä */
.pen{position:relative;white-space:nowrap;color:#fff}
.pen__line{position:absolute;left:-2%;bottom:-.32em;width:104%;height:.55em;overflow:visible;pointer-events:none}
.pen__line path,.pen-note__arrow path{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.pen-note{display:inline-flex;align-items:center;gap:.15rem;margin-left:.35rem;color:var(--orange);font:800 .86rem/1 var(--sans);letter-spacing:.02em;white-space:nowrap;transform:rotate(-5deg);vertical-align:.1em}
.pen-note__arrow{width:1.6rem;height:.85rem;overflow:visible}
.pen-note__arrow path{stroke-width:2}
.findings li:nth-child(1){--d:0ms}.findings li:nth-child(2){--d:450ms}.findings li:nth-child(3){--d:900ms}
.anim .findings .pen__line path{stroke-dashoffset:1;transition:stroke-dashoffset .6s var(--ease) var(--d)}
.anim .findings .pen-note__arrow path{stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease) calc(var(--d) + 450ms)}
.anim .findings .pen-note__txt{display:inline-block;opacity:0;transform:translateY(4px) rotate(-4deg);transition:opacity .3s var(--ease) calc(var(--d) + 650ms),transform .3s var(--ease) calc(var(--d) + 650ms)}
.anim .findings.is-marked .pen__line path,.anim .findings.is-marked .pen-note__arrow path{stroke-dashoffset:0}
.anim .findings.is-marked .pen-note__txt{opacity:1;transform:none}

/* 5. Osiot nousevat esiin vieritettäessä */
.anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease) var(--rd,0ms),transform .6s var(--ease) var(--rd,0ms)}
.anim .reveal.is-visible{opacity:1;transform:none}

/* Liikkeen vähentäminen ja tulostus: lopputila heti */
@media (prefers-reduced-motion:reduce),print{
  .anim .reveal,.anim .vote__models li,.anim .vote__score,.anim .vote__result,.anim .findings .pen-note__txt,
  .anim .scorecard .scores b{opacity:1!important;transform:none!important}
  .anim .scorecard .bar::after{transform:none!important}
  .anim .vote__lines path,.anim .findings .pen__line path,.anim .findings .pen-note__arrow path{stroke-dashoffset:0!important}
  .scan{display:none}
}

/* ============================================================
   Tilausnapit (3 × submit → /api/checkout)
   Hover/fokus: valoraita + nuoli → + nousu + varjo. Painallus: puristus.
   Lataus: pisteet + skannausviiva. Virhe: ravistus. Näkyviin: liuku + raita.
   Vain transform/opacity. Fokusrengas (:focus-visible) säilyy.
   ============================================================ */
.btn--primary{position:relative;isolation:isolate;
  transition:transform .2s var(--ease),background-color .2s var(--ease)}
.btn__fx{position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;pointer-events:none}
.btn__fx::before{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:32%;opacity:0;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,244,236,.7) 40%,rgba(255,255,255,.95) 50%,rgba(255,244,236,.7) 60%,rgba(255,255,255,0) 100%)}
.btn__fx::after{content:"";position:absolute;top:0;bottom:0;left:0;width:28%;opacity:0;transform:translateX(-110%);
  background:linear-gradient(90deg,rgba(15,25,31,0),rgba(15,25,31,.22) 70%,rgba(255,255,255,.75) 96%,rgba(255,255,255,0))}
.btn--primary::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 16px 38px rgba(241,93,34,.55),0 0 0 1px rgba(255,255,255,.12);transition:opacity .25s var(--ease)}
.btn__arrow{display:inline-block;font-weight:800;transition:transform .25s var(--ease)}
@media (hover:hover){
  .btn--primary:hover{transform:translateY(-2px)}
  .btn--primary:hover::after{opacity:1}
  .btn--primary:hover .btn__arrow{transform:translateX(4px)}
  .btn--primary:hover .btn__fx::before{animation:btn-shine .8s cubic-bezier(.45,.1,.4,1)}
}
.btn--primary:focus-visible{transform:translateY(-2px)}
.btn--primary:focus-visible::after{opacity:1}
.btn--primary:focus-visible .btn__arrow{transform:translateX(4px)}
.btn--primary:focus-visible .btn__fx::before{animation:btn-shine .8s cubic-bezier(.45,.1,.4,1)}
.btn--primary:active{transform:translateY(0) scale(.97);transition-duration:.08s}
.btn--primary.is-sweep .btn__fx::before{animation:btn-shine .85s cubic-bezier(.45,.1,.4,1)}
@keyframes btn-shine{0%{opacity:1;transform:translateX(-120%) skewX(-18deg)}85%{opacity:1}100%{opacity:0;transform:translateX(420%) skewX(-18deg)}}

/* Lataustila (main.js setBusy): teksti vaihtuu, pisteet + skannausviiva liikkuvat */
.btn--primary[aria-busy="true"]{opacity:1;cursor:progress}
.btn--primary[aria-busy="true"]::after,.btn--primary[aria-busy="true"] .btn__fx::before{opacity:0;animation:none}
.btn--primary[aria-busy="true"]:hover,.btn--primary[aria-busy="true"]:active{transform:none}
.btn__dots{display:inline-flex;gap:4px;align-items:center;margin-left:.15em}
.btn__dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.anim .btn__dots i{animation:btn-dot 1s ease-in-out infinite}
.anim .btn__dots i:nth-child(2){animation-delay:.15s}.anim .btn__dots i:nth-child(3){animation-delay:.3s}
.anim .btn--primary[aria-busy="true"] .btn__fx::after{animation:btn-scan 1.2s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes btn-dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@keyframes btn-scan{0%{opacity:1;transform:translateX(-110%)}100%{opacity:1;transform:translateX(370%)}}

/* Virhe: lyhyt sivuttaisravistus */
.anim .btn--primary.is-shake{animation:btn-shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes btn-shake{0%,100%{transform:none}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* Näkyviin tullessa: liukuu esiin kerran (JS lisää .btn-pre → .btn-in) */
.anim .btn--primary.btn-pre{opacity:0;transform:translateY(14px)}
.anim .btn--primary.btn-in{animation:btn-in .55s var(--ease)}
@keyframes btn-in{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}

/* SEO-valinta: hinta vaihtuu pystyliu'ulla */
[data-total]{display:inline-block}
.anim [data-total].is-roll{animation:price-roll .38s var(--ease)}
@keyframes price-roll{0%{opacity:0;transform:translateY(.7em)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .btn--primary:hover,.btn--primary:focus-visible,.btn--primary:active,.btn--primary:hover .btn__arrow,.btn--primary:focus-visible .btn__arrow{transform:none!important}
  .btn--primary.btn-pre{opacity:1!important;transform:none!important}
  .btn__fx::before,.btn__fx::after{display:none}
}

/* Hero-parallax: liikkeen vähentäminen → staattinen kuva */
@media (prefers-reduced-motion:reduce){.hero-fx .hero__img{transform:none!important;will-change:auto}}