/* Rubik and Poppins, self-hosted: hebrew, latin and latin-ext subsets from Google Fonts (OFL) */
@font-face{font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/poppins-latin-ext-pxiByp8kv8JHgFVrLDz8Z1JlFd2JQEl8qw.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: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/poppins-latin-pxiByp8kv8JHgFVrLDz8Z1xlFd2JQEk.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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-latin-ext-pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/poppins-latin-pxiEyp8kv8JHgFVrJJfecnFHGPc.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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-latin-ext-pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/poppins-latin-pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-latin-ext-pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/poppins-latin-pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-latin-ext-pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/poppins-latin-pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.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: 'Rubik'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/rubik-hebrew-iJWKBXyIfDnIV7nDrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family: 'Rubik'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/rubik-latin-ext-iJWKBXyIfDnIV7nPrXyw023e1Ik.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: 'Rubik'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/rubik-latin-iJWKBXyIfDnIV7nBrXyw023e.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: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/rubik-hebrew-iJWKBXyIfDnIV7nDrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/rubik-latin-ext-iJWKBXyIfDnIV7nPrXyw023e1Ik.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: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/rubik-latin-iJWKBXyIfDnIV7nBrXyw023e.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: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/rubik-hebrew-iJWKBXyIfDnIV7nDrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/rubik-latin-ext-iJWKBXyIfDnIV7nPrXyw023e1Ik.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: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/rubik-latin-iJWKBXyIfDnIV7nBrXyw023e.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: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/rubik-hebrew-iJWKBXyIfDnIV7nDrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/rubik-latin-ext-iJWKBXyIfDnIV7nPrXyw023e1Ik.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: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/rubik-latin-iJWKBXyIfDnIV7nBrXyw023e.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: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/rubik-hebrew-iJWKBXyIfDnIV7nDrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/rubik-latin-ext-iJWKBXyIfDnIV7nPrXyw023e1Ik.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: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/rubik-latin-iJWKBXyIfDnIV7nBrXyw023e.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;}
/* arabic and cyrillic subsets for the Arabic and Russian pages (only fetched when those glyphs appear) */
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/rubik-arabic-iJWKBXyIfDnIV7nErXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/rubik-cyrillic-ext-iJWKBXyIfDnIV7nMrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 300; font-display: swap; src: url(/fonts/rubik-cyrillic-iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/rubik-arabic-iJWKBXyIfDnIV7nErXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/rubik-cyrillic-ext-iJWKBXyIfDnIV7nMrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/rubik-cyrillic-iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/rubik-arabic-iJWKBXyIfDnIV7nErXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/rubik-cyrillic-ext-iJWKBXyIfDnIV7nMrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/rubik-cyrillic-iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/rubik-arabic-iJWKBXyIfDnIV7nErXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/rubik-cyrillic-ext-iJWKBXyIfDnIV7nMrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/rubik-cyrillic-iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/rubik-arabic-iJWKBXyIfDnIV7nErXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/rubik-cyrillic-ext-iJWKBXyIfDnIV7nMrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{ font-family: 'Rubik'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/rubik-cyrillic-iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}

:root{--bg:#08090B;--fg:#F2F3F5;--mute:#8B929E;--dim:#6E7480;--line:#23262E;--panel:#0E1014;--sale:#F04349;--acc-l:#8FE0EA}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{padding-top:var(--promo-h,0px);background:var(--bg);color:var(--fg);font-family:Poppins,Rubik,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.hdr{position:fixed;inset-inline:0;top:var(--promo-h,0px);z-index:900;display:flex;align-items:center;justify-content:space-between;
 gap:24px;padding:16px 5vw;background:rgba(8,9,11,.72);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.hdr.on{border-bottom-color:var(--line);background:rgba(8,9,11,.94)}
/* Out of the way while reading down, back the moment the visitor reaches for it by
   scrolling up. Translated past its own top edge and the promo bar above it, so no sliver
   is left behind. It never hides with the mobile menu open — that would strand the close
   button off screen. */
.hdr{transition:border-color .3s,background .3s,transform .28s cubic-bezier(.2,.7,.3,1)}
.hdr.away{transform:translateY(calc(-100% - var(--promo-h,0px) - 4px))}
.hdr nav{display:flex;gap:30px;font-size:15px;font-weight:500;color:#E4E7EC;letter-spacing:.01em}
.hdr nav a{position:relative;padding-bottom:3px}
.hdr nav a:hover{color:#fff}
.hdr nav a:hover::after{content:'';position:absolute;inset-inline:0;bottom:0;height:1px;background:#fff}
/* the savings link reads as a button, not as one more menu word */
.hdr nav{align-items:center}
.hdr nav a.nav-save{color:#06262A;background:#2FC4CF;border-radius:999px;padding:6px 14px;font-weight:600;
 box-shadow:0 0 0 0 rgba(47,196,207,.5);transition:background .2s,box-shadow .2s}
.hdr nav a.nav-save:hover{background:#8FE0EA;color:#06262A;box-shadow:0 0 0 4px rgba(47,196,207,.18)}
.hdr nav a.nav-save:hover::after{display:none}

.roic-sec{scroll-margin-top:calc(var(--promo-h,0px) + 88px)}
.hdr .logo{height:20px;width:auto;flex:none;object-fit:contain;filter:brightness(0) invert(1);opacity:.95}
.call-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;
 color:#E4E7EC;flex:none}
.call-btn svg{width:21px;height:21px}
.call-btn:hover{color:#fff}
@media(max-width:1180px){.hdr .call-btn,.hdr .call-btn:hover{color:var(--acc-l)}}
.cart-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;
 color:#E4E7EC;border:0;padding:0;flex:none}
.cart-btn svg{width:23px;height:23px}
.cart-btn:hover{color:#fff}
.cart-btn .cnt{position:absolute;top:0;right:-1px;box-sizing:border-box;min-width:17px;height:17px;padding:0 4px;
 border-radius:999px;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;
 font-family:Poppins,Rubik,sans-serif;font-size:10px;font-weight:600;line-height:1}
.cart-btn .cnt[hidden]{display:none}
@media(max-width:1180px){.hdr nav{display:none}}
.hdr nav a{white-space:nowrap}
/* products dropdown */
.nav-dd{position:relative}
.nav-dd-btn{display:flex;align-items:center;gap:5px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0 0 3px}
.nav-dd-btn svg{width:12px;height:12px;transition:transform .2s}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{position:absolute;top:calc(100% + 14px);inset-inline-start:-14px;min-width:210px;padding:8px;border:1px solid var(--line);
 border-radius:14px;background:#0E1014;box-shadow:0 18px 40px rgba(0,0,0,.45);display:none;flex-direction:column;z-index:60}
.nav-dd-menu::before{content:'';position:absolute;inset-inline:0;top:-16px;height:16px}
.nav-dd.open .nav-dd-menu{display:flex}
@media(hover:hover){.nav-dd:hover .nav-dd-menu{display:flex}.nav-dd:hover .nav-dd-btn svg{transform:rotate(180deg)}}
.hdr nav .nav-dd-menu a{padding:8px 12px 8px 10px;border-radius:10px;font-size:15px}
.nav-prod{display:flex !important;align-items:center;gap:12px}
.np-ph{flex:none;width:44px;height:44px;border-radius:10px;background:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center}
.np-ph img{width:100%;height:100%;object-fit:contain}
.nav-dd-menu{min-width:250px}
.hdr nav .nav-dd-menu a:hover{background:rgba(255,255,255,.06)}
.hdr nav .nav-dd-menu a:hover::after{display:none}
.mnav-group{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding:12px 0 6px}
.mnav-gh{font-size:12px;letter-spacing:.14em;color:#8B929E}
.mnav a.mnav-sub{padding:8px 4px;border-bottom:0;font-size:16px}
.mnav a.mnav-sub .np-ph{width:48px;height:48px}
.hdr-right{display:flex;align-items:center;gap:4px}
.burger{display:none;width:40px;height:40px;background:none;border:0;padding:0;cursor:pointer;
 flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:20px;height:1.5px;background:#E4E7EC;
 transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1180px){.burger{display:flex}}
.lead-pop{position:fixed;inset:0;z-index:980;display:flex;align-items:center;justify-content:center;padding:20px}
.lead-pop[hidden]{display:none}
.lead-pop-back{position:absolute;inset:0;background:rgba(2,3,4,.88);backdrop-filter:blur(9px);
 opacity:0;transition:opacity .3s}
.lead-pop.on .lead-pop-back{opacity:1}
.lead-card{position:relative;width:min(820px,100%);max-height:calc(100svh - 32px);
 display:grid;grid-template-columns:1.04fr .96fr;background:#0C0E12;
 border:1px solid rgba(47,196,207,.34);
 border-radius:18px;overflow:hidden;
 box-shadow:0 34px 90px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.05),0 0 60px rgba(47,196,207,.12);
 opacity:0;transform:translateY(16px) scale(.985);transition:opacity .32s,transform .32s cubic-bezier(.2,.7,.3,1)}
.lead-pop.on .lead-card{opacity:1;transform:none}
.lead-form{padding:40px 34px 30px;overflow-y:auto}
/* portrait slice of the living-room frame — the machine whole, the trainer whole.
   The old crop cut straight through both. */
.lead-media{position:relative;background:#14161A center/cover no-repeat;
 background-image:url("/img/lead-portrait.webp")}
.lead-media::after{content:'';position:absolute;inset:0;
 background:linear-gradient(to right,rgba(12,14,18,.55) 0%,transparent 42%,transparent 100%)}
.lead-tag{position:absolute;bottom:16px;right:16px;left:16px;z-index:2;text-align:center;
 background:rgba(8,9,11,.62);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
 border-radius:8px;padding:9px 12px;font-size:12px;color:#EAEDF2}
.lead-x{position:absolute;top:12px;left:12px;z-index:3;width:36px;height:36px;border-radius:50%;
 background:rgba(8,9,11,.82);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.18);
 color:#C6CBD4;font-size:23px;line-height:1;cursor:pointer;transition:color .2s,background .2s}
.lead-x:hover{color:#fff;background:rgba(8,9,11,.85)}
.lead-kick{font-family:Poppins,Rubik,sans-serif;font-size:11px;letter-spacing:.19em;color:var(--acc-l);margin-bottom:13px}
.lead-card h3{font-size:clamp(21px,2.6vw,27px);font-weight:600;letter-spacing:-.025em;line-height:1.28}
.lead-card p{font-size:14.5px;color:var(--mute);line-height:1.85;margin-top:13px}
.lead-card form{display:flex;flex-direction:column;gap:15px;margin-top:24px}
.lf{display:flex;flex-direction:column;gap:7px}
.lf>span{font-size:13px;font-weight:500;color:#CFD4DC;letter-spacing:.01em}
.lf>span i{font-style:normal;font-weight:400;color:var(--dim)}
.lead-card input{background:#1B1F26;border:1px solid #3A414C;border-radius:10px;
 color:#fff;font-family:inherit;font-size:16px;padding:14px 15px;width:100%;
 transition:border-color .18s,box-shadow .18s,background .18s}
.lead-card input::placeholder{color:#7C8494}
.lead-card input:hover{border-color:#4A525E}
.lead-card input:focus{outline:0;background:#20252D;border-color:var(--acc-l);
 box-shadow:0 0 0 3px rgba(143,224,234,.18)}
.lead-card input.bad{border-color:var(--sale);box-shadow:0 0 0 3px rgba(240,67,73,.16)}
.lf .err{font-size:12.5px;color:var(--sale);min-height:1px}
.lead-card .btn{margin-top:4px;width:100%;text-align:center;border-radius:10px;
 padding:16px 34px;font-weight:500}
.lead-msg{font-size:13.5px;line-height:1.7;min-height:1px}
/* readable on a phone in daylight: lighter card, fields that read as fields, reasons to act */
.lead-card{background:linear-gradient(180deg,#151A22 0%,#0E1117 100%)}
.lead-card p{color:#C9CFD7}
.lf>span{color:#EEF1F4}
.lf>span i{color:#AEB5C0}
.lead-card input{background:#262C35;border-color:#56606D}
.lead-card input::placeholder{color:#A3ABB7}
.lead-card input:hover{border-color:#6B7582}
.lead-perks{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.lead-perks li{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#EEF1F4;line-height:1.4}
.lead-perks li::before{content:'';flex:0 0 18px;height:18px;border-radius:50%;
 background:#2FC4CF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306262A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.lead-card .btn{background:#2FC4CF;border-color:#2FC4CF;color:#06262A;font-weight:600;
 box-shadow:0 10px 28px rgba(47,196,207,.28)}
.lead-card .btn:hover{background:#8FE0EA;border-color:#8FE0EA;color:#06262A}
.lead-fine{color:#AEB5C0}
.lead-fine{font-size:13px;color:var(--dim);margin-top:18px}
.lead-trust{margin-top:14px;font-size:12.5px;letter-spacing:.02em;color:#AEB5C0;
 display:flex;align-items:center;gap:8px}
.lead-trust::before{content:'';flex:0 0 14px;height:14px;border-radius:3px;background:var(--acc-l);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.4c0 4.3-3 8.3-7.5 9.6-4.5-1.3-7.5-5.3-7.5-9.6V6z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.4c0 4.3-3 8.3-7.5 9.6-4.5-1.3-7.5-5.3-7.5-9.6V6z'/%3E%3C/svg%3E") center/contain no-repeat}
.lead-fine a{text-decoration:underline}
@media(max-height:760px) and (min-width:721px){
  .lead-card{grid-template-columns:1fr !important;grid-template-rows:auto !important}
  .lead-media{display:none}
}
@media(max-height:760px) and (max-width:720px){
  /* scoped under .lead-pop so it wins over the general phone rule that follows */
  .lead-pop .lead-card{grid-template-rows:minmax(0,1fr)}
  .lead-pop .lead-form{padding:16px 18px 16px}
  .lead-pop .lead-kick{margin-bottom:8px}
  .lead-pop .lead-card h3{font-size:19px}
  .lead-pop .lead-card p{font-size:13px;line-height:1.6;margin-top:6px}
  .lead-pop .lf>span{font-size:12.5px}
  .lead-pop .lead-perks{margin-top:10px;gap:5px 12px}
  .lead-pop .lead-card form{gap:9px;margin-top:12px}
  .lead-pop .lead-card input{padding:10px 12px}
  .lead-pop .lead-card .btn{padding:14px 20px}
  .lead-pop .lead-fine{margin-top:10px}
}
@media(max-height:760px){
  .lead-form{padding:22px 20px 20px}
  .lead-card h3{font-size:20px}
  .lead-card p{font-size:13.5px;line-height:1.7;margin-top:9px}
  .lead-card form{gap:11px;margin-top:16px}
  .lead-card input{padding:11px 13px}
  .lead-fine{margin-top:12px}
}
@media(max-width:720px){
  /* the form row may shrink and scroll, so the button can never fall off a short screen.
     The media row is gone on phones: it was 132px tall and held a 830x1024 portrait in
     cover, so it showed a horizontal slice of a vertical photograph — not a picture, and
     132px that the form needed more. A lead dialog has one job and decoration is not it. */
  .lead-card{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .lead-media{display:none}
  .lead-form{min-height:0}
  .lead-perks li{font-size:13px}
  .lead-form{grid-row:1;padding:26px 20px 22px}
  .lead-card h3{font-size:20px}
  .lead-card p{font-size:13.5px;margin-top:10px}
}
/* A period brings its own pictures: the tall one fills the desktop panel, and on phones a
   landscape one earns the row back. The note above still holds — what did not work was a
   horizontal slice of a vertical photograph, not a picture on a phone. */
.lead-card.has-camp .lead-media{background-image:var(--pop-tall)}
@media(max-width:720px){
  .lead-card.has-wide{grid-template-rows:auto minmax(0,1fr)}
  .lead-card.has-wide .lead-media{display:block;grid-row:1;aspect-ratio:16/9;
   max-height:38svh;background-image:var(--pop-wide)}
  /* the desktop scrim runs left-to-right; across a wide band it reads from the bottom */
  .lead-card.has-wide .lead-media::after{
   background:linear-gradient(to bottom,transparent 40%,rgba(12,14,18,.55) 100%)}
  .lead-card.has-wide .lead-form{grid-row:2}
  /* With the picture taking a row, the card has to land inside the screen without a scroll:
     a lead form that scrolls hides its own button. Everything below is tightened by rank —
     the button, the phone field and the title keep their weight; the small print goes. */
  .lead-card.has-wide .lead-form{padding:15px 18px 15px}
  .lead-card.has-wide .lead-kick{margin-bottom:5px;font-size:10.5px}
  .lead-card.has-wide h3{font-size:18px}
  .lead-card.has-wide p{font-size:12.5px;line-height:1.5;margin-top:6px}
  .lead-card.has-wide .lead-perks{margin-top:8px;gap:4px 10px}
  .lead-card.has-wide .lead-perks li{font-size:11.5px}
  .lead-card.has-wide .lead-trust{margin-top:8px;padding-top:0;font-size:11px}
  .lead-card.has-wide .lead-fine{display:none}   /* the phone sits in the header anyway */
  .lead-card.has-wide form{gap:8px;margin-top:10px}
  .lead-card.has-wide .lf>span{font-size:11.5px}
  .lead-card.has-wide input{padding:9px 11px}
  .lead-card.has-wide .btn{margin-top:2px;padding:12px}
}
/* Short phones need about 60px more. They come off the bottom of the ranking — the trust
   line and the tail of the paragraph — never off the picture, the fields or the button. */
@media(max-height:720px) and (max-width:720px){
  .lead-pop .lead-card.has-wide .lead-form{padding:11px 18px 11px}
  .lead-pop .lead-card.has-wide .lead-trust{display:none}
  .lead-pop .lead-card.has-wide p{display:-webkit-box;-webkit-line-clamp:2;
   -webkit-box-orient:vertical;overflow:hidden}
  .lead-pop .lead-card.has-wide form{gap:6px;margin-top:8px}
  .lead-pop .lead-card.has-wide .lead-perks{margin-top:7px}
  /* the last 16px come from the gap around the card, not from anything inside it */
  .lead-pop .lead-card.has-wide{max-height:calc(100svh - 16px)}
}
.mnav-back{position:fixed;inset:0;background:rgba(8,9,11,.62);backdrop-filter:blur(3px);
 z-index:958;opacity:0;transition:opacity .25s}
.mnav-back.on{opacity:1}
.mnav-back[hidden],.mnav[hidden]{display:none}
.mnav{position:fixed;top:0;bottom:0;right:0;width:min(86vw,330px);z-index:960;background:#0B0D11;
 border-inline-start:1px solid var(--line);box-shadow:-18px 0 46px rgba(0,0,0,.5);
 padding:calc(var(--promo-h,0px) + 84px) 24px 40px;overflow-y:auto;
 display:flex;flex-direction:column;
 transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.mnav.on{transform:translateX(0)}
.mnav a{font-size:17px;padding:16px 0;border-bottom:1px solid var(--line);color:#E4E7EC}
.mnav a:hover{color:#fff}
.mnav a.btn{border-bottom:0}
.mnav{padding-top:calc(var(--promo-h,0px) + 76px);padding-bottom:28px;gap:0}
.mnav .mnav-card{display:flex;align-items:center;gap:14px;padding:12px;margin-bottom:6px;border:1px solid rgba(47,196,207,.38);
 border-radius:16px;background:linear-gradient(135deg,rgba(47,196,207,.16),rgba(47,196,207,.03))}
.mnav .mnav-card img{width:62px;height:62px;border-radius:12px;background:#fff;object-fit:contain;flex:none}
.mnav .mnav-card b{display:block;font-size:17px;font-weight:600;color:#fff}
.mnav .mnav-card small{display:block;font-size:13px;color:#BFEFF3;margin-top:3px}
.mnav .mnav-card em{display:inline-block;font-style:normal;font-size:13.5px;font-weight:600;color:#8FE0EA;margin-top:5px}
.mnav .mnav-card em::after{content:' ←'}
.mnav-links{display:flex;flex-direction:column}
.mnav .mnav-links a{display:flex;align-items:center;justify-content:space-between;font-size:17px;padding:15px 2px;
 border-bottom:1px solid var(--line);color:#EEF1F4}
.mnav .mnav-links a::after{content:'‹';font-size:22px;line-height:1;color:#5A616E}
.mnav .mnav-links a.nav-save{color:#8FE0EA;font-weight:600}
.mnav .mnav-links a.nav-save::after{content:'₪';font-size:13px;font-weight:700;color:#06262A;background:#2FC4CF;
 width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.mnav-cta{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;gap:10px}
.mnav .mnav-go{display:block;text-align:center;background:#2FC4CF;color:#06262A;font-weight:600;font-size:16px;
 border-radius:12px;padding:15px 12px;border:0;box-shadow:0 10px 26px rgba(47,196,207,.25)}
.mnav-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mnav .mnav-wa,.mnav .mnav-call{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;
 padding:13px 10px;font-size:15px;font-weight:600;border:0}
.mnav .mnav-wa{background:#25D366;color:#062B14}
.mnav .mnav-wa svg{width:19px;height:19px;fill:#062B14}
.mnav .mnav-call{background:#1B1F26;color:#EEF1F4;border:1px solid #3A414C}
.mnav .mnav-call svg{width:18px;height:18px;color:#8FE0EA}
.mnav-trust{font-size:12.5px;color:#AEB5C0;text-align:center;margin-top:2px}
@media(min-width:1181px){.mnav,.mnav-back{display:none!important}}

.bnr{position:relative;width:100%;overflow:hidden}
.bnr-wrap{padding:clamp(72px,10vh,132px) clamp(24px,3.6vw,56px)}
.bnr.inset{border-radius:4px;width:100%;margin:0}
@media(max-width:749px){.bnr-wrap{padding:44px 16px}}
.bnr picture,.bnr img{width:100%;height:auto}
.bnr img{aspect-ratio:var(--ar-d);object-fit:cover}
@media(max-width:749px){.bnr img{aspect-ratio:var(--ar-m)}}
.bnr-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 55%,rgba(8,9,11,calc(var(--scrim)*1.1)) 100%)}
.bnr:has(.side-right) .bnr-scrim{background:
 linear-gradient(to left,rgba(8,9,11,calc(var(--scrim)*1.6)) 0%,rgba(8,9,11,calc(var(--scrim)*.45)) 46%,transparent 72%)}
.bnr:has(.side-left) .bnr-scrim{background:
 linear-gradient(to right,rgba(8,9,11,calc(var(--scrim)*1.75)) 0%,rgba(8,9,11,calc(var(--scrim)*1.15)) 30%,
 rgba(8,9,11,calc(var(--scrim)*.4)) 55%,transparent 78%)}
.bnr:has(.side-left) .bnr-copy .bnr-h,.bnr:has(.side-left) .bnr-copy .bnr-p{text-shadow:0 2px 18px rgba(0,0,0,.6)}
/* The hero's own shade, desktop only. The side-left wash darkens 40% of the frame's width
   to protect one block of type, and on a clip that swings from 22 to 238 luma behind the
   headline it has to be set for the brightest frame — which leaves every other frame
   needlessly dim. Measured across all 300 frames: the broad wash needs 0.34 to hold the
   headline above AA at 238, and at 0.20 the worst frame falls to 2.8:1.
   So the shade stops being a wash and becomes a pool: an ellipse sitting on the copy, hard
   in the middle and gone by three quarters out. The type gets more cover than it had, the
   room, the pool and the planting get almost none, and the clip finally looks lit. */
@media(min-width:750px){
  main > .bnr:first-child:has(.side-left) .bnr-scrim{background:
    radial-gradient(ellipse 62% 58% at 20% 54%,
      rgba(8,9,11,.80) 0%, rgba(8,9,11,.62) 38%, rgba(8,9,11,.26) 62%, transparent 78%),
    linear-gradient(to right, rgba(8,9,11,.26) 0%, rgba(8,9,11,.12) 40%, transparent 70%)}
}
/* A light edge sweeps the frame and the room changes behind it. Both frames were
   rendered from the same source, so the athlete and the machine do not move a pixel —
   only the environment does. That stillness is what sells the effect. */
.bnr .alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;
 clip-path:inset(0 0 0 100%);animation:bnrwipe 15s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bnrwipe{0%,10%{clip-path:inset(0 0 0 100%)}45%,62%{clip-path:inset(0 0 0 0)}
 97%,100%{clip-path:inset(0 0 0 100%)}}
.bnr .bnr-edge{position:absolute;top:0;bottom:0;width:2px;z-index:3;pointer-events:none;opacity:0;
 background:linear-gradient(180deg,transparent,#8FE0EA 22%,#CFF3F8 50%,#8FE0EA 78%,transparent);
 box-shadow:0 0 28px 8px rgba(143,224,234,.40);
 animation:bnredge 15s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bnredge{0%,10%{right:0;opacity:0}14%{opacity:1}
 45%{right:100%;opacity:1}51%,62%{right:100%;opacity:0}
 66%{right:100%;opacity:1}97%{right:0;opacity:1}99%,100%{right:0;opacity:0}}
@media(prefers-reduced-motion:reduce){.bnr .alt{animation:none;clip-path:inset(0 0 0 100%)}
 .bnr .bnr-edge{display:none}}
@media(max-width:749px){.bnr .bnr-edge{display:none}}
@media(prefers-reduced-motion:reduce){.bnr .alt{animation:none;opacity:0}}
@media(max-width:749px){.bnr .alt{display:none}}
.bnr .bnr-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
 display:flex;gap:9px;z-index:4}
.bnr .bnr-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.34);
 box-shadow:0 1px 4px rgba(0,0,0,.5);
 animation-duration:15s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.bnr .bnr-dots i:nth-child(1){animation-name:dotOne}
.bnr .bnr-dots i:nth-child(2){animation-name:dotTwo}
@keyframes dotOne{0%,28%{background:#fff}45%,62%{background:rgba(255,255,255,.34)}100%{background:#fff}}
@keyframes dotTwo{0%,28%{background:rgba(255,255,255,.34)}45%,62%{background:#fff}100%{background:rgba(255,255,255,.34)}}
@media(prefers-reduced-motion:reduce){.bnr .bnr-dots{display:none}}
@media(max-width:749px){.bnr .bnr-dots{display:none}}
.bnr-copy{position:absolute;top:0;bottom:0;z-index:3;display:flex;flex-direction:column;justify-content:center;
 align-items:flex-start;padding:0 calc(clamp(28px,4vw,68px) + var(--edge,0px));width:calc(min(560px,46%) + var(--edge,0px));text-align:start}
.bnr:not(.inset) .bnr-copy{--edge:50px}
.bnr-copy.side-right{right:0}
.bnr-copy.side-left{left:0}
.bnr-copy.bare.side-left{left:0;right:auto}
/* There used to be a 200px left inset here, reserving the bottom-left corner for the
   docked clip. That clip was replaced by the buy bar and #fv no longer renders on any
   page, so the inset was only squeezing every left-hand headline into a column narrow
   enough to break three words onto three lines. Left copy now measures the same as
   right copy, which is what it should always have been. */
/* artwork already carries its headline — the CTA tucks under it, same side, same rhythm */
.bnr-copy.bare{top:var(--bare-top,68%);bottom:auto;justify-content:flex-start;width:auto;
 padding:0 0 0 var(--bare-left,18%)}
@media(max-width:749px){
  .bnr-copy,.bnr-copy.bare{position:static;width:auto;padding:20px 7vw 26px;justify-content:flex-start;top:auto}
  .bnr:not(.inset) .bnr-copy{--edge:16px;padding-left:calc(7vw + 16px);padding-right:calc(7vw + 16px)}
  .bnr-copy.bare{padding-top:16px}
  /* The rule above is why the side scrims have to go here too: on a phone the copy is
     static and sits UNDER the artwork, never beside it, so a gradient that paints one
     side black is darkening the picture to protect text that is not there. The hero was
     the worst of it at 0.91 down its left edge. What stays is a short fade at the very
     bottom, which only settles the image into the page. Cards inside .stk keep their own
     stronger fade — there the copy really is overlaid, and that rule carries !important. */
  .bnr-scrim,
  .bnr:has(.side-right) .bnr-scrim,
  .bnr:has(.side-left) .bnr-scrim{
    background:linear-gradient(180deg,transparent 62%,rgba(8,9,11,calc(var(--scrim,.34) * .9)) 100%)}
}
.kicker{font-family:Poppins,Rubik,sans-serif;font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--mute);margin-bottom:14px}
.bnr-h{font-size:clamp(26px,4.4vw,60px);font-weight:500;letter-spacing:-.03em;line-height:1.12}
.bnr-p{font-size:clamp(14px,1.5vw,19px);color:#C6CBD4;margin-top:14px;font-weight:300}
/* the stat rail: hairlines and small-caps labels, borrowed from the column's own
   engraved R-scale. The rule sits between figures, never before the first one. */
/* The figures, off the photograph and onto the page. Two columns on a wide screen so the
   rail sits beside the sentence it belongs to rather than under it. */
.statstrip{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,5vw,80px);align-items:center}
.ss-h{font-size:clamp(23px,3.2vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.16}
.ss-p{font-size:clamp(14px,1.5vw,18px);color:var(--mute);line-height:1.75;margin-top:14px;max-width:52ch}
.statstrip .ss-rail{margin-top:0}
.statstrip .ss-rail .n{text-shadow:none}
.statstrip .ss-rail .l{text-shadow:none}
@media(max-width:860px){.statstrip{grid-template-columns:1fr;gap:26px}
 .statstrip .ss-rail{padding-inline-start:0}}
/* The awards, as text. Same hairline-and-small-caps register as the stat rail, so the
   page has one way of presenting a figure rather than two. */
/* The folding sequence. Deliberately the one light block on the site — a dark page needs
   somewhere to breathe, and a spec sequence is the place where white is correct rather
   than merely brighter. Full-bleed so it reads as a change of chapter, not a card. */
.foldseq{background:#F2F3F5;color:#14171C;width:100vw;margin-inline:calc(50% - 50vw);
 padding:clamp(56px,8vh,96px) 6vw}
.foldseq .kicker{color:#6E7480}
.fs-top{max-width:760px;margin-inline:auto;text-align:center}
.fs-h2{font-size:clamp(23px,3.4vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.18;color:#0B0D11}
.fs-p{font-size:clamp(14px,1.5vw,17px);color:#4A515C;line-height:1.75;margin-top:14px}
.fs-row{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.4vw,30px);
 margin:clamp(34px,5vh,56px) auto 0;max-width:1120px;padding:0}
.fs-row li{text-align:center}
.fs-row img{width:100%;aspect-ratio:4/5;object-fit:contain;background:#fff;border-radius:14px;
 border:1px solid #E1E4E8}
.fs-n{font-size:11px;letter-spacing:.2em;color:#9AA1AC;margin-top:16px}
.fs-t{font-size:clamp(15px,1.7vw,19px);font-weight:500;color:#0B0D11;margin-top:6px}
.fs-d{font-size:12.5px;color:#6E7480;margin-top:5px;line-height:1.55}
/* three across on a phone is 105px each, so every pixel of gutter matters more than the
   margin does — the row is the point and the progression has to stay side by side. */
@media(max-width:749px){.foldseq{padding:46px 4vw 40px}.fs-row{gap:6px}
 .fs-row img{border-radius:10px}.fs-n{margin-top:10px;font-size:10px;letter-spacing:.14em}
 .fs-t{margin-top:4px}.fs-d{font-size:10.5px;margin-top:3px}}
/* The reviewer strip. Thumbnails come from YouTube's own CDN, which sets no cookie and
   needs no embed — an iframe per card would load a player and a tracker for six videos
   nobody has asked to watch yet. */
/* auto-fit chose whatever number of columns fitted — 5 for 8 cards — and left the last row
   with two empty cells and a hole beside it. The column counts here all divide the 8 cards
   exactly, so every row is full at every width. Changing how many reviews there are means
   revisiting these numbers: they have to divide the new count. */
.revgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.8vw,22px);margin-top:46px}
@media(min-width:560px){.revgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.revgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.rev{display:block;position:relative}
.rev-th{position:relative;display:block;border-radius:14px;overflow:hidden;background:#000;
 border:1px solid var(--line);aspect-ratio:16/9}
/* Partly desaturated at rest, full colour on hover. Deliberately partial: these thumbnails
   carry yellow arrows and shouted capitals that fight a quiet page, but they are third
   party proof and their worth comes from looking like what they are. Pushed all the way to
   monochrome and brand cyan they would read as artwork we commissioned, which is exactly
   the credibility being borrowed. 55% is enough to calm them and still look like YouTube. */
.rev-th img{width:100%;height:100%;object-fit:cover;
 filter:grayscale(.55) saturate(.8) brightness(.88) contrast(1.04);
 transition:transform .4s cubic-bezier(.22,1,.36,1),filter .4s ease}
.rev:hover .rev-th img,.rev:focus-visible .rev-th img{transform:scale(1.045);filter:none}
@media(prefers-reduced-motion:reduce){.rev-th img{transition:filter .2s ease}}
.rev-play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
 background:rgba(8,9,11,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.26);
 display:flex;align-items:center;justify-content:center;transition:background .25s}
.rev:hover .rev-play{background:rgba(8,9,11,.85)}
.rev-play svg{width:20px;height:20px;fill:#fff;margin-inline-start:2px}
.rev-dur{position:absolute;bottom:8px;inset-inline-end:8px;background:rgba(8,9,11,.82);
 color:#EAEDF2;font-size:11px;padding:2px 6px;border-radius:5px;letter-spacing:.02em}
.rev-who{display:block;font-size:15px;font-weight:500;color:var(--fg);margin-top:13px}
.rev-meta{display:block;font-size:12.5px;color:var(--dim);margin-top:4px}
.awards{text-align:center}
.aw-h{font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--mute);margin-bottom:26px}
.aw-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,4vw,58px)}
.aw{position:relative;padding-inline:clamp(10px,2vw,29px)}
.aw + .aw::before{content:'';position:absolute;inset-block:4px;inset-inline-start:0;width:1px;
 background:linear-gradient(180deg,transparent,rgba(242,243,245,.22) 30%,rgba(242,243,245,.22) 70%,transparent)}
.aw-n{font-size:clamp(22px,2.8vw,32px);font-weight:300;letter-spacing:-.02em;line-height:1.1;color:var(--fg)}
.aw-l{font-size:11px;letter-spacing:.12em;color:var(--dim);margin-top:9px}
@media(max-width:749px){.aw-row{gap:14px}.aw{padding-inline:7px}.aw-l{font-size:10px;letter-spacing:.06em}}
.bnr-rail{display:flex;flex-wrap:wrap;gap:clamp(16px,2.6vw,38px);margin-top:clamp(22px,2.6vw,34px)}
.bnr-rail .u{position:relative}
.bnr-rail .u + .u{padding-inline-start:clamp(16px,2.6vw,38px)}
.bnr-rail .u + .u::before{content:'';position:absolute;inset-block:3px 3px;inset-inline-start:0;
 width:1px;background:linear-gradient(180deg,transparent,rgba(242,243,245,.28) 30%,rgba(242,243,245,.28) 70%,transparent)}
.bnr-rail .n{font-size:clamp(30px,3.6vw,48px);font-weight:200;letter-spacing:-.035em;line-height:1;
 text-shadow:0 2px 18px rgba(0,0,0,.55)}
.bnr-rail .n span{font-size:.4em;font-weight:400;color:var(--acc-l);margin-inline-start:5px;letter-spacing:.04em}
.bnr-rail .l{font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--mute);margin-top:9px;
 text-shadow:0 2px 14px rgba(0,0,0,.6)}
/* the two round buttons float over the bottom-right of every page, which is exactly where
   the last figure in the rail lands on a phone — "185" was sitting behind WhatsApp */
@media(max-width:749px){.bnr-rail{gap:14px}
 .bnr-rail .u + .u{padding-inline-start:14px}
 /* the rail runs right-to-left, so its first figure lands under the two floating buttons.
    Reserving the gutter on the right — inline-START in RTL — is what moves it clear. */
 .bnr-rail{padding-inline-start:66px}}
.btn{display:inline-block;margin-top:26px;padding:15px 34px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-size:15px;font-family:inherit;cursor:pointer;transition:opacity .25s}
.btn:disabled{opacity:.45;cursor:default}
.btn:hover{opacity:.85}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}
.btn.link{background:transparent;border:0;padding:0;margin-top:22px;color:#8FE0EA;font-size:16px;font-weight:400;
 display:inline-flex;align-items:center;gap:7px}
.btn.link::after{content:'›';font-size:21px;line-height:0;transform:scaleX(-1) translateY(-1px)}
/* on left-to-right pages the arrows and chevrons point the other way */
[dir=ltr] .btn.link::after{transform:translateY(-1px)}
[dir=ltr] .mnav .mnav-links a::after{content:'›'}
[dir=ltr] .mnav .mnav-card em::after{content:' →'}
.btn.link:hover{opacity:1;color:#fff}

.sec{padding:clamp(80px,12vh,152px) 6vw;border-top:1px solid var(--line)}

.vstrip{position:relative;width:100%;background:#0B0D11}
.vs-box{position:relative;width:100%;aspect-ratio:16/9;max-height:86vh;overflow:hidden}
.vs-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Measured 2026-10-02: the old ramp (1.7x at the edge, transparent only at 78%) left the
   picture at luminance 28 of 255 behind the copy and 80 at mid-frame — most of the
   photograph was simply painted out. Pulled back, and pulled in to 64%, so the left third
   of every strip is clean image. The copy keeps its text-shadow, which is what actually
   guarantees legibility over a moving frame. */
.vs-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to left,
 rgba(8,9,11,calc(var(--vscrim,.46) * 1.42)) 0%,rgba(8,9,11,calc(var(--vscrim,.46) * .58)) 38%,transparent 64%)}
.vs-copy{position:absolute;top:0;bottom:0;right:0;z-index:3;width:min(620px,58%);
 display:flex;flex-direction:column;justify-content:center;padding:0 clamp(26px,5vw,80px)}
.vs-copy .kicker{margin-bottom:12px}
.vs-copy h2{font-size:clamp(23px,3.6vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1.14;
 text-shadow:0 2px 20px rgba(0,0,0,.6)}
.vs-copy p{font-size:clamp(14px,1.5vw,18px);color:#D2D7DE;margin-top:14px;line-height:1.75;
 max-width:46ch;text-shadow:0 2px 16px rgba(0,0,0,.55)}
@media(max-width:860px){
  .vs-box{aspect-ratio:4/3;max-height:none}
  /* on a phone the old ramp started at 22% and reached .92 — the bottom three quarters of
     every strip was effectively black. The copy sits in the last third, so that is where
     the cover belongs. */
  .vs-scrim{background:linear-gradient(180deg,transparent 40%,rgba(8,9,11,.52) 64%,rgba(8,9,11,.88) 100%)}
  .vs-copy{top:auto;bottom:0;left:0;width:auto;justify-content:flex-end;padding:0 24px 28px}
}

/* the hero still paints its still image first — that stays the LCP element — and the
   clip fades in over it once it has enough buffered to play smoothly */
.bnr-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
 opacity:0;transition:opacity .28s linear;pointer-events:none}
.bnr-vid.on{opacity:1}
@media(max-width:749px){
  /* full screen on a phone. svh rather than vh so the browser chrome collapsing
     doesn't make the hero jump. */
  main > .bnr:first-child{height:calc(100svh - var(--promo-h,0px));min-height:520px}
  main > .bnr:first-child picture,
  main > .bnr:first-child img{height:100%;object-fit:cover}
  main > .bnr:first-child picture{position:absolute;inset:0;display:block;width:100%}
  main > .bnr:first-child img{aspect-ratio:auto}
  /* The hero's headline was invisible on every phone, on every page that has one.
     Below 749px .bnr-copy turns static so that on an ordinary band it sits UNDER the
     picture in the flow — but the FIRST banner on a page is 100svh with its <picture>
     absolutely positioned, and static content paints beneath positioned siblings. So
     the copy was laid out at the top of the hero and then covered by the photograph:
     a full-screen image and no words. Found on /technology.html, reproduced on
     /shipping.html, and it applies to every page whose hero carries a title.
     The copy goes back on top of the picture, anchored to the foot of the hero where
     the bottom fade already darkens the frame, and clear of the two round buttons. */
  main > .bnr:first-child{display:flex;flex-direction:column;justify-content:flex-end}
  /* phone keeps the bottom fade; the pool of shade below is desktop only */
  /* 160px is measured, not guessed: the call button's top edge is 672px down an 812px
     viewport and the sub-line was landing behind it. */
  main > .bnr:first-child .bnr-copy{position:relative;z-index:3;padding-bottom:160px}
  /* and the shared bottom fade is tuned for a band with nothing on it — under real type
     it leaves about .15 of cover at the headline. This one carries words, so it gets a
     fade that actually starts above them. */
  main > .bnr:first-child .bnr-scrim{
    background:linear-gradient(180deg,transparent 30%,rgba(8,9,11,.5) 58%,rgba(8,9,11,.84) 100%)}
}
.vs-por{position:relative;aspect-ratio:3/4;background:#0B0D11}
.vs-por video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.vmain-sec{border-top:0}
.vmain-sec.vmain-first{border-top:1px solid var(--line)}
/* Full-bleed, like every other strip on the page. It used to sit in a 1180px rounded box:
   measured at a 1440px viewport that was 1084px wide against 1425px for the video strips
   and the image bands either side of it, so the one piece of film we most want watched was
   the one inset by 178px a side. The play overlay is the affordance now, not the frame.
   object-fit is cover rather than contain — all four clips are exactly 16:9 so nothing is
   cropped today, and cover means a future clip that is not 16:9 fills the strip instead of
   opening black bars inside it. */
/* -6vw cancels the 6vw that .sec puts on both sides, so the frame reaches the edges while
   the heading and body above it keep the section's own measure. */
.vmain{max-width:none;margin:38px -6vw 0;padding:0}
.vmain-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0B0D11}
.vmain-frame video,.vmain-frame iframe,.vmain-poster{position:absolute;inset:0;width:100%;height:100%;
 border:0;object-fit:cover;background:#000;display:block}
.vmain-play{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:16px;background:rgba(8,9,11,.3);
 border:0;cursor:pointer;color:#fff;font-family:inherit;transition:background .25s}
.vmain-play:hover{background:rgba(8,9,11,.16)}
.vmain-play[hidden]{display:none!important}
.vs-play{border-radius:inherit}
.vs-play .ring{width:clamp(54px,5vw,70px);height:clamp(54px,5vw,70px)}
.vmain-play .ring{width:clamp(62px,7vw,88px);height:clamp(62px,7vw,88px);border-radius:50%;
 background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;
 transition:transform .25s}
.vmain-play .ring svg{width:38%;height:38%;fill:#08090B;display:block}
.vmain-play:hover .ring{transform:scale(1.08)}
.vmain-play .lbl{font-size:14.5px;letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* ── articles ─────────────────────────────────────────────────────────────
   The brand's line here is not neutral: AEKE argues it is the better machine.
   What keeps that from reading as noise is that every claim is followed by a
   number from a spec sheet or a link to someone outside the company. */
.art-hero{padding:calc(6vh + 74px) 6vw 0;max-width:900px;margin-inline:auto}
.art-hero .kicker{margin-bottom:14px}
.art-hero h1{font-size:clamp(28px,4.4vw,54px);font-weight:600;letter-spacing:-.03em;line-height:1.12}
.art-hero .deck{font-size:clamp(16px,1.8vw,20px);color:#C6CBD4;line-height:1.8;margin-top:20px}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;font-size:13.5px;color:var(--dim)}
.art-meta b{color:#9AA1AD;font-weight:400}
.art-fig{max-width:1120px;margin:clamp(34px,5vh,56px) auto 0;padding:0 6vw}
.art-fig img{width:100%;height:auto;display:block;border-radius:16px;border:1px solid var(--line)}
.art{max-width:760px;margin-inline:auto;padding:0 6vw}
.art h2{font-size:clamp(23px,2.9vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.2;
 margin-top:clamp(44px,6vh,72px)}
.art h3{font-size:clamp(18px,2vw,23px);font-weight:600;margin-top:34px}
.art p{font-size:17px;color:#C6CBD4;line-height:1.95;margin-top:18px}
.art ul{margin-top:18px;padding-inline-start:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.art ul li{display:flex;gap:12px;font-size:16.5px;color:#C6CBD4;line-height:1.75}
.art ul li::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;background:var(--acc-l);margin-top:11px}
.art strong{color:var(--fg);font-weight:600}
.art a{color:var(--acc-l);text-decoration:underline;text-underline-offset:3px}
.tldr{border:1px solid var(--line);border-radius:16px;background:var(--panel);
 padding:clamp(22px,3vw,32px);margin-top:clamp(34px,5vh,52px)}
.tldr .t{font-size:12px;letter-spacing:.18em;color:var(--acc-l);font-family:Poppins,Rubik,sans-serif}
.tldr ul{margin-top:16px}
.toc{border-inline-start:2px solid var(--line);padding-inline-start:20px;margin-top:34px}
.toc a{display:block;font-size:15px;color:#9AA1AD;text-decoration:none;padding:6px 0}
.toc a:hover{color:var(--acc-l)}
.pull{border-inline-start:3px solid var(--acc-l);padding:6px 22px;margin-top:34px}
.pull p{font-size:clamp(18px,2.1vw,24px);color:var(--fg);line-height:1.6;font-weight:500;margin:0}
.pull cite{display:block;font-style:normal;font-size:14px;color:var(--dim);margin-top:12px}
/* The break-even calculator inside a cost article. It answers with the reader's own
   numbers rather than ours, which is the only version of this argument worth making. */
/* gym-vs-home chart (product page and home page) */
.roic{max-width:1000px;margin:0 auto;border:1px solid var(--line);border-radius:18px;background:var(--panel);
 padding:clamp(22px,3vw,40px)}
.roic-head h2{font-size:clamp(24px,3.4vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-top:10px}
.roic-head h2 b{color:#8FE0EA;font-weight:600}
.roic-head p{font-size:clamp(16px,1.9vw,21px);color:#DDE1E6;margin-top:10px;line-height:1.6}
.roic-head p b{color:#fff;font-weight:600}
.roic-svg{margin-top:22px;min-height:240px}
.roic-svg svg{width:100%;height:auto;display:block;overflow:visible}
.roic-legend{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:14px;font-size:14px;color:#DDE1E6}
.roic-legend i{display:inline-block;width:18px;height:4px;border-radius:2px;margin-inline-end:8px;vertical-align:middle}
.roic-legend i.gym{background:#F2757A}
.roic-legend i.home{background:#2FC4CF}
.roic-time{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 14px;border-radius:12px;
 background:rgba(47,196,207,.08);border:1px solid rgba(47,196,207,.25);font-size:clamp(14.5px,1.6vw,17px);color:#DDE1E6;line-height:1.5;width:fit-content;max-width:100%}
.roic-time svg{flex:none;width:22px;height:22px;fill:none;stroke:#8FE0EA;stroke-width:2;stroke-linecap:round}
.roic-time b{color:#fff;font-weight:600}
.roic-note{font-size:12.5px;color:#AEB5C0;line-height:1.75;margin-top:12px}
.roic .btn{margin-top:18px}
/* language switcher: a globe in the header, a row of chips in the phone menu */
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;height:40px;padding:0 10px;border:0;border-radius:999px;background:transparent;
 color:var(--fg);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.lang-btn svg{width:19px;height:19px}
.lang-btn:hover{background:rgba(255,255,255,.06)}
.lang-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;min-width:150px;padding:6px;border:1px solid var(--line);
 border-radius:12px;background:#0E1014;box-shadow:0 18px 40px rgba(0,0,0,.45);z-index:60;display:flex;flex-direction:column}
.lang-menu[hidden]{display:none}
.lang-opt{padding:9px 12px;border-radius:8px;color:#DDE1E6;text-decoration:none;font-size:14.5px}
.lang-opt:hover{background:rgba(255,255,255,.06)}
.lang-opt[aria-current]{color:var(--acc-l);font-weight:600}
.mnav .mnav-lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.mnav a.mlang{flex:1 1 auto;text-align:center;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:#DDE1E6;text-decoration:none;font-size:14px;line-height:1.2}
.mnav a.mlang[aria-current]{border-color:var(--acc-l);color:var(--acc-l)}
.lang-note{margin:14px 0 0;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:#C6CBD4;font-size:14px;line-height:1.6}
/* phones and tablets keep the globe in the header too, as a compact button */
@media (max-width:1180px){.lang-btn{padding:0 6px;gap:4px;font-size:12px}.lang-btn svg{width:18px;height:18px}}
.calc{border:1px solid var(--line);border-radius:16px;background:var(--panel);
 padding:26px 24px 20px;margin-top:30px}
.calc-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.calc-row label{font-size:14.5px;color:#CFD4DC;flex:1}
.calc-row input{width:130px;flex:none;background:#1B1F26;border:1px solid #3A414C;border-radius:9px;
 color:#fff;font-family:inherit;font-size:16px;padding:11px 13px;text-align:center;outline:none;
 transition:border-color .18s,box-shadow .18s}
.calc-row input:focus{border-color:var(--acc-l);box-shadow:0 0 0 3px rgba(143,224,234,.18)}
.calc-out{border-top:1px solid var(--line);margin-top:20px;padding-top:20px}
.calc-out .big{font-size:clamp(24px,3.2vw,34px);font-weight:500;letter-spacing:-.025em;color:var(--acc-l)}
.calc-out .sub{font-size:14px;color:var(--mute);margin-top:5px}
.calc-out .cmp-line{font-size:14.5px;color:#C6CBD4;margin-top:14px;line-height:1.7}
.calc-out b{color:var(--fg);font-weight:500}
.calc-note{font-size:12.5px;color:var(--dim);line-height:1.7;margin-top:16px}
@media(max-width:520px){.calc-row{flex-wrap:wrap;gap:8px}.calc-row input{width:100%}}
.says{display:grid;gap:14px;margin-top:26px}
.say{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--panel)}
.say q{display:block;font-size:16.5px;color:#D2D7DE;line-height:1.8;quotes:none}
.say .src{display:block;font-size:13.5px;color:var(--dim);margin-top:12px}
.art ol{margin-top:18px;padding-inline-start:22px}
.art ol li{font-size:16.5px;color:#C6CBD4;line-height:1.75;margin-top:10px}
.art-img{margin:34px 0 0}
.art-img img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.art-img figcaption{font-size:13.5px;color:var(--dim);margin-top:10px;text-align:center}
.art-vid{margin-top:34px;aspect-ratio:16/9}
.art-vid iframe,.art-vid video{width:100%;height:100%;border:0;border-radius:14px;background:#000}
.art hr{border:0;border-top:1px solid var(--line);margin:44px 0 0}
.art pre{margin-top:18px;white-space:pre-wrap;font-size:14px;color:#C6CBD4}
/* the reading column is 760px, which is right for prose and far too narrow for a
   four-column table — on a wide screen the table breaks out of the column instead */
@media(min-width:750px){
  .art .cmp2-wrap{width:min(1120px,88vw);
    margin-inline:calc((100% - min(1120px,88vw)) / 2)}
}

.art-cta{max-width:760px;margin:clamp(52px,8vh,90px) auto 0;padding:clamp(28px,4vw,44px) 6vw;
 border:1px solid var(--line);border-radius:18px;background:var(--panel);text-align:center}
.art-cta h2{margin-top:0}
.art-cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}

.acard{display:grid;grid-template-columns:300px 1fr;gap:clamp(20px,3vw,34px);
 border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);
 text-decoration:none;transition:border-color .25s}
.acard:hover{border-color:#3A414C}
.acard .ph{background:#101216}
.acard .ph img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/10}
.acard .bd{padding:clamp(20px,2.4vw,30px) clamp(18px,2.4vw,30px) clamp(20px,2.4vw,30px) 0}
.acard h2{font-size:clamp(19px,2.2vw,27px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.acard p{font-size:15px;color:var(--mute);line-height:1.8;margin-top:12px}
.acard .m{font-size:13px;color:var(--dim);margin-top:14px}
.alist{display:flex;flex-direction:column;gap:18px;max-width:1000px;margin:44px auto 0}
@media(max-width:749px){
  .acard{grid-template-columns:1fr}
  .acard .bd{padding:22px}
}

.cmp2-wrap{max-width:1120px;margin:40px auto 0;overflow-x:auto;
 -webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px}
.cmp2{width:100%;min-width:720px;border-collapse:collapse;font-size:15px}
.cmp2 thead th{padding:18px 14px;font-size:14px;font-weight:500;color:#9AA1AD;
 text-align:center;border-bottom:1px solid var(--line);background:#0B0D11;white-space:nowrap}
.cmp2 thead th.me{color:#fff;font-weight:600;background:rgba(143,224,234,.07)}
.cmp2 tbody th{text-align:right;padding:15px 16px;font-weight:400;color:#9AA1AD;
 border-bottom:1px solid var(--line);white-space:nowrap}
.cmp2 td{padding:15px 14px;text-align:center;color:#C6CBD4;border-bottom:1px solid var(--line)}
.cmp2 td.me{color:var(--fg);background:rgba(143,224,234,.05)}
.cmp2 td.win{font-weight:600;color:var(--acc-l)}
.cmp2-sub{display:block;font-size:12px;font-weight:400;color:var(--dim);margin-top:4px}
.cmp2 .yes{color:var(--acc-l);font-size:19px;line-height:1}
.cmp2 .no{color:#4A515D;font-size:17px;line-height:1}
@media(max-width:749px){
  /* a four-column table can't be read on a phone, so each spec becomes its own
     block: the label on top, then the three machines under it. No sideways scroll. */
  .cmp2-wrap{overflow:visible;border:0;border-radius:0}
  .cmp2,.cmp2 tbody,.cmp2 tr,.cmp2 td,.cmp2 th{display:block;min-width:0;width:auto}
  .cmp2 thead{display:none}
  .cmp2 tbody tr{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;
    overflow:hidden;background:var(--panel)}
  .cmp2 tbody th{background:#0B0D11;font-size:13.5px;color:#C6CBD4;padding:12px 16px;
    border-bottom:1px solid var(--line);white-space:normal}
  .cmp2 td{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    text-align:start;padding:11px 16px;font-size:14.5px;border-bottom:1px solid var(--line)}
  .cmp2 td::before{content:attr(data-c);font-size:12.5px;color:var(--dim);flex:0 0 auto}
  .cmp2 td.me::before{color:#9AA1AD}
  .cmp2 td:last-child{border-bottom:0}
  .cmp2 .yes,.cmp2 .no{font-size:17px}
  .cmp2-sub{display:inline;margin:0 6px 0 0}
}
.cmp2 tbody tr:last-child th,.cmp2 tbody tr:last-child td{border-bottom:0}
.cmp2-note{max-width:760px;margin:22px auto 0;text-align:center;font-size:14.5px;
 color:var(--dim);line-height:1.85}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
 max-width:1120px;margin:clamp(38px,5vh,60px) auto 0}
.pf{border:1px solid var(--line);border-radius:14px;padding:26px 22px;background:var(--panel)}
.pf-n{font-size:clamp(21px,2.5vw,32px);font-weight:600;letter-spacing:-.02em;color:var(--acc-l)}
.pf-t{font-size:14.5px;font-weight:500;margin-top:8px}
.pf-d{font-size:13.5px;color:var(--mute);line-height:1.8;margin-top:9px}
@media(max-width:749px){.proof{grid-template-columns:1fr}}

.ft-sec{border-top:0;padding-block:clamp(52px,7.5vh,100px)}
.ft-sec.ft-first{border-top:1px solid var(--line)}
.ft{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.2vw,74px);
 align-items:center;max-width:1280px;margin-inline:auto}
.ft.flip .ft-im{order:2}
.ft-im{border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.ft-im img{width:100%;display:block;object-fit:cover;aspect-ratio:4/3}
.ft-im video{width:100%;display:block;object-fit:cover;aspect-ratio:16/9;background:#000}
.ft-im video.sq{aspect-ratio:1/1}
/* trust points and payment methods — under the buy box, in the cart and in the footer */
.trustbar{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.trustbar li{display:flex;gap:11px;align-items:flex-start}
.trustbar li:last-child:nth-child(odd){grid-column:1/-1}
.trustbar .ti{flex:0 0 38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--acc-l)}
.trustbar .ti svg{width:20px;height:20px}
.trustbar b{display:block;font-size:14px;font-weight:500;color:var(--fg)}
.trustbar small{display:block;font-size:12.5px;color:var(--dim);margin-top:2px;line-height:1.5}
.payrow{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.payrow .pl{font-size:12.5px;color:var(--dim)}
.pays{display:flex;flex-wrap:wrap;gap:6px}
.pay{width:48px;height:30px;border-radius:6px;background:#fff;display:grid;place-items:center;overflow:hidden}
.pay svg{width:36px;height:20px;display:block}
.payrow .pg{font-size:12px;color:var(--dim);display:inline-flex;align-items:center;gap:6px}
.payrow .pg svg{width:14px;height:14px}
.ftr-pay{margin-top:26px}
[data-p-show][hidden]{display:none!important}
a.kicker{text-decoration:none}
.ft-tx h2{font-size:clamp(23px,2.9vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.16}
.ft-tx .kicker{margin-bottom:12px}
.ft-tx p{font-size:16px;color:#C6CBD4;line-height:1.9;margin-top:16px}
.ft-pts{margin-top:22px;display:flex;flex-direction:column;gap:13px}
.ft-pts li{list-style:none;display:flex;gap:12px;font-size:15px;color:#9AA1AD;line-height:1.65}
.ft-pts li b{color:var(--fg);font-weight:500}
.ft-pts li::before{content:'';flex:0 0 7px;height:7px;border-radius:50%;
 background:var(--acc-l);margin-top:9px}
@media(max-width:860px){
  .ft{grid-template-columns:1fr;gap:22px}
  .ft.flip .ft-im{order:0}
  .ft-im img{aspect-ratio:3/2}
}

/* The tail matters: a sticky card is released the moment its container ends, so with no
   padding here the last card had no window in which to stay docked — it simply scrolled
   away at full size while the two before it shrank and dimmed behind it. This gives it the
   same travel the others get from the card that follows them. */
/* The tail is the scroll distance in which the last card stays docked while the section
   after it rides up and covers it — the same move the other cards get from the card above.
   It was 760px, which read as a hole of dead black. 30vh is enough for the cover to be
   clearly seen starting, and the rest of the motion finishes as the page scrolls on. */
.stack{padding:clamp(48px,7vh,90px) clamp(14px,3.6vw,56px) var(--stk-tail)}
.stk{position:sticky;height:min(74vh,58vw);min-height:330px;margin-bottom:clamp(46px,7vh,92px)}
.stk:last-child{margin-bottom:0}
.stack>.stk:last-child{margin-bottom:0}
.stk-in{position:relative;height:100%;border-radius:20px;overflow:hidden;background:var(--bg);
 border:1px solid rgba(255,255,255,.12);
 /* a card slides up over the one below it, so the telling shadow is the one it throws
    upward — without it two light artworks in a row read as a single confused image */
 box-shadow:0 -22px 46px rgba(0,0,0,.55),0 26px 60px rgba(0,0,0,.5);
 transform-origin:50% 0%;will-change:transform}
/* Inside a card the banner fills the frame instead of setting its own height. <picture>
   is inline by default and an inline box ignores height, which left the artwork short of
   the card edges — and since a card is stacked over the one before it, that gap showed
   the card underneath. Absolute positioning removes the question, and the opaque
   background means nothing can ever bleed through even if an image has alpha. */
/* the inset wrapper's own padding is what the card frame provides now, and its auto
   height was what collapsed the banner inside it */
.stk .bnr-wrap{padding:0;height:100%}
.stk .bnr{position:relative;height:100%;border-radius:0;background:var(--bg)}
.stk .bnr picture{position:absolute;inset:0;display:block;width:100%;height:100%}
/* The card's shape is not constant: it is about 1.6:1 at 900px of viewport and 2.50:1 at
   1860px, because its height is driven by the viewport and its width by the window. The
   three photographs are cropped at 1.6, so on a wide screen cover throws away about a
   third of their height — and with the default 50% centre that is taken half off the top,
   which is exactly where the heads are. Biasing the crop upward keeps the faces and
   spends the loss on floor instead, which none of the three frames needs. */
.stk .bnr img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 32%}
.stk-dim{position:absolute;inset:0;background:#08090B;opacity:0;pointer-events:none;z-index:5}
/* What makes a card "disappear" is the next card sliding up and covering it. The last card
   had nothing to cover it: the section after the stack is a static element, and static
   content paints BELOW positioned ones, so it slid up behind the card instead of over it.
   Giving that section its own stacking context above the cards — and an opaque background
   so it actually hides what is behind — makes it behave as the fourth card in the run. */
/* The tail is scroll distance, not empty space. The stack keeps it so the last card has
   somewhere to stay docked while the next section rides up and covers it — and the section
   is pulled back up by exactly the same amount, so the page has no gap in it. Earlier
   attempts paid for the motion with a few hundred pixels of black; this pays nothing. */
.stack{--stk-tail:min(34vh,290px)}
.stack + .sec{position:relative;z-index:6;background:var(--bg);margin-top:calc(-1 * min(34vh,290px))}
@media(max-width:749px){
  .stk{height:min(62vh,124vw);min-height:330px}
  .stk-in{border-radius:14px}
  /* a card marked contain holds artwork that carries its own words — it gets a card
     shaped like the artwork and is never cropped */
  .stk.stk-contain{height:auto;min-height:0}
  .stk.stk-contain .stk-in,.stk.stk-contain .bnr-wrap,.stk.stk-contain .bnr{height:auto}
  .stk.stk-contain .bnr picture{position:static;height:auto}
  .stk.stk-contain .bnr img{height:auto;aspect-ratio:var(--ar-m);object-fit:contain}
  /* phones normally drop banner copy below the artwork; inside a fixed-height card that
     puts it outside the frame, so it goes back to being an overlay along the bottom */
  .stk .bnr-copy,.stk .bnr-copy.bare{position:absolute;inset:auto 0 0 0;width:auto;
    justify-content:flex-end;padding:0 22px 22px;top:auto}
  /* this started at 26% and reached .88, which blacked out three quarters of every card
     to protect three lines sitting in the last fifth. Held back to where the copy is. */
  .stk .bnr-scrim{background:linear-gradient(180deg,transparent 48%,rgba(8,9,11,.38) 72%,rgba(8,9,11,.86) 100%)!important}
  .stk .bnr-h{font-size:24px}
  .stk .bnr-p{font-size:14px;margin-top:8px}
  .stk .btn{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  .stk{position:static;height:auto;min-height:0}
  .stk .bnr-wrap,.stk .bnr{height:auto}
  .stk .bnr picture{position:static;height:auto}
  .stk .bnr img{height:auto;aspect-ratio:var(--ar-d)}
  .stk-in{transform:none!important}
  .stk-dim{opacity:0!important}
}

/* smooth-scroll shell — required by the inertial scroller; harmless when it never loads */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ── scroll rhythm ────────────────────────────────────────────────────────────
   Strips stacked edge to edge read as one undifferentiated wall. Each block now
   settles into place as it enters the viewport, which gives the eye a beat between
   sections and a reason to keep going. Nothing is hidden until JS confirms it can
   observe — a failed script must never leave the page blank. */
html.rv-on [data-rv]{--ease:cubic-bezier(.22,.61,.36,1);
 transition:opacity .75s var(--ease),transform .75s var(--ease),
            clip-path .95s var(--ease),filter .75s ease}
html.rv-on [data-rv].in{opacity:1;transform:none;filter:none}
html.rv-on [data-rv][data-rv-d="1"]{transition-delay:.09s}
html.rv-on [data-rv][data-rv-d="2"]{transition-delay:.18s}

/* Four entrances, cycled so no two neighbours share one. Hebrew reads right to left,
   so "in from the side" means in from the right. */
html.rv-on [data-rv-fx="slide"]{opacity:0;transform:translateX(64px)}
html.rv-on [data-rv-fx="rise"] {opacity:0;transform:translateY(42px) scale(.986)}
/* image and copy arrive from opposite sides — transform only, nothing to rasterise */
html.rv-on [data-rv-fx="split"]{opacity:0}
html.rv-on [data-rv-fx="split"] picture{display:block;transform:translateX(-54px);
 transition:transform .95s var(--ease)}
html.rv-on [data-rv-fx="split"] .bnr-copy{transform:translateX(60px);
 transition:transform .95s var(--ease)}
html.rv-on [data-rv-fx="split"].in picture,
html.rv-on [data-rv-fx="split"].in .bnr-copy{transform:none}
/* hint the compositor only while a block is still waiting; dropped the moment it lands
   so we aren't holding layers for the whole page */
html.rv-on [data-rv]:not(.in){will-change:transform,opacity,clip-path}
/* a wipe: the block is uncovered from the right edge inward, no fade at all */
html.rv-on [data-rv-fx="mask"] {clip-path:inset(0 0 0 100%)}
html.rv-on [data-rv-fx="mask"].in{clip-path:inset(0 0 0 0)}

/* the artwork drifts back to true scale as the strip arrives — slow enough to feel
   like depth rather than an animation. Not on the wipe; that one carries itself. */
html.rv-on .bnr[data-rv-fx="slide"] picture,
html.rv-on .bnr[data-rv-fx="rise"] picture{display:block;transform:scale(1.07);
 transform-origin:50% 50%;transition:transform 1.5s var(--ease)}
html.rv-on .bnr[data-rv-fx="slide"].in picture,
html.rv-on .bnr[data-rv-fx="rise"].in picture{transform:none}

@media(prefers-reduced-motion:reduce){
  html.rv-on [data-rv],html.rv-on .bnr[data-rv] picture{
    opacity:1!important;transform:none!important;filter:none!important;
    clip-path:none!important;transition:none!important}
}
.sec-h{font-size:clamp(26px,3.6vw,50px);font-weight:500;letter-spacing:-.03em;line-height:1.15;text-align:center}
.sec-p{font-size:16px;color:var(--mute);line-height:1.85;max-width:720px;margin:22px auto 0;text-align:center}

.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:44px}
.card{border:1px solid var(--line);background:var(--panel);border-radius:16px;overflow:hidden}
.card .ph{aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:#000}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:24px}
.card .n{font-size:12px;color:var(--dim);letter-spacing:.14em;margin-bottom:8px}
.card .t{font-size:21px;font-weight:500;margin-bottom:10px}
.card .d{font-size:14px;color:var(--mute);line-height:1.7}

.marquee{overflow:hidden;padding:clamp(56px,8vh,104px) 0;border-top:1px solid var(--line)}
.marquee .track{display:flex;gap:14px;width:max-content;animation:slide 60s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(50%)}}
.chip{width:clamp(220px,20vw,300px);flex:0 0 auto}
.chip .ph{position:relative;aspect-ratio:1;background:#000;overflow:hidden;border-radius:14px}
.chip img{width:100%;height:100%;object-fit:contain}
.chip .badge{position:absolute;inset-inline-start:14px;bottom:14px;width:46px;height:46px;border-radius:50%;
 background:#fff;display:flex;align-items:center;justify-content:center;font-size:19px}
.chip .l{font-size:19px;font-weight:500;color:var(--fg);margin-top:16px}

.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(190px,15vw,240px),1fr));gap:10px;margin-top:44px}
.ig{aspect-ratio:1;overflow:hidden;background:var(--panel);display:block;border-radius:12px}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .5s,opacity .3s}
.ig:hover img{transform:scale(1.06);opacity:.85}
.sec-vid{padding:70px 50px;border-top:0}
.vids{display:grid;grid-template-columns:repeat(4,1fr);
 grid-auto-rows:clamp(184px,20.8vw,300px);gap:clamp(10px,1.25vw,20px);margin-top:34px}
.vids .m{position:relative;overflow:hidden;border-radius:4px;background:#101216}
.vids .m video{width:100%;height:100%;object-fit:cover}
.vids .m.a{grid-area:1/1/3/3}
.vids .m.b{grid-area:2/3/3/5}
@media(max-width:749px){
 .sec-vid{padding:28px 16px}
 .vids{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,40vw,220px);gap:10px}
 .vids .m.a{grid-area:1/1/3/3}.vids .m.b{grid-area:3/1/4/3}
}

.tile{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin-top:52px}
/* The card carried a border and a panel fill but no radius, while the photograph inside it
   was rounded to 14px. On the dark ground the card was invisible and all you saw was the
   rounded photo; the moment this section went white the card appeared around it and the
   mismatch showed at every corner. 18px outside, 14px inside: the outer curve has to be
   the larger of the two or the corners read as pinched. */
.tile .it{border:1px solid var(--line);background:var(--panel);border-radius:18px;overflow:hidden}
.tile .it img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.tile .it .bd{padding:26px;text-align:center}
.tile .it .t{font-size:24px;font-weight:400;margin-bottom:8px}
.tile .it .p{font-size:15px;color:var(--mute)}

.ftr{padding:12vh 6vw 7vh;border-top:1px solid var(--line);font-size:14px;color:var(--mute);line-height:1.9}
/* The link columns are <details> so a phone can fold them away. They ship open, so the
   links are in the HTML for a crawler and for the sales bot whether or not anything runs;
   a four-line script closes them below 750px and opens them again above. Desktop never
   shows the marker — there the summary is just the column heading it always was.
   No backticks in here: this stylesheet is a JS template literal and one would end it. */
.ftr .fcol{border:0}
.ftr .fcol > summary{list-style:none;cursor:default}
.ftr .fcol > summary::-webkit-details-marker{display:none}
@media(max-width:749px){
  .ftr{padding:6vh 6vw 4vh;line-height:1.8}
  .ftr .cols{gap:0;margin-bottom:0}
  .ftr .cols > div{padding-bottom:16px}
  .ftr .fcol{border-top:1px solid var(--line)}
  .ftr .fcol > summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    padding:15px 0;margin:0;min-height:48px}
  .ftr .fcol > summary::after{content:'';width:9px;height:9px;border-right:1.5px solid var(--mute);
    border-bottom:1.5px solid var(--mute);transform:rotate(45deg) translateY(-2px);transition:transform .22s}
  .ftr .fcol[open] > summary::after{transform:rotate(225deg) translateY(-2px)}
  .ftr .fcol[open] > summary{padding-bottom:6px}
  .ftr .fcol > a{display:inline-block;padding:4px 0}
  .ftr .fcol:last-of-type{border-bottom:1px solid var(--line);margin-bottom:18px}
  .ftr .legal-d{border-top:1px solid var(--line);margin-top:0}
  .ftr .legal{margin-top:0;padding-top:0;border-top:0;gap:4px 18px;padding-bottom:14px}
  .ftr-pay{margin-top:18px}
  .ftr .fine{padding-top:16px;font-size:11.5px;line-height:1.6}
}
.ftr .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:38px;margin-bottom:44px}
.ftr .h{color:var(--fg);font-size:13px;letter-spacing:.14em;margin-bottom:12px}
.ftr .fine{border-top:1px solid var(--line);padding-top:22px;font-size:12px;color:var(--dim)}
.ftr a:hover{color:var(--fg);text-decoration:underline}
/* The legal set sits on one line of its own, quieter than the navigation above it —
   present and findable, without competing with the links people actually click. */
.legal{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:34px;padding-top:22px;
 border-top:1px solid var(--line)}
.legal a{font-size:12.5px;color:var(--dim)}
.legal a:hover{color:var(--mute)}

#wa{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#25D366;
 display:flex;align-items:center;justify-content:center;z-index:950;box-shadow:0 4px 18px rgba(0,0,0,.45);overflow:visible}
#wa svg{width:28px;height:28px;fill:#fff}
#callfab{position:fixed;right:20px;bottom:88px;width:54px;height:54px;border-radius:50%;
 background:#2FC4CF;border:0;display:flex;align-items:center;justify-content:center;
 z-index:949;color:#06262A;box-shadow:0 4px 18px rgba(0,0,0,.45);transition:transform .2s,filter .2s}
#callfab svg{width:26px;height:26px;stroke-width:1.8}
#callfab:hover{filter:brightness(1.08);transform:translateY(-2px)}
@media(max-width:749px){#callfab{bottom:84px;right:20px}}
#wa{animation:wanudge 9s ease-in-out infinite}
#wa::before{content:'';position:absolute;inset:0;border-radius:50%;background:#25D366;opacity:.55;
 animation:waring 9s ease-in-out infinite;z-index:-1}
/* Pinned to the top-right corner of the button, the way a phone badges an app icon.
   Every offset is stated outright — the product page defines a plain .badge pill with
   its own margin and border, and inheriting those was dropping this one below the
   corner on exactly the pages that stylesheet loads. */
#wa .badge{position:absolute;top:-3px;right:-3px;left:auto;bottom:auto;margin:0;border:0;
 z-index:2;box-sizing:border-box;
 min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#E5484D;
 display:flex;align-items:center;justify-content:center;
 font-family:Poppins,Rubik,sans-serif;font-size:11px;font-weight:600;line-height:1;color:#fff;
 box-shadow:0 0 0 2px #0B0D10,0 1px 4px rgba(0,0,0,.5);pointer-events:none}
@keyframes wanudge{0%,84%,100%{transform:scale(1) rotate(0)}88%{transform:scale(1.09) rotate(-9deg)}
 92%{transform:scale(1.09) rotate(9deg)}96%{transform:scale(1) rotate(0)}}
@keyframes waring{0%,84%,100%{transform:scale(1);opacity:0}88%{opacity:.5}100%{transform:scale(1.9);opacity:0}}
@media(prefers-reduced-motion:reduce){#wa,#wa::before{animation:none}}
#fv{position:fixed;left:18px;bottom:18px;width:clamp(124px,9.5vw,158px);z-index:940;
 background:#000;border:1px solid var(--line);box-shadow:0 10px 34px rgba(0,0,0,.55);overflow:hidden;border-radius:16px}
#fv.hide{display:none}
#fv{transition:opacity .3s,transform .3s}
#fv:hover{opacity:.25}
#fv video{width:100%;aspect-ratio:9/16;object-fit:cover;display:block}
#fv .x,#fv .pp{position:absolute;width:26px;height:26px;border:0;border-radius:50%;cursor:pointer;
 background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:26px;text-align:center;padding:0}
#fv .x{top:7px;right:7px}
#fv .pp{bottom:7px;left:7px}
@media(max-width:749px){#fv{width:112px;left:12px;bottom:12px}}
/* The buy bar. It replaces the docked clip, and it is the only permanently visible thing
   on the page that carries a number and an action. Hidden until the hero is behind you —
   before that the page is still making its case and a price rail would be nagging. */
/* Hidden by visibility, not only by sliding down. The cart bar raises this bar's bottom
   to --cart-h, so translateY(100%) moves it down by its own height and leaves it sitting
   exactly where the cart bar is — fully on screen with no .on class. Visibility does not
   depend on the offset, so the two bars can never share the screen again. */
#buybar{position:fixed;inset-inline:0;bottom:0;z-index:941;transform:translateY(100%);
 opacity:0;visibility:hidden;
 transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .2s linear,visibility 0s linear .34s;
 pointer-events:none}
#buybar.on{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;
 transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .2s linear,visibility 0s}
#buybar .bb-in{display:flex;align-items:center;gap:14px;
 padding:12px 20px calc(12px + env(safe-area-inset-bottom)) 20px;
 background:rgba(10,11,14,.82);backdrop-filter:blur(18px);border-top:1px solid var(--line)}
/* On a wide screen the bar used to run the full width with the price pinned to one edge,
   the button to the other and a hole between them. Its contents now sit in the same
   measure as the rest of the page, which also lifts the thumbnail clear of the two round
   buttons in the corner — in RTL that clearance is inline-START, not end. */
@media(min-width:750px){
  #buybar .bb-in{max-width:1180px;margin-inline:auto;gap:20px;
    /* the measure is centred, so above about 1364px it already clears the round buttons
       on its own; this only adds the gutter on the widths where it does not */
    padding-inline-start:max(20px, min(92px, calc(682px - 50vw)))}
  #buybar .bb-p{flex:0 1 auto;margin-inline-end:auto}
}
/* Small, quiet, and never between the price and the button — it sits past the call to
   action so a thumb reaching for "שריינו מכשיר" cannot catch it by mistake. */
#buybar .bb-x{flex:0 0 auto;width:30px;height:30px;margin-inline-start:2px;border:0;padding:0;
 background:transparent;color:rgba(238,241,244,.55);font-size:22px;line-height:1;cursor:pointer;
 border-radius:50%;transition:color .2s,background .2s}
#buybar .bb-x:hover{color:#fff;background:rgba(255,255,255,.1)}
@media(max-width:560px){#buybar .bb-x{width:26px;height:26px;font-size:19px;margin-inline-start:0}}
#buybar .bb-im{flex:0 0 auto;width:76px;height:46px;border-radius:9px;object-fit:cover;
 background:#14171C;border:1px solid rgba(255,255,255,.14)}
#buybar .bb-p{flex:1 1 auto;min-width:0}
#buybar .bb-l{font-size:11px;letter-spacing:.1em;color:var(--mute);display:block;margin-bottom:3px;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#buybar .bb-n{font-size:clamp(19px,2.2vw,24px);font-weight:400;letter-spacing:-.02em}
/* The price alone states a number; next to the old price and the saving it states a
   decision. Both come from the same live Wix figures as the rest of the page, so the
   bar can never advertise a discount the product no longer carries. */
#buybar .bb-row{display:flex;align-items:baseline;gap:9px;min-width:0}
#buybar .bb-n,#buybar .bb-was,#buybar .bb-sv{flex:0 0 auto}
#buybar .bb-was{font-size:14px;color:var(--mute);text-decoration:line-through;
 text-decoration-color:rgba(255,255,255,.42)}
#buybar .bb-sv{display:inline-block;font-size:12px;font-weight:600;color:#8FE0EA;
 background:rgba(47,196,207,.13);border:1px solid rgba(47,196,207,.34);
 border-radius:999px;padding:3px 10px;white-space:nowrap;transform:translateY(-1px)}
#buybar .bb-was[hidden],#buybar .bb-sv[hidden]{display:none}
/* Narrow phones keep the percentage — it is the shortest way to say the same thing —
   and drop the struck-through price and the shekel figure beside it. */
@media(max-width:560px){#buybar .bb-was{display:none}#buybar .bb-svm{display:none}
  /* on a phone the pill lands right beside the cyan button and the two filled shapes
     read as one; the saving keeps the colour and gives up the chip */
  #buybar .bb-sv{background:none;border-color:transparent;padding:0;transform:none}
  /* 375px cannot hold a thumbnail, a price, a saving and a button at once — measured,
     the row overflowed and the button sat on top of the saving. The thumbnail is the
     decoration here, so it is the one that goes. */
  #buybar .bb-im{display:none}
  #buybar .bb-n{font-size:18px}}
/* the brand cyan, the same one the lead dialog's button and the call button already use —
   a white button here read as a neutral chip rather than the page's one action */
#buybar .btn{margin-top:0;padding:13px 28px;white-space:nowrap;
 background:#2FC4CF;border-color:#2FC4CF;color:#06262A;font-weight:600;
 box-shadow:0 8px 22px rgba(47,196,207,.26)}
#buybar .btn:hover{background:#8FE0EA;border-color:#8FE0EA;color:#06262A}
@media(max-width:749px){
  #buybar .bb-in{padding:10px 14px calc(10px + env(safe-area-inset-bottom)) 14px;gap:12px}
  #buybar .btn{padding:12px 20px;font-size:14px}
  /* the round buttons ride up so the bar never covers them */
  /* four states to clear: neither bar, the buy bar, the cart bar, or both stacked */
  body.bb-on #wa{bottom:calc(20px + var(--bb-h,68px) + var(--cart-h,0px))}
  body.bb-on #callfab{bottom:calc(84px + var(--bb-h,68px) + var(--cart-h,0px))}
  body.cart-on:not(.bb-on) #wa{bottom:calc(20px + var(--cart-h,0px))}
  body.cart-on:not(.bb-on) #callfab{bottom:calc(84px + var(--cart-h,0px))}
}
@media(prefers-reduced-motion:reduce){#buybar{transition:none}}

/* the product page carries the most small print on the site, so its greys run lighter */
main:has(> .pdp){--mute:#CFD4DB;--dim:#BEC4CD}
main:has(> .pdp) .po-fine{color:#C9D0D8}
main:has(> .pdp) :is(.ft-tx p,.cmp2 td,.opt .p,.pr .was,.rev .tx){color:#DDE1E6}
main:has(> .pdp) :is(.cmp2 thead th,.cmp2 tbody th){color:#C4CAD2}
.pdp{display:grid;
 grid-template-columns:minmax(0,calc((100vh - var(--promo-h,0px) - 132px) * 0.75)) minmax(0,1fr);
 gap:clamp(32px,3.4vw,56px);padding:calc(4vh + 74px) clamp(20px,4vw,64px) 12vh;
 align-items:start;max-width:1460px;margin-inline:auto}
@media(max-width:960px){.pdp{grid-template-columns:minmax(0,1fr);gap:34px}}
.gal{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
@media(min-width:961px){.gal{position:sticky;top:calc(var(--promo-h,0px) + 96px);align-self:start}}
.gal .main{aspect-ratio:1;border:1px solid var(--line);background:var(--panel);overflow:hidden;border-radius:16px}
.gal .main img{width:100%;height:100%;object-fit:cover}
.gal .thumbwrap{position:relative;min-width:0;max-width:100%;overflow:hidden}
.tnav{position:absolute;top:calc(50% - 5px);transform:translateY(-50%);z-index:3;
 width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
 background:rgba(8,9,11,.86);backdrop-filter:blur(6px);color:var(--fg);
 font-family:inherit;font-size:20px;line-height:1;padding:0 0 2px;cursor:pointer;
 display:none;align-items:center;justify-content:center;transition:opacity .2s,border-color .2s}
.tnav.on{display:flex}
.tnav:hover:not(:disabled){border-color:var(--fg)}
.tnav:disabled{opacity:.25;cursor:default}
.tnav.prev{right:-8px}
.tnav.next{left:-8px}
/* left-to-right pages (English, Russian): the arrows swap sides and point the other way */
[dir=ltr] .tnav.prev{right:auto;left:-8px;transform:translateY(-50%) scaleX(-1)}
[dir=ltr] .tnav.next{left:auto;right:-8px;transform:translateY(-50%) scaleX(-1)}
.gal .thumbs{display:flex;gap:12px;max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;
 scroll-snap-type:x proximity;scroll-behavior:smooth;padding-bottom:10px;
 scrollbar-width:thin;scrollbar-color:#3A3F4A transparent;overscroll-behavior-x:contain}
.gal .thumbs::-webkit-scrollbar{height:6px}
.gal .thumbs::-webkit-scrollbar-track{background:transparent}
.gal .thumbs::-webkit-scrollbar-thumb{background:#3A3F4A;border-radius:3px}
.gal .thumbs::-webkit-scrollbar-thumb:hover{background:#5A616E}
/* Fixed tile size: adding more images makes the strip scroll instead of shrinking
   every thumbnail. Snap keeps whole tiles in view rather than slivers. */
.gal .thumbs button{flex:0 0 clamp(92px,23%,124px);padding:0;border:1px solid var(--line);
 background:var(--panel);aspect-ratio:1;overflow:hidden;cursor:pointer;border-radius:11px;
 transition:border-color .2s;scroll-snap-align:start}
.gal .thumbs button[aria-current=true]{border-color:var(--fg)}
.gal .thumbs button:hover{border-color:#5A616E}
/* contain, not cover — a thumbnail shows the whole product, never a crop of it */
/* Fill the tile edge to edge. It used to be contain plus 5px of padding, which left the
   panel colour showing as a dark frame inside every thumbnail. The tile is square and the
   sources are square or close to it, so cover crops almost nothing — and the main image
   above still uses contain, where losing an edge would actually matter. */
.gal .thumbs img{width:100%;height:100%;object-fit:cover;display:block}
/* The whole gallery — main image and the thumbnail collage under it — is capped to one
   width so their edges line up, and sized so both fit the first screen without scrolling.
   Square main + a row of thirds means total height = width * 4/3 + gap. */
@media(min-width:961px){ .gal{width:100%;max-width:none;margin-inline:0} }
.buy{min-width:0}
/* the two actions share the column width, pill-shaped, side by side */
.buy-err{margin-top:18px;border:1px solid #4A2C2E;background:#1A1113;border-radius:9px;
 padding:13px 15px;font-size:13.5px;line-height:1.75;color:#E8C9C6}
.buy-err[hidden]{display:none}
.buy-err a{color:#8FE0EA;text-decoration:underline}
/* three small pills on one line — the warranty is an add-on, not a second decision as
   big as the kit itself, so it should not take a third of the buy box */
.cdn{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px 20px;
 flex-wrap:wrap;border:1px solid rgba(240,67,73,.55);border-radius:12px;
 background:linear-gradient(180deg,rgba(240,67,73,.22),rgba(240,67,73,.08));padding:11px 16px}
.cdn[hidden]{display:none}
/* the label carries the urgency, the digits carry the reading — so the label gets the
   colour and the digits get plain white on near-black, which is the only pairing that
   stays legible on a phone in daylight */
.cdn-t{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:#FFD6D7;letter-spacing:.01em;margin:0}
.cdn-t::before{content:'';flex:none;width:16px;height:16px;background:#F04349;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat;animation:cdnPulse 1.6s infinite}
@keyframes cdnPulse{0%,100%{opacity:1}50%{opacity:.22}}
/* fixed-width cells joined by colons read as one clock instead of four separate boxes */
.cdn-row{display:flex;gap:0}
.cdn .u{position:relative;flex:0 0 auto;width:52px;text-align:center;background:rgba(6,7,9,.8);
 border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 0}
.cdn .u+.u{margin-inline-start:15px}
.cdn .u+.u::before{content:':';position:absolute;inset-inline-start:-11px;top:50%;
 transform:translateY(-64%);font-size:20px;font-weight:700;color:#F04349}
.cdn .u b{display:block;font-size:clamp(20px,2.5vw,26px);font-weight:600;letter-spacing:-.02em;
 color:#fff;font-variant-numeric:tabular-nums;line-height:1.1}
.cdn .u i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.04em;
 color:#98A1AD;margin-top:4px}
@media(prefers-reduced-motion:reduce){.cdn-t::before{content:'';flex:none;width:16px;height:16px;background:#F04349;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat;animation:cdnPulse 1.6s infinite}}

.war-note{margin-top:6px;font-size:12.5px;color:#2FC4CF}
/* Pre-order panel: brand cyan rather than the countdown's red, because this is the offer,
   not the pressure. It sits between the description and the price, where it is read
   before the number rather than after it. */
.po{margin:20px 0 18px;border:1px solid rgba(47,196,207,.5);border-radius:14px;
 background:linear-gradient(180deg,rgba(47,196,207,.14),rgba(47,196,207,.04));padding:14px 16px 13px}
.po[hidden],.badge[hidden]{display:none}
.po-h{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap}
.po-tag{font-size:12px;font-weight:600;letter-spacing:.02em;background:#2FC4CF;color:#06262A;
 padding:4px 11px;border-radius:999px}
.po-date{font-size:13.5px;font-weight:500;color:#BFEFF3}
.po-t{margin:10px 0 0;font-size:15.5px;line-height:1.7;color:#EAF7F8}
.po-t b{color:#fff;font-weight:700;white-space:nowrap}
.po-cta{display:inline-flex;align-items:center;margin-top:12px;border:1.5px solid #2FC4CF;color:#8FE0EA;
 border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:600;text-decoration:none;
 transition:background .2s,color .2s}
.po-cta:hover{background:#2FC4CF;color:#06262A;text-decoration:none}
.po-fine{margin-top:9px;font-size:12.5px;color:#93A0AD;line-height:1.6}
.pcard .pre-cta{display:block;font-size:12.5px;color:#FFD6D7;margin-top:4px}
.war-note[hidden]{display:none}
.war{margin-top:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.war-h{font-size:12px;letter-spacing:.14em;color:var(--dim);font-family:Poppins,Rubik,sans-serif;flex:none}
.war-row{display:flex;gap:7px;flex:1 1 auto;min-width:0}
.war-opt{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;
 align-items:center;gap:1px;border:1px solid var(--line);border-radius:9px;
 padding:8px 6px;cursor:pointer;transition:border-color .2s,background .2s}
.war-opt:hover{border-color:#3A414C}
.war-opt[data-on="1"]{border-color:#2FC4CF;background:rgba(47,196,207,.07)}
.war-opt .n{font-size:13px;color:var(--fg);white-space:nowrap}
.war-opt .p{font-size:12px;color:var(--mute);white-space:nowrap}
.war-opt[data-on="1"] .p{color:#2FC4CF}
.war-opt .tag{position:absolute;top:-8px;inset-inline-start:50%;transform:translateX(-50%);
 font-size:9.5px;font-weight:600;padding:2px 6px;border-radius:4px;background:#2FC4CF;
 color:#06262A;white-space:nowrap}
@media(max-width:430px){.war{gap:8px}.war-h{flex:1 0 100%}}

.buy-actions{display:flex;gap:10px;margin-top:14px}
.buy-assure{margin-top:13px;font-size:12.5px;line-height:1.75;color:var(--mute);text-align:center}
.buy-actions .btn{flex:1 1 0;min-width:0;border-radius:999px;text-align:center;
 padding:15px 16px;font-size:15px;white-space:nowrap}
/* checkout is the action, so it wears the brand teal — the same one as the call button,
   not the pale accent used for links. It lifts and throws a light across on hover: a
   small, cheap signal that this is the button to press. */
.btn.go{background:#2FC4CF;border-color:#2FC4CF;color:#06262A;font-weight:600;
 position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(47,196,207,.26);
 transition:transform .18s,box-shadow .22s,background .2s,border-color .2s}
.btn.go:hover{opacity:1;background:#3FD6E1;border-color:#3FD6E1;transform:translateY(-2px);
 box-shadow:0 11px 30px rgba(47,196,207,.46)}
.btn.go:active{transform:translateY(0);box-shadow:0 4px 14px rgba(47,196,207,.3)}
.btn.go::after{content:'';position:absolute;top:0;bottom:0;width:40%;pointer-events:none;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
 transform:translateX(-170%) skewX(-18deg);opacity:0}
.btn.go:hover::after{animation:goShine .7s ease}
@keyframes goShine{
  from{transform:translateX(-170%) skewX(-18deg);opacity:1}
  to{transform:translateX(330%) skewX(-18deg);opacity:1}}
.btn.go:disabled{opacity:.42;box-shadow:none;transform:none}
.btn.go:disabled::after{display:none}
@media(prefers-reduced-motion:reduce){
  .btn.go,.btn.go:hover,.btn.go:active{transform:none}
  .btn.go:hover::after{animation:none}
}
/* stacked on phones: each button keeps its own height (a link with flex-basis 0 and hidden
   overflow collapsed to nothing, with its label spilling out below) */
@media(max-width:430px){.buy-actions{flex-direction:column}.buy-actions .btn{width:100%;flex:none}}
.buy-actions a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.buy h1{font-size:clamp(26px,3.2vw,40px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.buy .lede{font-size:15px;color:var(--mute);line-height:1.8;margin-top:14px}
.badge{display:inline-block;border:1px solid #3A3F4A;color:#C6CBD4;font-size:12px;padding:7px 14px;margin:22px 0 14px}
.prrow{display:flex;align-items:center;flex-wrap:wrap;gap:11px}
.pr{font-size:clamp(26px,3.1vw,40px);font-weight:500;letter-spacing:-.02em;color:var(--sale);
 display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
/* each price is its own bidi island — otherwise RTL runs the two ₪ signs together
   and the strike-through bleeds across both numbers */
.pr>span{unicode-bidi:isolate;white-space:nowrap}
.pr .was{font-size:1em;color:#C6CBD4;text-decoration:line-through;
 text-decoration-thickness:2px;text-decoration-color:#7C838F;margin:0}
.pill{font-size:clamp(14px,1.35vw,17px);font-weight:600;padding:10px 16px;border-radius:8px;white-space:nowrap;
 font-family:Rubik,Poppins,Rubik,sans-serif}
.pill.save{background:var(--sale);color:#fff}
.pill[hidden]{display:none}
/* kit picker: boxed choices in a row, like the brand's own product page */
.opts-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.opt{position:relative;border:1px solid var(--line);padding:11px 13px;cursor:pointer;border-radius:9px;
 display:flex;flex-direction:row;align-items:center;gap:11px;flex:1 1 190px;min-width:0;
 transition:border-color .2s,background .2s}
.opt .th{width:54px;height:54px;flex:none;border-radius:7px;object-fit:contain;
 background:#fff;padding:3px}
.opt .meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.opt:hover{border-color:#5A616E}
.opt[data-on="1"]{border-color:var(--fg);background:var(--panel)}
.opt .n{font-size:14.5px;line-height:1.35}
.opt .p{font-size:14px;color:#C6CBD4}
/* Lifted out of the flow onto the box's top-left corner, straddling the border, exactly
   like .war-opt .tag above it — one tag shape on the page. the left property, not the logical
   inset-inline-start, because the page is RTL and the start edge is the right one. */
.opt .tag{position:absolute;top:-8px;left:12px;right:auto;z-index:1;
 font-size:9.5px;font-weight:600;letter-spacing:0;color:#06262A;background:#2FC4CF;
 padding:2px 6px;border-radius:4px;white-space:nowrap}
/* The second badge, inverted against the first the way .kit-tag.alt is on the cards — the
   row carries two different claims and they must not read as the same stamp twice. */
.opt .tag.alt{color:#fff;background:#0B0D11;box-shadow:0 0 0 1px var(--line)}
/* benefit grid under the buy button */
.perks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
 border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:26px}
.perk{background:var(--bg);display:flex;align-items:center;gap:12px;padding:14px 13px}
.perk .v{flex:none;min-width:52px;height:38px;border:1px solid var(--line);border-radius:8px;
 display:flex;align-items:center;justify-content:center;font-family:Poppins,Rubik,sans-serif;
 font-size:14px;font-weight:500;padding:0 7px}
.perk .t{min-width:0}
.perk .t b{display:block;font-weight:400;font-size:13.5px;margin-bottom:2px}
.perk .t span{color:var(--dim);font-size:12px;line-height:1.5;display:block}
@media(max-width:600px){.perks{grid-template-columns:1fr}}
.tag{font-size:11px;border:1px solid #3A3F4A;padding:2px 8px;margin-inline-start:9px;color:#9AA1AC}
.qty{display:flex;align-items:center;gap:14px;margin-top:22px;font-size:14px;color:var(--mute)}
.qty button{width:38px;height:38px;background:transparent;border:1px solid var(--line);color:var(--fg);font-size:17px;cursor:pointer}
.trust{margin-top:22px;font-size:13px;color:var(--dim);line-height:1.9}
table.spec{width:100%;max-width:820px;margin:44px auto 0;border-collapse:collapse;font-size:15px}
table.spec td{padding:15px 18px;border-bottom:1px solid var(--line)}
table.spec td:first-child{color:var(--mute);width:45%}
table.spec td:last-child{text-align:start;color:var(--fg);font-weight:400}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;font-size:17px;display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--mute)}
.faq details[open] summary::after{content:'–'}
.faq p{padding:0 0 24px;color:var(--mute);line-height:1.85;font-size:15px}
/* Hebrew callouts: photograph from the CDN, type rendered live by the browser —
   so it stays sharp at any density, is editable, and search engines can read it. */
.shot{position:relative;margin-top:44px;background:#000;overflow:hidden;border-radius:4px}
.shot>img{width:100%;display:block}
.shot .co{position:absolute;display:flex;align-items:center;gap:11px;color:#fff;font-size:15px;
 text-shadow:0 2px 16px rgba(0,0,0,.9)}
.shot .co .dot{width:10px;height:10px;border-radius:50%;background:#8FE0EA;flex:none;
 box-shadow:0 0 0 5px rgba(143,224,234,.20)}
.shot .co .tx{line-height:1.5}
.shot .co .tx i{display:block;font-style:normal;font-family:Poppins,Rubik,sans-serif;font-size:11px;
 letter-spacing:.15em;color:#8FE0EA;margin-bottom:3px}
.shot .co1{top:16%;right:27%}
.shot .co2{top:31%;right:57%}
.shot .co3{top:80%;right:44%}
@media(max-width:749px){
  .shot .co{font-size:11px;gap:7px}
  .shot .co .dot{width:6px;height:6px;box-shadow:0 0 0 3px rgba(143,224,234,.20)}
  .shot .co .tx i{font-size:8.5px;margin-bottom:1px}
}
/* Customer reviews come from the Reviews CMS collection, so the owner adds and edits
   them in the dashboard. The section stays hidden until there is something real. */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:16px;margin-top:38px}
.rev{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
 display:flex;flex-direction:column}
.rev .media{aspect-ratio:4/5;background:#000;overflow:hidden}
.rev .media img,.rev .media video{width:100%;height:100%;object-fit:cover;display:block}
.rev .bd{padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.rev .stars{color:#F5B851;font-size:14px;letter-spacing:2px}
.rev .tx{font-size:14.5px;line-height:1.8;color:#C6CBD4;flex:1}
.rev .who{font-size:13px;color:var(--dim);border-top:1px solid var(--line);padding-top:11px}
.rev .who b{color:var(--fg);font-weight:400}
.rev .kit{font-size:11.5px;color:var(--acc-l)}
/* An independent reviewer is the strongest thing on this page, so it is labelled as one
   rather than blended in with the customer notes. */
.rev .src{font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:5px;margin-top:2px}
.rev .src::before{content:'';width:5px;height:5px;border-radius:50%;background:#2FC4CF;flex:none}
.rev-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;
 padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.rev-sum[hidden]{display:none}
.rev-sum .avg{font-size:30px;font-weight:500;letter-spacing:-.02em;line-height:1}
.rev-sum .st{color:#F5B851;font-size:15px;letter-spacing:2px}
.rev-sum .ct{font-size:13px;color:var(--dim)}
/* The video is the review here — it is not decoration, so it gets a real play control
   and it plays with sound, which a muted looping testimonial never could. */
.rev .media{position:relative}
.rev-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 background:rgba(8,9,11,.28);border:0;cursor:pointer;padding:0;transition:background .2s}
.rev-play:hover{background:rgba(8,9,11,.14)}
.rev-play[hidden]{display:none!important}
.rev-play .ring{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);
 display:flex;align-items:center;justify-content:center;transition:transform .2s;
 box-shadow:0 6px 20px rgba(0,0,0,.4)}
.rev-play .ring svg{width:40%;height:40%;fill:#08090B;display:block;margin-inline-start:3px}
.rev-play:hover .ring{transform:scale(1.08)}
.rev .yt-mark{position:absolute;bottom:10px;inset-inline-start:10px;font-size:10.5px;
 letter-spacing:.06em;background:rgba(8,9,11,.72);color:#fff;padding:4px 8px;border-radius:5px}
.cmp{width:100%;border-collapse:collapse;margin-top:44px;font-size:15px}
.cmp th{text-align:right;padding:16px 12px;border-bottom:1px solid var(--line);font-weight:500}
.cmp td{padding:15px 12px;border-bottom:1px solid var(--line);color:#C6CBD4;vertical-align:top}
.frm{max-width:560px;margin:34px auto 0;background:var(--panel);border:1px solid var(--line);
 border-radius:16px;padding:30px 28px 26px;display:flex;flex-direction:column;gap:15px}
/* A transparent box with a hairline under it reads as decoration on a dark page, not as
   somewhere to type. Same filled field as the popup: a lighter ground than the card it
   sits on, a border you can see before you focus it, and a placeholder that shows the
   expected shape of the answer. */
.frm label{display:block;font-size:13px;font-weight:500;color:#CFD4DC;letter-spacing:.01em;margin-bottom:7px}
.frm label i{font-style:normal;font-weight:400;color:var(--dim)}
.frm input{width:100%;background:#1B1F26;border:1px solid #3A414C;border-radius:10px;color:#fff;
 font-family:inherit;font-size:16px;padding:14px 15px;outline:none;
 transition:border-color .18s,box-shadow .18s,background .18s}
.frm input::placeholder{color:#7C8494}
.frm input:hover{border-color:#4A525E}
.frm input:focus{background:#20252D;border-color:var(--acc-l);
 box-shadow:0 0 0 3px rgba(143,224,234,.18)}
.frm input.bad{border-color:var(--sale);box-shadow:0 0 0 3px rgba(240,67,73,.16)}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frm .btn{margin-top:4px;width:100%;text-align:center;border-radius:10px;padding:16px 34px;font-weight:500}
.frm .fine{font-size:12.5px;color:var(--dim);line-height:1.7;text-align:center}
@media(max-width:520px){.frm{padding:24px 18px 22px}.frm .row{grid-template-columns:1fr}}
#msg{font-size:14px;margin-top:16px;min-height:20px}
#cartbar{position:fixed;bottom:0;inset-inline:0;background:var(--panel);border-top:1px solid var(--line);
 padding:13px 6vw;display:none;align-items:center;justify-content:space-between;gap:16px;z-index:940}
#cartbar.on{display:flex}
/* Both bars are fixed to bottom:0, so the buy bar (z-941) simply sat on top of this one and
   swallowed the checkout button. The buy bar already publishes its height as --bb-h for the
   round buttons; the cart bar rides above it the same way instead of hiding underneath. */
/* The buy bar is the primary action, so it keeps the top of the stack and the cart bar
   sits beneath it. Each bar publishes its own height, so whatever rides above the stack
   can clear both of them whichever combination happens to be on screen. */
#cartbar{bottom:0}
#buybar{transition:bottom .25s cubic-bezier(.2,.7,.3,1)}
body.cart-on #buybar{bottom:var(--cart-h,0px)}
#cartbar button{background:var(--fg);color:var(--bg);border:0;font-family:inherit;font-size:14px;padding:12px 28px;cursor:pointer}

.crumbs{padding:calc(7vh + 60px) 6vw 0;font-size:13px;color:var(--dim)}
.crumbs a:hover{color:var(--fg)}
.coll-head{padding:4vh 6vw 0}
.coll-head h1{font-size:clamp(28px,3.8vw,52px);font-weight:500;letter-spacing:-.03em}
.coll-head p{font-size:16px;color:var(--mute);line-height:1.85;margin-top:16px;max-width:680px}
.coll-head .coll-note{font-size:14.5px;margin-top:12px}
.coll-head .coll-note a{color:var(--acc-l);text-decoration:underline;text-underline-offset:3px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
 padding:5vh 6vw 3vh;font-size:14px;color:var(--mute)}
.bar select{background:var(--panel);color:var(--fg);border:1px solid var(--line);
 font-family:inherit;font-size:14px;padding:10px 14px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:1px;
 background:var(--line);border-block:1px solid var(--line);margin-bottom:12vh}
.pcard{background:var(--bg);padding:0 0 24px;display:flex;flex-direction:column}
.pcard .ph{aspect-ratio:1;background:var(--panel);overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover .ph img{transform:scale(1.04)}
.pcard .in{padding:20px 22px 0;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard .nm{font-size:15px;line-height:1.5}
.pcard .ds{font-size:13px;color:var(--dim);line-height:1.6;flex:1}
.pcard .pz{font-size:19px;font-weight:400}
.pcard .pre{font-size:11px;color:#9AA1AC;border:1px solid var(--line);padding:3px 8px;align-self:flex-start}
.pcard button{margin:14px 22px 0;background:transparent;border:1px solid var(--line);color:var(--fg);
 font-family:inherit;font-size:13px;padding:11px;cursor:pointer}
.pcard button:hover{border-color:var(--fg)}
.empty{padding:14vh 6vw;text-align:center;color:var(--mute)}
/* white strips: the places where the product itself is on show — its photos are shot on white */
.light{--bg:#FFFFFF;--fg:#0B0D11;--mute:#555C68;--dim:#6B717C;--line:#E3E6EB;--panel:#F4F5F7;
 background:#fff;color:var(--fg);border-top:0}
.light .kicker{color:#0E8C97}
.light .btn.ghost{border-color:#0B0D11;color:#0B0D11}
.light .btn.ghost:hover{background:#0B0D11;color:#fff}
.light table.spec td:first-child{color:#555C68}
.coll-light{padding-bottom:1px}
.new-tag{display:inline-block;background:#2FC4CF;color:#06262A;font-size:11px;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;vertical-align:middle;margin-inline-start:6px}
.new-tag.big{position:absolute;top:12px;inset-inline-start:12px;z-index:1;font-size:12px;padding:6px 11px;margin:0}
.pcard .ph{position:relative}
.b1-banner{display:flex;align-items:center;gap:18px;margin-top:22px;max-width:680px;padding:14px 18px 14px 14px;border:1px solid var(--line);border-radius:16px;background:#F4F5F7;color:var(--fg);text-decoration:none}
.b1-banner img{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:12px;flex:none}
.b1-banner b{display:block;font-size:18px;font-weight:600;margin-top:6px}
.b1-banner .new-tag{margin:0}
.b1-banner small{display:block;font-size:14px;color:var(--mute);margin-top:4px;line-height:1.6}
.b1-banner em{display:inline-block;font-style:normal;font-size:14px;margin-top:6px;text-decoration:underline;text-underline-offset:3px}
.coll-light .crumbs{padding-top:calc(7vh + 60px)}
.coll-light .coll-head .coll-note a{color:#0E8C97}
.coll-light .pcard .ph{background:#fff}
.coll-light .pcard .ph img{object-fit:contain}
.coll-light .pcard .nm a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.coll-light .pcard .pre{color:#555C68}
.coll-light .pcard .pre-cta{color:#B4232F}
.kits .kicker{text-align:center}
/* What the carton actually holds, stated once above the three cards rather than repeated
   in each. Three columns on a desktop, two on a tablet, one on a phone. */
.inbox{max-width:1240px;margin:34px auto 0;border:1px solid var(--line);border-radius:14px;
 padding:22px 26px;background:rgba(255,255,255,.03)}
.inbox-h{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--acc-l);margin-bottom:14px}
.inbox-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:10px 24px}
.inbox-l li{position:relative;padding-inline-start:24px;font-size:14.5px;line-height:1.5}
.inbox-l li::before{content:'';position:absolute;inset-inline-start:0;top:4px;width:15px;height:15px;
 border-radius:50%;background:var(--acc-l);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
@media(max-width:860px){.inbox-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.inbox-l{grid-template-columns:minmax(0,1fr)}.inbox{padding:18px 20px}}
/* The extras earn a dark panel of their own: the photographs are shot on black, and the
   price beside each name is what makes "included" read as a saving rather than a list. */
.extras{max-width:1240px;margin:16px auto 0;border:1px solid var(--line);border-radius:14px;
 background:#000;overflow:hidden;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
 align-items:center;gap:8px;
 /* this panel is dark inside a light section, so it states its own text colour rather
    than inheriting one that would vanish against the black */
 color:#f2f3f4}
.extras-t{padding:24px 26px}
.extras-l{list-style:none;margin:0 0 16px;padding:0}
.extras-l li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;
 border-bottom:1px solid rgba(255,255,255,.07);font-size:14.5px}
.extras-l li:last-child{border-bottom:0}
.extras-l b{font-weight:600;color:rgba(242,243,244,.62);white-space:nowrap}
.extras-sum{font-size:15px;font-weight:600;color:var(--acc-l)}
.extras-i img{display:block;width:100%;height:auto}
@media(max-width:860px){.extras{grid-template-columns:minmax(0,1fr)}
 .extras-i{order:-1}.extras-t{padding:20px}}
/* The ladder's rungs: a heading that names the step up, then the things it adds. The last
   line of the top card is the money line, so it reads as the reward for climbing. */
.kit-add{margin-top:10px;text-align:start}
.kit-add-h{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
 color:var(--muted);margin-bottom:8px}
.kit-add ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.kit-add li{position:relative;padding-inline-start:20px;font-size:13.5px;line-height:1.45}
.kit-add li::before{content:'';position:absolute;inset-inline-start:0;top:5px;width:12px;height:12px;
 border-radius:50%;background:var(--acc);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat}
.kit-add li:last-child{margin-top:4px;font-weight:600;color:var(--acc-d,#0B0D11)}
/* Equal heights so the three read as one row of choices; the price and button are pushed
   to the bottom of each card so the eye can compare them along a single line. */
.kit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1240px;margin:48px auto 0;align-items:stretch}
.kit{display:flex;flex-direction:column}
.kit .kit-pr{margin-top:auto}
@media(max-width:900px){.kit-grid{grid-template-columns:minmax(0,1fr);max-width:520px}}
.kit{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:18px 20px 22px;background:#fff}
.kit[hidden]{display:none}
.kit-ph{aspect-ratio:1;border-radius:12px;overflow:hidden;background:#fff}
.kit-ph img{width:100%;height:100%;object-fit:contain}
/* Matched to the warranty tag above: the same small square chip sitting on the card's top
   edge, rather than a large pill floating inside it. One tag shape across the page means
   the eye reads "this one is marked" without re-learning what a mark looks like. */
/* left, not inset-inline-start: the page is RTL, so the logical start is the RIGHT edge.
   The warranty tag it copies lands on the visual left, and that is the side asked for. */
.kit-tag{position:absolute;top:-8px;left:20px;right:auto;z-index:1;background:#2FC4CF;
 color:#06262A;font-size:9.5px;font-weight:600;padding:2px 6px;border-radius:4px;white-space:nowrap}
.kit-tag.alt{background:#0B0D11;color:#fff}
.kit h3{font-size:19px;font-weight:600;margin-top:10px;line-height:1.35}
.kit p{font-size:14.5px;color:var(--mute);line-height:1.7;margin-top:6px;flex:1}
.kit-pr{display:flex;align-items:baseline;gap:10px;margin-top:14px;flex-wrap:wrap}
.kit-pr span{unicode-bidi:isolate;white-space:nowrap}
.kit-pr .kp{font-size:24px;font-weight:600;color:#C8102E}
.kit-pr .kw{font-size:15px;color:#8A909B;text-decoration:line-through}
.kit-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
.kit-act .btn{margin-top:0}
.kit-more{font-size:14.5px;color:#0B0D11;text-decoration:underline;text-underline-offset:3px}

.cart-wrap{display:grid;grid-template-columns:1fr 372px;gap:56px;padding:5vh 6vw 12vh;align-items:start}
@media(max-width:899px){.cart-wrap{grid-template-columns:1fr;gap:30px;padding:4vh 6vw 10vh}}
.ci{display:grid;grid-template-columns:104px 1fr auto;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.ci:first-child{border-top:1px solid var(--line)}
.ci .ph{width:104px;aspect-ratio:1;background:var(--panel);overflow:hidden;border-radius:3px}
.ci .ph img{width:100%;height:100%;object-fit:cover}
.ci .nm{font-size:16px;line-height:1.5;margin-bottom:6px}
.ci .nm a:hover{text-decoration:underline}
.ci .op{font-size:13px;color:var(--dim);line-height:1.7}
.ci .pre{display:inline-block;font-size:11px;color:#9AA1AC;border:1px solid var(--line);padding:3px 8px;margin-top:8px}
.ci .rt{text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:12px;white-space:nowrap}
.ci .lp{font-size:17px;font-weight:400}
.cqty{display:inline-flex;align-items:center;border:1px solid var(--line)}
.cqty button{width:34px;height:34px;background:transparent;border:0;color:var(--fg);font-family:inherit;
 font-size:16px;line-height:1;cursor:pointer}
.cqty button:hover:not(:disabled){background:var(--panel)}
.cqty button:disabled{opacity:.3;cursor:default}
.cqty span{min-width:34px;text-align:center;font-size:14px}
.rm{background:none;border:0;color:var(--dim);font-family:inherit;font-size:13px;cursor:pointer;padding:0}
.rm:hover{color:#E5484D;text-decoration:underline}
.cart-sum{border:1px solid var(--line);background:var(--panel);padding:28px 26px;position:sticky;top:calc(var(--promo-h,0px) + 96px)}
@media(max-width:899px){.cart-sum{position:static}}
.cart-sum h2{font-size:19px;font-weight:400;margin-bottom:22px}
.cart-sum .row{display:flex;justify-content:space-between;gap:14px;font-size:15px;color:var(--mute);padding:9px 0}
.cart-sum .row.tot{border-top:1px solid var(--line);margin-top:12px;padding-top:18px;color:var(--fg);font-size:20px}
.cart-sum .note{font-size:12.5px;color:var(--dim);line-height:1.8;margin-top:16px}
.cart-sum .btn{width:100%;text-align:center;margin-top:20px}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:11px;
 border:1px solid #25D366;color:#25D366;background:transparent;font-family:inherit;font-size:14.5px;
 padding:14px;cursor:pointer;text-decoration:none}
.wa-btn:hover{background:#25D366;color:#08090B}
.wa-btn svg{width:19px;height:19px;fill:currentColor}
.cart-empty{padding:12vh 6vw;text-align:center}
.cart-empty p{font-size:17px;color:var(--mute);margin-bottom:26px}

.doc{max-width:860px;margin-inline:auto;padding:calc(10vh + 60px) 6vw 14vh}
.doc h1{font-size:clamp(30px,4vw,52px);font-weight:300;letter-spacing:-.03em;line-height:1.15}
.doc .sub{font-size:17px;color:var(--mute);line-height:1.9;margin-top:20px}
.doc h2{font-size:22px;font-weight:500;margin:6vh 0 16px}
.doc p{font-size:16px;color:#C6CBD4;line-height:1.95;margin-bottom:16px}
.doc ul{margin:0 20px 20px 0;color:#C6CBD4;line-height:2}
.doc .note{border-inline-start:2px solid var(--line);padding-inline-start:20px;color:var(--mute);font-size:15px;line-height:1.9}
.doc .cta{margin-top:7vh}