/* Minification failed. Returning unminified contents.
(6,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,62): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,62): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,31): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,62): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,20): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(45,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(60,27): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(65,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(66,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(72,45): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(79,46): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(85,46): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(92,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(93,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(97,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(103,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(104,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(108,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(114,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(115,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(127,35): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(135,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(140,33): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(157,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(161,30): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(161,61): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(161,94): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(161,120): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(166,20): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(167,15): run-time error CSS1039: Token not allowed after unary operator: '-accent-fg'
(171,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(172,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(175,43): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(188,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(206,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(214,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(223,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(224,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(225,40): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(228,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(232,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(233,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(245,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(247,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(248,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(268,40): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(269,29): run-time error CSS1039: Token not allowed after unary operator: '-border'
(276,52): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(277,49): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(283,35): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(283,50): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(289,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(290,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(292,16): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(303,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(310,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(330,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(333,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(340,24): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(342,35): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(344,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(345,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(362,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(367,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(377,20): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(396,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(405,43): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(410,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(411,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(419,37): run-time error CSS1039: Token not allowed after unary operator: '-max'
(426,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(432,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(441,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(456,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(460,39): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(469,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(474,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(492,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(494,30): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(494,61): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(528,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(529,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(531,24): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(534,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(535,22): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(549,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(553,35): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(554,41): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(571,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(595,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(598,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(631,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(632,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(640,20): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(641,15): run-time error CSS1039: Token not allowed after unary operator: '-accent-fg'
(648,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(650,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(688,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(698,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(715,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(716,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(728,42): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(744,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(746,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(747,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(781,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(783,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(861,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(869,11): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(869,27): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(880,22): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(884,15): run-time error CSS1030: Expected identifier, found '.'
(884,36): run-time error CSS1031: Expected selector, found ')'
(884,36): run-time error CSS1025: Expected comma or open brace, found ')'
(890,15): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(897,31): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(898,32): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(899,22): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(903,24): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(904,32): run-time error CSS1039: Token not allowed after unary operator: '-border'
(910,32): run-time error CSS1039: Token not allowed after unary operator: '-t-med'
(910,59): run-time error CSS1039: Token not allowed after unary operator: '-t-med'
(910,99): run-time error CSS1039: Token not allowed after unary operator: '-t-med'
(922,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(925,17): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(929,24): run-time error CSS1039: Token not allowed after unary operator: '-border'
(946,32): run-time error CSS1039: Token not allowed after unary operator: '-border'
(954,17): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(971,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(972,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(974,17): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(978,35): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(978,66): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(978,92): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(981,44): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(981,63): run-time error CSS1039: Token not allowed after unary operator: '-border'
(984,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(985,44): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(986,17): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1004,28): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1006,17): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1007,35): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(1007,61): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(1010,44): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1010,63): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1011,17): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1020,35): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1041,40): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(1051,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(1052,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1053,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1055,52): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(1060,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1061,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(1064,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1067,33): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1073,35): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1074,33): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1172,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(1173,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(1174,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1180,30): run-time error CSS1039: Token not allowed after unary operator: '-t-med'
(1180,62): run-time error CSS1039: Token not allowed after unary operator: '-t-med'
(1181,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1185,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1207,28): run-time error CSS1039: Token not allowed after unary operator: '-hue'
(1208,33): run-time error CSS1039: Token not allowed after unary operator: '-hue'
(1269,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(1318,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1323,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1325,19): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1342,30): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(1381,17): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(1381,30): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1382,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1414,15): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1457,20): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(1510,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1511,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(1518,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1527,35): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1561,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1563,19): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1571,40): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1592,20): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1598,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1604,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1605,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1616,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1617,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(1621,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1628,35): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1643,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1648,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(1650,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1675,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1700,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1701,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1712,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1713,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(1717,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1726,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1743,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(1745,27): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1749,72): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1756,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1757,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1767,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1768,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(1772,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1779,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1785,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1818,27): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1821,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(1824,27): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1831,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1832,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(1832,58): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(1839,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1841,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1847,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1848,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(1852,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1858,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1860,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1869,65): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1875,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1883,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(1889,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(1900,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1901,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1905,65): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(1909,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1919,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(1921,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1922,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(1943,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(1945,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(1986,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1988,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(2009,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2010,40): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2011,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2015,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2018,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2024,24): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2027,20): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2048,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2049,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(2064,59): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2065,65): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2066,70): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2079,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2080,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2083,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2085,33): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2087,63): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2097,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2106,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2116,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2122,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2138,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2139,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2140,40): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(2148,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2158,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2158,40): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2159,40): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2177,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2182,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2184,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(2185,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2195,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2203,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2207,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2216,36): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2233,36): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2240,38): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2245,40): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2248,69): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2278,59): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2297,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2298,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(2303,19): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2304,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(2312,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2313,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2315,13): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(2316,20): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(2328,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2331,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2337,24): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2343,20): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2354,20): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2364,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2378,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2384,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2385,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2387,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2391,33): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2391,64): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2393,46): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2396,22): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2414,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2416,31): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2416,57): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2418,49): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2418,71): run-time error CSS1039: Token not allowed after unary operator: '-accent-fg'
(2443,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2444,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2455,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2460,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2464,31): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2464,57): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2466,41): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2467,50): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2474,20): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2485,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2508,31): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2510,31): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2513,50): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2522,39): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2525,39): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2545,68): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2551,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2552,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(2555,44): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2560,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2567,19): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2568,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(2578,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2584,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2586,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(2588,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2596,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2604,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2607,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2615,39): run-time error CSS1039: Token not allowed after unary operator: '-max'
(2615,78): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2629,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2630,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(2632,30): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2632,61): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2632,94): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2637,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2648,27): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2648,55): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(2663,27): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(2665,38): run-time error CSS1039: Token not allowed after unary operator: '-max'
(2665,77): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2671,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2672,31): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2676,32): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2677,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2681,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2696,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2701,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2702,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(2706,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2714,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2729,43): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2733,43): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2736,36): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2741,32): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2747,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2748,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(2757,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2762,47): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2768,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2771,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2773,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(2776,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2784,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2790,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2794,43): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2800,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2810,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2813,38): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2826,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(2827,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(2850,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2851,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(2855,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2859,41): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2863,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2878,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2879,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(2893,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2900,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2927,53): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2930,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(2946,51): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2952,57): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2953,60): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2959,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2966,36): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2968,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(2979,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(2985,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(2992,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3002,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3003,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3004,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3004,58): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3007,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3009,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3018,71): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3024,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3031,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3037,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3038,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3059,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3065,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3070,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(3072,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(3074,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3082,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3089,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3090,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3108,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3111,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(3113,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(3115,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3122,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3128,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3131,10): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3136,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3146,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3151,52): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3159,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3175,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3182,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3190,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3200,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3205,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3206,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3217,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3218,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3220,20): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3227,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3231,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3233,73): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3238,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3239,40): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(3239,60): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3244,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3245,40): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(3245,60): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3307,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3308,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3323,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3330,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3334,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(3336,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(3338,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3345,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3353,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3364,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3366,19): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3374,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3375,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3378,30): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(3378,50): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3392,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3404,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3405,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3415,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(3425,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3433,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3449,64): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3449,94): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3449,124): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(3451,59): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3453,100): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3453,118): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(3459,72): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3465,75): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3471,35): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3474,36): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3480,72): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3484,42): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3492,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3494,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3499,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3508,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(3509,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(3513,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3521,35): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3535,13): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(3537,40): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3539,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3544,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3545,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3551,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3554,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(3562,24): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(3564,32): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3566,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3567,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3575,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3576,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-xl'
(3579,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3586,67): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3591,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3599,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3604,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3605,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3623,35): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3628,18): run-time error CSS1039: Token not allowed after unary operator: '-nav-h'
(3630,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3631,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3632,40): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3639,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3646,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3653,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3664,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3665,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3666,40): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3679,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3688,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3689,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(3697,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3700,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3717,78): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3718,62): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3726,84): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3733,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3734,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3738,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(3739,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(3743,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3748,39): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3753,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3761,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3762,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3777,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3782,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(3783,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(3787,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3795,35): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3800,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(3802,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(3804,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3808,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3813,45): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3816,47): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3820,31): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3822,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3827,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3828,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3858,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(3859,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3860,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3862,33): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(3862,64): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(3862,90): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(3864,44): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3866,20): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3867,22): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3868,15): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(3872,30): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3876,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3877,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3884,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3891,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3897,57): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3897,186): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3909,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3916,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3920,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(3930,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3932,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3933,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3945,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3951,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3959,19): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(3960,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(3977,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(3982,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(3983,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(3984,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(3986,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(3990,33): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(3993,65): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4009,30): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4012,31): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4012,59): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4014,55): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4023,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4024,31): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4024,57): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4038,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4043,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(4053,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4059,28): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4059,58): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4060,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4065,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4066,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4073,27): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4075,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(4080,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(4081,19): run-time error CSS1039: Token not allowed after unary operator: '-max'
(4095,33): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4102,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4108,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4125,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4126,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(4127,20): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(4130,33): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4130,64): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4133,42): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4133,61): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4134,40): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4134,58): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(4145,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(4146,36): run-time error CSS1039: Token not allowed after unary operator: '-hue'
(4147,31): run-time error CSS1039: Token not allowed after unary operator: '-hue'
(4156,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4157,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4158,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4162,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4163,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4164,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4165,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4167,33): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4175,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(4187,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4190,28): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4190,58): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4190,84): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4195,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4200,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(4209,15): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4214,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(4215,21): run-time error CSS1039: Token not allowed after unary operator: '-font-display-weight'
(4219,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(4225,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4237,38): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(4239,36): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(4241,34): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(4248,38): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(4252,36): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(4254,34): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(4266,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter'
(4288,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4289,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(4290,40): run-time error CSS1039: Token not allowed after unary operator: '-bg-elev'
(4306,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4315,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4321,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-md'
(4325,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(4328,33): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4328,64): run-time error CSS1039: Token not allowed after unary operator: '-t-fast'
(4330,45): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4333,22): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4342,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4345,65): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4353,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4356,37): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(4368,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4369,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-lg'
(4375,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(4385,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4391,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4397,105): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4404,15): run-time error CSS1039: Token not allowed after unary operator: '-muted'
(4409,20): run-time error CSS1039: Token not allowed after unary operator: '-bg'
(4410,15): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(4411,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4412,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
(4425,26): run-time error CSS1039: Token not allowed after unary operator: '-border'
(4429,51): run-time error CSS1039: Token not allowed after unary operator: '-fg'
(4433,20): run-time error CSS1039: Token not allowed after unary operator: '-accent'
(4434,15): run-time error CSS1039: Token not allowed after unary operator: '-accent-fg'
(4437,23): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm'
 */
/* Habanero 2026 - design tokens
   Translated from habaco/project/Habanero 2026.html :root block + main.jsx ACCENT_OPTIONS.
   Tokens drive every visual decision; switch accent via <html data-accent="..."> */

:root {
  --bg:      oklch(0.13 0.012 50);
  --bg-elev: oklch(0.16 0.014 48);
  --border:  oklch(0.24 0.012 50);
  --fg:      oklch(0.97 0.008 80);
  --muted:   oklch(0.62 0.012 60);
  --accent:  oklch(0.67 0.20 38);   /* habanero orange, red end - sits between the logo gradient stops (#EE344D -> #F89927), nearer the shield */
  --accent-fg: oklch(0.12 0.01 40); /* foreground when on top of --accent */

  /* Display face for headings only; body copy stays Geist. Hanken is
     warmer and more humanist than Geist without losing B2B credibility.
     It carries display sizes best at 600, vs the 500 Geist was set at. */
  --font-display: 'Hanken Grotesk', 'Geist', sans-serif;
  --font-display-weight: 600;

  --gutter: 40px;
  --max: 1440px;
  --nav-h: 72px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --t-fast: 180ms;
  --t-med:  300ms;
  --t-slow: 700ms;
}

html[data-accent="amber"]   { --accent: oklch(0.78 0.19 65); --accent-fg: oklch(0.14 0.02 60); }
html[data-accent="crimson"] { --accent: oklch(0.58 0.24 18); --accent-fg: oklch(0.97 0.01 40); }
html[data-accent="gold"]    { --accent: oklch(0.82 0.16 85); --accent-fg: oklch(0.14 0.02 70); }

/* Habanero 2026 - base reset, typography, primitive components */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Geist', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in oklab, var(--accent) 50%, transparent);
  color: var(--fg);
}

/* ===== scrollbar — match the dark theme ===== */
html {
  scrollbar-width: thin;                                              /* Firefox */
  scrollbar-color: color-mix(in oklab, var(--fg) 22%, transparent) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  /* 3px transparent border + content-box clip makes the thumb read as a slim
     rounded pill with breathing room rather than a fat bar. */
  background-color: color-mix(in oklab, var(--fg) 20%, transparent);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in oklab, var(--fg) 38%, transparent);
}
::-webkit-scrollbar-corner { background: transparent; }

/* ===== type scale ===== */

.hb-h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(44px, 5.5vw, 84px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.hb-h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.hb-h3 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0;
}

.hb-lede {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: color-mix(in oklab, var(--fg) 75%, transparent);
  margin: 0;
}

.hb-eyebrow {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 20px;
  display: block;
}
.hb-eyebrow.muted { color: var(--muted); }

.hb-mono {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ===== buttons ===== */

.hb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
  white-space: nowrap;
}
.hb-btn:hover { transform: translateY(-1px); }
.hb-btn--primary {
  background: var(--accent);
  color: var(--accent-fg);
}
.hb-btn--ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--border);
  font-weight: 500;
}
.hb-btn--ghost:hover { border-color: var(--fg); transform: none; }
.hb-btn--sm { padding: 10px 18px; font-size: 13px; }
/* Inline glyph for buttons (e.g. the play triangle). Sized in em so it
   tracks the button's font-size; .hb-btn's gap handles the spacing. */
.hb-btn__icon { width: 1em; height: 1em; flex: none; }

/* ===== chip ===== */

.hb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  background: oklch(0.08 0.01 30 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid color-mix(in oklab, white 18%, transparent);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hb-chip--sm { padding: 4px 9px; font-size: 10px; }

/* ===== meta pair (label + value) ===== */
.hb-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hb-meta-value {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.01em;
}

/* ===== inline banner (data unavailable / empty state) ===== */
.hb-banner {
  display: block;
  padding: 14px 18px;
  margin: 24px 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--fg) 4%, transparent);
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.hb-banner--warn {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
}
.hb-banner--ok {
  background: color-mix(in oklab, oklch(0.75 0.16 145) 10%, transparent);
  border-color: color-mix(in oklab, oklch(0.75 0.16 145) 35%, transparent);
}

/* Habanero 2026 - layout, nav, footer, page shell */

.hb-shell { min-height: 100vh; }

.hb-container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ===== sticky nav ===== */

.hb-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Fully transparent at the top of the page so the home hero art reads
     edge-to-edge under the nav. The frosted dark backdrop fades in only once
     the page is scrolled (.is-scrolled, toggled past 12px by nav.js). */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 240ms ease, border-color 240ms ease,
              backdrop-filter 240ms ease, -webkit-backdrop-filter 240ms ease;
}
.hb-nav.is-scrolled {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background: color-mix(in oklab, var(--bg) 75%, transparent);
  border-bottom-color: var(--border);
}
/* Transparent-state legibility: a soft dark halo keeps the brand + links
   readable over bright hero slides without a visible bar. Dropped once the
   frosted backdrop is in (.is-scrolled provides its own contrast). */
.hb-nav:not(.is-scrolled) .hb-nav__brand,
.hb-nav:not(.is-scrolled) .hb-nav__link {
  text-shadow: 0 1px 10px color-mix(in oklab, var(--bg) 78%, transparent),
               0 0 2px color-mix(in oklab, var(--bg) 62%, transparent);
}
/* Lift the inactive links toward white while transparent so they stay crisp
   over bright slide art; they ease back to --muted once the frosted backdrop
   is in (.is-scrolled). The active link keeps its own --fg + accent pill. */
.hb-nav:not(.is-scrolled) .hb-nav__link:not(.is-active) {
  color: color-mix(in oklab, var(--fg) 85%, var(--muted));
}
.hb-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  height: var(--nav-h);
}
.hb-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--fg);
}
.hb-nav__brand-text {
  font-family: 'Geist', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.hb-nav__logo {
  height: 32px;
  width: 32px;
  display: block;
  object-fit: contain;
}
.hb-nav__logo--lg { height: 40px; width: 40px; }

.hb-nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb-nav__link {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--t-fast) ease;
}
.hb-nav__link:hover { color: var(--fg); }
.hb-nav__link.is-active {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--fg);
}

/* Drawer-only extras (locale switcher + socials). Hidden on desktop;
   the mobile media query below promotes them into the open drawer. */
.hb-nav__drawer-extras { display: none; }

.hb-nav__cta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hb-nav__cta .hb-btn { padding: 9px 16px; font-size: 13px; }

.hb-nav__toggler {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: var(--fg);
  align-items: center;
  justify-content: center;
}
.hb-nav__toggler-bar,
.hb-nav__toggler-bar::before,
.hb-nav__toggler-bar::after {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg);
  position: relative;
}
.hb-nav__toggler-bar::before,
.hb-nav__toggler-bar::after { content: ""; position: absolute; left: 0; }
.hb-nav__toggler-bar::before { top: -6px; }
.hb-nav__toggler-bar::after { top: 6px; }

/* ===== locale switcher inside footer ===== */

.hb-locale-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb-locale-list a {
  color: var(--muted);
  text-decoration: none;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  /* CJK labels (简体中文) otherwise get squeezed into a one-character-
     per-line column on narrow screens; whole items wrap instead. */
  white-space: nowrap;
}
.hb-locale-list a.is-active { color: var(--fg); }

/* ===== footer ===== */

.hb-footer {
  padding: 80px var(--gutter) 40px;
  border-top: 1px solid var(--border);
  background: oklch(0.10 0.012 40);
  /* Was 120px on desktop - that plus every page section's own
     padding-bottom was producing a noticeable dead zone above the
     footer. 32px lets the border-top + bg-elev surface do the visual
     separating without an extra third of the viewport of empty space. */
  margin-top: 32px;
}
.hb-footer__inner { max-width: var(--max); margin: 0 auto; }

.hb-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
}
.hb-footer__intro p {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 20px;
  max-width: 320px;
  letter-spacing: -0.005em;
}
.hb-footer__colhead {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hb-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hb-footer__col a {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--fg);
  letter-spacing: -0.005em;
  text-decoration: none;
}
.hb-footer__col a:hover { color: var(--accent); }

.hb-footer__certs {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--border);
}
.hb-footer__certs-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hb-footer__certs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.hb-footer__certs-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  min-width: 130px;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  background: white;
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.hb-footer__certs-row a:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px oklch(0 0 0 / 0.4);
}
.hb-footer__certs-row img {
  max-height: 56px;
  max-width: 160px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}
/* invert override no longer needed since every logo sits on white */
.hb-footer__cert-img--invert { filter: none; }
.hb-footer__certs-row--labs a { height: 64px; min-width: 110px; }
.hb-footer__certs-row--labs img { max-height: 44px; max-width: 140px; }

/* social icons */
.hb-footer__socials {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  gap: 12px;
}
.hb-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
  transition: all var(--t-fast) ease;
}
.hb-footer__socials a:hover {
  color: var(--fg);
  border-color: var(--fg);
  transform: translateY(-2px);
}
.hb-footer__socials svg {
  width: 16px;
  height: 16px;
}

.hb-footer__legal {
  display: flex;
  flex-direction: column;
  padding-top: 28px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  gap: 18px;
}
.hb-footer__legal a { color: var(--muted); text-decoration: none; }
.hb-footer__legal a:hover { color: var(--fg); }
.hb-footer__legal-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.hb-footer__legal-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.hb-footer__legal-links > a { white-space: nowrap; }
.hb-footer__licence {
  /* The MGA/ONJN/Spelinspektionen/etc. block runs long. Drop the mono
     letter-spacing so it doesn't read like a serial number, cap line
     length, and stack one jurisdiction per line in the list. */
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--muted);
  max-width: 1024px;
  opacity: 0.82;
}
.hb-footer__licence-lead {
  margin: 0 0 6px;
}
.hb-footer__licence-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hb-footer__licence-list li {
  /* hanging indent: the authority name starts at the left margin, the
     wrapped detail text lines up under the first letter of the detail. */
  padding-left: 12px;
  text-indent: -12px;
  margin-bottom: 2px;
}
.hb-footer__licence-list li::before {
  content: "·";
  display: inline-block;
  width: 12px;
  text-indent: 0;
  color: var(--accent);
}
.hb-footer__licence-auth {
  color: var(--fg);
  opacity: 0.92;
}

/* ===== video modal ===== */
.hb-video {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: oklch(0.05 0.005 30 / 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}
.hb-video[hidden] { display: none; }
.hb-video.is-open {
  opacity: 1;
  pointer-events: auto;
}
.hb-video__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: oklch(0.15 0.01 30 / 0.8);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, transform 180ms ease;
}
.hb-video__close:hover {
  background: var(--accent);
  color: var(--accent-fg);
  transform: scale(1.05);
}
.hb-video__frame {
  position: relative;
  width: min(1280px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: black;
  box-shadow: 0 40px 80px -20px oklch(0 0 0 / 0.6);
}
.hb-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== game launch modal - similar shell to video modal but larger
       and with a persistent close bar on top */
.hb-gamemodal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: oklch(0.05 0.005 30 / 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.hb-gamemodal[hidden] { display: none; }
.hb-gamemodal.is-open { opacity: 1; pointer-events: auto; }
.hb-gamemodal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1280px, 100%);
  padding: 0 4px 12px;
  color: var(--fg);
  /* Sit above the iframe so the action tooltips (which drop below the bar
     over the top of the game) aren't hidden behind it. */
  position: relative;
  z-index: 3;
}
.hb-gamemodal__title {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.hb-gamemodal__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hb-gamemodal__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 9px;
  border-radius: 999px;
  background: oklch(0.15 0.01 30 / 0.85);
  border: 1px solid var(--border);
  color: var(--fg);
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.hb-gamemodal__action:hover {
  /* Neutral black-and-white hover (no accent fill) — lift the pill and
     brighten its border instead of going orange. */
  background: oklch(0.24 0.01 30 / 0.92);
  border-color: color-mix(in oklab, var(--fg) 45%, transparent);
  transform: translateY(-1px);
}
.hb-gamemodal__action svg { display: block; width: 20px; height: 20px; }
/* Icon-only action buttons (fullscreen / surprise / close) — the visible
   label is dropped; each button's aria-label carries its accessible name. */
.hb-gamemodal__action-label { display: none; }
/* Hover/focus tooltip for the icon-only buttons (label from data-tooltip),
   dropped just below the bar. */
.hb-gamemodal__action[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  padding: 5px 9px;
  border-radius: var(--radius-md);
  background: oklch(0.18 0.01 30 / 0.96);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  z-index: 4;
}
.hb-gamemodal__action[data-tooltip]:hover::after,
.hb-gamemodal__action[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Touch devices have no real hover, so :hover sticks after a tap and the
   tooltip lingers over the next game. Drop tooltips where hover isn't a thing. */
@media (hover: none) {
  .hb-gamemodal__action[data-tooltip]::after { content: none; }
}
/* The base rule sets display:inline-flex, which would otherwise beat the UA
   [hidden] rule — make hidden actions (e.g. the Explorer-only Surprise button)
   actually hide. */
.hb-gamemodal__action[hidden] { display: none; }
/* Swap the enter/exit icons based on aria-pressed so the same button renders
   the right glyph in both fullscreen and windowed states. */
.hb-gamemodal__fullscreen .hb-gamemodal__icon-exit { display: none; }
.hb-gamemodal__fullscreen[aria-pressed="true"] .hb-gamemodal__icon-enter { display: none; }
.hb-gamemodal__fullscreen[aria-pressed="true"] .hb-gamemodal__icon-exit { display: block; }
.hb-gamemodal__frame {
  position: relative;
  width: min(1280px, 100%);
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 120px);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: black;
  box-shadow: 0 40px 80px -20px oklch(0 0 0 / 0.6);
}
.hb-gamemodal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Dark while the game document loads, so there's no white flash before the
     game's own background paints. */
  background: #000;
}
/* Native fullscreen / fallback fullscreen - iframe fills the viewport, the
   bar floats over the top corners and dims the chrome so it doesn't compete
   with the game art. */
.hb-gamemodal:fullscreen,
.hb-gamemodal.is-fullscreen {
  padding: 0;
  background: black;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hb-gamemodal:fullscreen .hb-gamemodal__bar,
.hb-gamemodal.is-fullscreen .hb-gamemodal__bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(180deg, oklch(0 0 0 / 0.55), oklch(0 0 0 / 0));
  z-index: 2;
  pointer-events: none;
}
.hb-gamemodal:fullscreen .hb-gamemodal__actions,
.hb-gamemodal.is-fullscreen .hb-gamemodal__actions { pointer-events: auto; }
.hb-gamemodal:fullscreen .hb-gamemodal__frame,
.hb-gamemodal.is-fullscreen .hb-gamemodal__frame {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

@media (max-width: 720px) {
  /* Mobile: drop the 16:9 cage and let the iframe fill the available
     portrait viewport. The game's own responsive layout adapts. */
  .hb-gamemodal {
    padding: 8px;
    justify-content: flex-start;
  }
  .hb-gamemodal__bar {
    width: 100%;
    padding: 4px 8px;
  }
  .hb-gamemodal__action-label { display: none; }
  .hb-gamemodal__action { padding: 8px 10px; }
  .hb-gamemodal__actions { gap: 6px; }
  /* The fullscreen toggle is a desktop affordance - mobile browsers already
     fill the viewport and Safari iOS doesn't honour requestFullscreen on
     arbitrary elements. Hide the button rather than ship a no-op. */
  .hb-gamemodal__fullscreen { display: none; }
  .hb-gamemodal__frame {
    flex: 1 1 auto;
    width: 100%;
    aspect-ratio: auto;
    max-height: none;
    height: auto;
  }
}

/* ===== responsive ===== */
@media (max-width: 1024px) {
  :root { --gutter: 28px; }
  .hb-footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --nav-h: 64px; }
  /* Drop backdrop-filter on mobile so position:fixed children (the menu
     sheet) are sized against the viewport, not against .hb-nav. Keep the bar
     transparent at the top so the home hero bleeds under it like on desktop;
     fill solid only once scrolled or when the drawer is open. */
  .hb-nav,
  .hb-nav.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hb-nav.is-scrolled {
    background: var(--bg);
  }
  /* Separate rule: a browser without :has() support would otherwise drop the
     whole list (incl. .is-scrolled). Open drawer → solid bar where supported. */
  .hb-nav:has(.hb-nav__menu.is-open) {
    background: var(--bg);
  }
  /* Mobile: menu collapses; burger opens a fullscreen sheet of links */
  .hb-nav__menu {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    /* dvh tracks the browser's collapsing toolbar; the vh line is the
       fallback for engines without it. With bottom:0 alone the drawer's
       tail (language chips / socials) hid behind the toolbar + home
       indicator. */
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: transform var(--t-med) ease, opacity var(--t-med) ease, visibility 0s linear var(--t-med);
    z-index: 99;
  }
  .hb-nav__menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .hb-nav__menu .hb-nav__link {
    display: block;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 500;
    color: var(--fg);
    border: 1px solid transparent;
  }
  .hb-nav__menu .hb-nav__link.is-active {
    border-color: var(--border);
  }
  .hb-nav__toggler { display: inline-flex; }
  .hb-nav__toggler[aria-expanded="true"] .hb-nav__toggler-bar { background: transparent; }
  .hb-nav__toggler[aria-expanded="true"] .hb-nav__toggler-bar::before { top: 0; transform: rotate(45deg); }
  .hb-nav__toggler[aria-expanded="true"] .hb-nav__toggler-bar::after { top: 0; transform: rotate(-45deg); }
  .hb-nav__cta { display: none; }

  /* Drawer-extras block: shows the locale switcher + social icons under
     the nav links so the open burger drawer reads as a full nav surface,
     not just a list of routes. */
  .hb-nav__drawer-extras {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .hb-nav__drawer-section { display: flex; flex-direction: column; gap: 8px; }
  .hb-nav__drawer-label {
    font-family: 'Geist Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  /* Locale chips: pill-row, tappable targets sized for thumbs. */
  .hb-nav__drawer-extras .hb-locale-list {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Even 2-up grid instead of a flex-wrap that orphaned the 4th locale on
       its own row. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .hb-nav__drawer-extras .hb-locale-list a {
    display: block;
    text-align: center;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: oklch(0.16 0.014 48 / 0.6);
    color: var(--fg);
    font-family: 'Geist', sans-serif;
    font-size: 13px;
    text-decoration: none;
    transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
  }
  .hb-nav__drawer-extras .hb-locale-list a:hover {
    border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
  }
  .hb-nav__drawer-extras .hb-locale-list a.is-active {
    background: color-mix(in oklab, var(--accent) 18%, transparent);
    border-color: color-mix(in oklab, var(--accent) 60%, transparent);
    color: var(--fg);
  }
  /* Social row: round-button icons matching the footer treatment. */
  .hb-nav__drawer-socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .hb-nav__drawer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: oklch(0.16 0.014 48 / 0.6);
    color: var(--muted);
    transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
  }
  .hb-nav__drawer-socials a:hover {
    border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
    color: var(--accent);
  }
  .hb-nav__drawer-socials svg { width: 18px; height: 18px; }
  /* Drop the 80px margin-top from desktop - on mobile the last section
     already has its own padding-bottom, and the stacked footer reading
     long on a phone makes the extra gap feel like dead space. Also
     collapse the 5-col footer top to 2 columns (was 1) so the GAMES /
     SOLUTIONS / COMPANY / PARTNERS columns sit side-by-side rather than
     in a single tall stack. The intro brand block spans both columns. */
  .hb-footer { padding: 40px var(--gutter) 32px; margin-top: 0; }
  .hb-footer__top { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; padding-bottom: 32px; }
  .hb-footer__intro { grid-column: 1 / -1; }
  .hb-footer__legal-row { flex-direction: column; }
  /* Cap the licence small-print line a bit tighter on mobile so it
     doesn't read as an endless paragraph. */
  .hb-footer__licence { font-size: 10px; line-height: 1.55; }
}

/* ===== 18+ age gate ===== */
/* Hidden by default; agegate.js adds html.hb-age-pending (before paint) for
   un-verified humans, which reveals the overlay and locks scroll. */
.hb-agegate { display: none; }
html.hb-age-pending .hb-agegate {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html.hb-age-pending,
html.hb-age-pending body { overflow: hidden; }
.hb-agegate__panel {
  width: 100%;
  max-width: 460px;
  text-align: center;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: 0 30px 80px color-mix(in oklab, var(--bg) 70%, transparent);
}
.hb-agegate__logo { display: inline-block; margin-bottom: 24px; }
.hb-agegate__logo svg { width: 168px; height: auto; }
.hb-agegate__title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 12px;
}
.hb-agegate__body { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 28px; }
.hb-agegate__actions { display: flex; flex-direction: column; gap: 12px; }
/* display:flex above beats the UA [hidden] rule, so make the "No" path's
   hidden attribute actually hide the Yes/No buttons. */
.hb-agegate__actions[hidden] { display: none; }
.hb-agegate__actions .hb-btn { width: 100%; justify-content: center; }
.hb-agegate__denied { color: var(--accent); font-size: 14px; margin: 22px 0 0; }
.hb-agegate__note { color: var(--muted); font-size: 12px; margin: 24px 0 0; opacity: .7; }

/* Habanero 2026 - animated brand mark.
   Static parts (shield, wordmark) inherit color via the linearGradient fills
   defined in the SVG. Only the four flames animate; the whole flame group
   gets a subtle warm hue shimmer on top so it doesn't read as four
   independently-twitching dots. */
.hb-logo {
  display: block;
  height: auto;
  /* The viewBox is 1525 x 320 (cropped from the 1920x1080 source), so width
     governs scale. Containers set width via the existing .hb-nav__logo /
     .hb-nav__brand-text rules so we don't need a default here. */
}
.hb-logo__word { fill: #FFFFFF; }

/* Flame paths: scale from their own bottom edge so they grow upward like
   real flames rather than from the SVG canvas origin. */
.hb-logo__flame1,
.hb-logo__flame2,
.hb-logo__flame3,
.hb-logo__flame4 {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

@keyframes hb-logo-tall-a {
  0%, 100% { transform: scaleY(1)    scaleX(1)    translateY(0);    opacity: 1;    }
  18%      { transform: scaleY(1.22) scaleX(0.9)  translateY(-2px); opacity: 0.95; }
  37%      { transform: scaleY(0.82) scaleX(1.08) translateY(2px);  opacity: 0.8;  }
  58%      { transform: scaleY(1.32) scaleX(0.88) translateY(-3px); opacity: 1;    }
  78%      { transform: scaleY(0.94) scaleX(1.04) translateY(1px);  opacity: 0.9;  }
}
@keyframes hb-logo-tall-b {
  0%, 100% { transform: scaleY(1)    scaleX(1)    translateY(0);    opacity: 0.95; }
  22%      { transform: scaleY(0.78) scaleX(1.1)  translateY(2px);  opacity: 0.75; }
  46%      { transform: scaleY(1.28) scaleX(0.9)  translateY(-3px); opacity: 1;    }
  68%      { transform: scaleY(1.05) scaleX(0.95) translateY(-1px); opacity: 0.9;  }
  84%      { transform: scaleY(0.88) scaleX(1.05) translateY(1px);  opacity: 0.8;  }
}
@keyframes hb-logo-short-a {
  0%, 100% { transform: scale(1)                   translateY(0);    opacity: 0.85; }
  30%      { transform: scale(1.35)                translateY(-2px); opacity: 1;    }
  55%      { transform: scaleX(0.7) scaleY(0.5)    translateY(2px);  opacity: 0.4;  }
  80%      { transform: scale(1.1)                 translateY(-1px); opacity: 0.95; }
}
@keyframes hb-logo-short-b {
  0%, 100% { transform: scale(1)                   translateY(0);    opacity: 0.9;  }
  26%      { transform: scaleX(0.65) scaleY(0.45)  translateY(2px);  opacity: 0.4;  }
  52%      { transform: scale(1.4)                 translateY(-3px); opacity: 1;    }
  74%      { transform: scale(0.95)                translateY(0);    opacity: 0.8;  }
}
@keyframes hb-logo-hue-shift {
  0%, 100% { filter: hue-rotate(0deg)  saturate(1)   brightness(1);    }
  50%      { filter: hue-rotate(-6deg) saturate(1.1) brightness(1.08); }
}

.hb-logo__flame1 { animation: hb-logo-tall-a  1.05s ease-in-out infinite; }
.hb-logo__flame2 { animation: hb-logo-tall-b  0.95s ease-in-out infinite; animation-delay: -0.45s; }
.hb-logo__flame3 { animation: hb-logo-short-a 0.75s ease-in-out infinite; animation-delay: -0.20s; }
.hb-logo__flame4 { animation: hb-logo-short-b 0.85s ease-in-out infinite; animation-delay: -0.55s; }
.hb-logo__flames { animation: hb-logo-hue-shift 2.4s ease-in-out infinite; transform-box: fill-box; }

/* The flame is the brand mark and intentionally keeps its gentle flicker even
   under prefers-reduced-motion (it's small, slow and non-essential motion the
   page owner wants on) — so no reduced-motion gate here. */

/* Sizing helpers used from nav / footer. The SVG's viewBox is 1580 x 320
   (roughly 4.94:1) so width governs scale; height stays auto.
   Bigger sizes here also help the flame animation read on-screen - at
   small renders the 2-3px translateY in viewBox space falls below 1px
   on screen and the wiggle starts to look like sub-pixel jitter. */
.hb-nav__brand .hb-logo {
  width: 168px;
  /* Nudge the SVG up so the wordmark cap-center lines up with the menu
     cap-center. The flame block above the wordmark inside the viewBox
     pulls the SVG's geometric centre upward, so flex align-items:center
     leaves the wordmark sitting a few pixels below the menu line. The
     flames have headroom in the nav's 16px top padding. */
  margin-top: -4px;
}
.hb-footer__intro .hb-logo { width: 216px; margin-bottom: 16px; }

@media (max-width: 720px) {
  .hb-nav__brand .hb-logo { width: 144px; margin-top: -3px; }
}

/* Habanero 2026 - game-art primitives
   Translation of GameArt in app.jsx:193-239 - gradient + reel-strip motif used as a
   fallback when a real game thumbnail fails to load, AND as a decorative overlay
   on game tiles.

   A tile sets --hue via [data-fallback-hue] so each title gets a stable colour. */

.hb-tile {
  position: relative;
  display: block;
  background: var(--bg-elev);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform var(--t-med) ease, border-color var(--t-med) ease;
  --hue: attr(data-fallback-hue type(<number>), 30);
}
.hb-tile:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}

.hb-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.hb-tile__img.failed { display: none; }

/* Fallback gradient + glyph (shown when image is missing or fails) */
.hb-tile__fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in oklab, white 25%, transparent) 0%, transparent 60%),
    linear-gradient(160deg,
      oklch(0.35 0.16 var(--hue, 30)) 0%,
      oklch(0.18 0.10 calc(var(--hue, 30) - 20)) 100%);
}
/* Placeholder mark shown when a game has no thumbnail: the Habanero icon
   instead of a playing-card suit glyph. Masked (not a plain image) so it
   renders as a subtle monochrome-white silhouette — the icon's "H" is a
   transparent knockout, so the card gradient shows through it. Absolute
   path: this file ships via the bundled site2026css. */
.hb-tile__fallback::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  background-color: color-mix(in oklab, white 80%, transparent);
  -webkit-mask: url(/Content/img/habanero_icon.png) no-repeat center;
  -webkit-mask-size: contain;
  mask: url(/Content/img/habanero_icon.png) no-repeat center;
  mask-size: contain;
}

/* bottom shadow + meta over either real image or fallback */
.hb-tile__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 50%, oklch(0.06 0.01 30 / 0.92) 100%);
  pointer-events: none;
}
.hb-tile__meta {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 3;
}
.hb-tile__type {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: color-mix(in oklab, white 60%, transparent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hb-tile__name {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: white;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* small variant (home catalog preview 6-up grid) */
.hb-tile--sm .hb-tile__fallback::before { width: 46px; height: 46px; }
.hb-tile--sm .hb-tile__name { font-size: 14px; }

/* hero/billboard variant (16:10 release card) */
.hb-tile--billboard {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl);
}
.hb-tile--billboard .hb-tile__meta {
  left: 28px;
  right: 28px;
  bottom: 28px;
}
.hb-tile--billboard .hb-tile__name {
  font-size: 36px;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

/* full-bleed hero artwork (Cinematic) - covers section, no border */
.hb-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hb-art__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hb-art__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%, transparent 0%, oklch(0.10 0.02 30 / 0.65) 100%);
}
.hb-art__noise {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Habanero 2026 - home page: hero variants + sections
   Translation of heroes.jsx and sections.jsx into static CSS.
   Hero variants are gated by body[data-hero="..."] so only the active partial renders;
   but each variant ships its own class namespace for safety. */

/* ======================= HERO COMMON ======================= */

.hb-hero {
  position: relative;
  border-bottom: 1px solid var(--border);
}

.hb-hero__container {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  z-index: 2;
}

/* ===== Variant A: Cinematic full-bleed ===== */
.hb-hero--cinematic {
  /* Fill the whole viewport so only the hero shows above the fold (the stats
     band sits just below, revealed on scroll) - like the old site. The hero is
     pulled up under the nav by margin-top, and 100dvh tracks the mobile
     browser's collapsing toolbar (vh is the fallback). */
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  /* Bleed the art up under the transparent sticky nav so it reaches the top
     edge (the nav frosts over it, then fills solid once .hb-nav.is-scrolled
     kicks in on scroll). The content is padded down to clear the nav. */
  margin-top: calc(-1 * var(--nav-h));
}
.hb-hero--cinematic .hb-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1100ms cubic-bezier(.4,0,.2,1), transform 1100ms cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.hb-hero--cinematic .hb-hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.hb-hero--cinematic .hb-hero__overlay {
  position: absolute;
  inset: 0;
  /* Lighter scrim so the art keeps its colour. The left ramp still shades the
     headline area for legibility, but fades to clear by ~62% so the centre +
     right of the artwork pop at full saturation; the bottom fade is softened. */
  background:
    linear-gradient(180deg, transparent 72%, oklch(0.10 0.015 40 / 0.6) 100%),
    linear-gradient(90deg, oklch(0.10 0.015 40 / 0.82) 0%, oklch(0.10 0.015 40 / 0.38) 38%, oklch(0.10 0.015 40 / 0) 62%);
  z-index: 1;
  pointer-events: none;
}
/* The shared art vignette darkens to 0.65 - too muting for the hero. Soften it
   here so the cinematic art stays vibrant (game tiles elsewhere keep theirs). */
.hb-hero--cinematic .hb-art__vignette {
  background: radial-gradient(ellipse at 40% 40%, transparent 0%, oklch(0.10 0.02 30 / 0.28) 100%);
}
.hb-hero--cinematic .hb-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* top padding = nav height so the vertically-centred copy sits balanced in
     the area below the (overlaid) nav rather than under it */
  padding: var(--nav-h) var(--gutter) 0;
  max-width: var(--max);
  margin: 0 auto;
  /* by default content slides don't intercept clicks; the active one re-enables them */
  pointer-events: none;
  z-index: 2;
}
.hb-hero--cinematic .hb-hero__content.is-active {
  pointer-events: auto;
}
.hb-hero--cinematic .hb-hero__copy { max-width: 640px; }
.hb-hero__foreground {
  max-width: min(640px, 70vw);
  max-height: 320px;
  height: auto;
  width: auto;
  display: block;
  margin-bottom: 28px;
  filter: drop-shadow(0 12px 32px oklch(0 0 0 / 0.4));
}
.hb-hero__foreground--center {
  margin-left: auto;
  margin-right: auto;
}

/* Game / featured slide foreground in the Cinematic hero. Floats to the
   right of the copy column and idles with a slow vertical bob so the page
   isn't completely static when nothing is moving. The content slide is
   already absolute-positioned, so we anchor the artwork to the right and
   centre it vertically. */
.hb-hero__content--has-fg .hb-hero__copy { max-width: min(560px, 56%); }
.hb-hero__foreground--right {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  /* Key art size on the hero (object-fit:contain, so the binding cap governs). */
  max-width: 41%;
  max-height: 74%;
  object-fit: contain;
  margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 20px 50px oklch(0 0 0 / 0.55))
          drop-shadow(0 0 24px oklch(0.67 0.20 38 / 0.18));
  animation: hb-hero-fg-bob 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes hb-hero-fg-bob {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(calc(-50% - 8px)); }
}
@media (prefers-reduced-motion: reduce) {
  .hb-hero__foreground--right { animation: none; }
}
/* Below tablet, the right column would crowd the copy; tuck the foreground
   behind the text at low opacity so it still hints at the title without
   blocking it. */
@media (max-width: 900px) {
  .hb-hero__content--has-fg .hb-hero__copy { max-width: 100%; }
  .hb-hero__foreground--right {
    right: 0;
    max-width: 60%;
    max-height: 60%;
    opacity: 0.35;
    z-index: 0;
  }
  .hb-hero__content--has-fg .hb-hero__copy { position: relative; z-index: 1; }
}
@media (max-width: 540px) {
  /* On phones, centre the foreground key art in the upper portion of the
     slide where the copy doesn't reach. The earlier top-right anchor felt
     like a sticker stuck onto the corner; centring lets the logo / key
     art read as the focal point with the title + CTAs sitting cleanly
     below it. Pushed down off the top so it clears the (transparent) nav the
     hero now bleeds under, rather than tucking behind the logo / burger. */
  .hb-hero__foreground--right {
    top: calc(var(--nav-h) + 6%);
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    max-width: 90%;
    max-height: 52%;
    opacity: 1;
    animation: none;
    z-index: 0;
  }
}

/* Editorial hero foreground variants. The Editorial layout has its own
   art column on the right with absolute positioning, so the foreground
   image floats inside that column rather than over the copy. */
.hb-hero__foreground--editorial-event {
  position: absolute;
  inset: auto 10% 50%;
  transform: translateY(50%);
  max-width: 80%;
  max-height: 60%;
  object-fit: contain;
  margin: 0;
  filter: drop-shadow(0 10px 30px oklch(0 0 0 / 0.4));
}
.hb-hero__foreground--editorial-game {
  position: absolute;
  inset: 5% 5% 5% 5%;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  margin: 0;
  filter: drop-shadow(0 20px 50px oklch(0 0 0 / 0.55))
          drop-shadow(0 0 24px oklch(0.67 0.20 38 / 0.16));
  animation: hb-hero-fg-bob-editorial 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes hb-hero-fg-bob-editorial {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hb-hero__foreground--editorial-game { animation: none; }
}
/* event hero: SBC-style centered logo, text below */
.hb-hero--event { text-align: center; }
.hb-hero--event .hb-hero__copy { max-width: 880px; margin: 0 auto; text-align: center; }
.hb-hero--event .hb-hero__cta { justify-content: center; }
.hb-hero--event h1 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.015em; }
.hb-hero--event .hb-hero__tagline { margin-left: auto; margin-right: auto; }
.hb-hero__icon { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-right: 4px; }
.hb-hero--cinematic h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  /* Tuned down from 56px: these are full marketing sentences, not short
     punchy titles, so the old max overwhelmed the slide and competed with the
     key art. Smaller cap lets the art read as the focal point. */
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 20px 0 0;
  text-wrap: balance;
  max-width: 620px;
}
.hb-hero--cinematic .hb-hero__tagline {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--fg) 78%, transparent);
  margin-top: 16px;
  max-width: 520px;
  letter-spacing: -0.005em;
}
.hb-hero--cinematic .hb-hero__cta {
  display: flex;
  gap: 12px;
  margin-top: 36px;
}
/* Large desktops / 4K. The key art is full-bleed and scales with the
   viewport (vw/% sized), but the copy was capped at 46px and read as
   undersized against it on big monitors. Scale the copy fluidly from
   1600px up. Values are tuned to be continuous with the base sizes
   (≈46px h1 / 16px tagline at 1600px) so smaller screens are untouched. */
@media (min-width: 1600px) {
  .hb-hero--cinematic .hb-hero__copy { max-width: min(40vw, 1000px); }
  .hb-hero--cinematic h1 { font-size: clamp(46px, 3vw, 88px); max-width: min(40vw, 1000px); }
  .hb-hero--cinematic .hb-hero__tagline { font-size: clamp(16px, 1vw, 23px); max-width: min(32vw, 720px); }
  .hb-hero--cinematic .hb-hero__cta { margin-top: clamp(36px, 2.6vw, 52px); }
  .hb-hero--cinematic .hb-hero__cta .hb-btn { font-size: clamp(14px, 0.85vw, 17px); }
}

.hb-hero__indicator {
  position: absolute;
  /* Align the pips/count to the same content edges as the rest of the page
     (max-width box + gutter), like .hb-hero__container — not a gutter in from
     the viewport, which left it sitting a gutter left of the content. */
  left: 0;
  right: 0;
  bottom: 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  z-index: 3;
}
.hb-hero__pips { display: flex; gap: 8px; }
.hb-hero__pip {
  position: relative;
  height: 3px;
  width: 24px;
  background: color-mix(in oklab, var(--fg) 25%, transparent);
  border: 0;
  padding: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: all 320ms ease;
}
/* The visible bar is only 3px tall, which is a near-impossible click target.
   This transparent overlay enlarges the hit area to ~39px tall without moving
   the bar or disturbing the flex-end alignment with the count. The -4px sides
   fill the 8px gap so the whole pip strip is clickable, no dead zones. */
.hb-hero__pip::before {
  content: "";
  position: absolute;
  top: -18px;
  bottom: -18px;
  left: -4px;
  right: -4px;
}
.hb-hero__pip.is-active {
  width: 48px;
  background: var(--fg);
}
.hb-hero__grid {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ===== Variant B: Editorial split ===== */
.hb-hero--editorial {
  padding: 100px var(--gutter) 80px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-hero--editorial .hb-hero__split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
  min-height: 620px;
}
.hb-hero--editorial h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0;
}
.hb-hero--editorial .hb-hero__tagline {
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: color-mix(in oklab, var(--fg) 75%, transparent);
  margin-top: 20px;
  max-width: 480px;
  letter-spacing: -0.005em;
}
.hb-hero--editorial .hb-hero__cta {
  display: flex;
  gap: 12px;
  margin-top: 40px;
}
.hb-hero--editorial .hb-hero__meta {
  display: flex;
  gap: 32px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.hb-hero--editorial .hb-hero__art {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 40px 80px -20px oklch(0.05 0 0 / 0.5);
}
.hb-hero--editorial .hb-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms ease;
}
.hb-hero--editorial .hb-hero__slide.is-active { opacity: 1; }
.hb-hero--editorial .hb-hero__art-chip {
  position: absolute;
  left: 24px;
  top: 24px;
}
.hb-hero--editorial .hb-hero__art-tag {
  position: absolute;
  left: 24px;
  bottom: 24px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: color-mix(in oklab, white 90%, transparent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: oklch(0.08 0.01 30 / 0.6);
  backdrop-filter: blur(8px);
}
.hb-hero--editorial .hb-hero__dots {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 6px;
}
.hb-hero--editorial .hb-hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  padding: 0;
  border: 0;
  background: color-mix(in oklab, white 30%, transparent);
  cursor: pointer;
  transition: background 200ms ease;
}
.hb-hero--editorial .hb-hero__dot.is-active { background: white; }

/* ===== Variant C: Gallery grid ===== */
.hb-hero--gallery {
  padding: 80px var(--gutter) 56px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-hero--gallery .hb-hero__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
  gap: 40px;
}
.hb-hero--gallery h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
  max-width: 720px;
}
.hb-hero--gallery .hb-hero__lede {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 320px;
  margin: 0;
  letter-spacing: -0.005em;
}
.hb-hero--gallery .hb-hero__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 560px;
}
.hb-hero--gallery .hb-gallery-card {
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
  outline: 1px solid var(--border);
  outline-offset: -1px;
  transition: transform 300ms ease, outline-color 200ms ease;
}
.hb-hero--gallery .hb-gallery-card.is-active { outline: 2px solid var(--accent); }
.hb-hero--gallery .hb-gallery-card:hover { transform: translateY(-2px); }
.hb-hero--gallery .hb-gallery-card--large { grid-row: span 2; }
.hb-hero--gallery .hb-gallery-card--wide { grid-column: span 2; }

/* ===== Variant D: Typographic ===== */
.hb-hero--typographic {
  padding: 120px var(--gutter) 0;
  max-width: var(--max);
  margin: 0 auto;
  overflow: hidden;
}
.hb-hero--typographic .hb-hero__top {
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.hb-hero--typographic h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(44px, 5.5vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.hb-hero--typographic h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hb-hero--typographic .hb-hero__tagline {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 540px;
  margin: 32px auto 0;
  letter-spacing: -0.005em;
}
/* Hero subtext (Squidex SubText) is always a short status tag — a release
   date ("OUT MAY 2026") or an event/booth line — so render it as a mono
   label across all variants, matching the site's mono label system. */
.hb-hero .hb-hero__tagline {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.hb-hero--typographic .hb-hero__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 40px;
}
.hb-hero--typographic .hb-hero__reel {
  margin-top: 88px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.hb-hero--typographic .hb-reel-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
  outline: 1px solid var(--border);
  outline-offset: -1px;
  transition: all 300ms ease;
  background: var(--bg-elev);
}
.hb-hero--typographic .hb-reel-card.is-active {
  outline: 2px solid var(--accent);
  transform: translateY(-8px);
}

/* ======================= STATS STRIP ======================= */

.hb-stats {
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
}
/* Short positioning line above the numbers so they read as proof points
   rather than landing cold straight after the hero. */
/* Centred to match the centred numbers below, so the whole band reads as one
   composition rather than a left headline over centred stats. */
.hb-stats__lead {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
  text-align: center;
}
/* No eyebrow — the statement carries the section on its own, so it's scaled
   up to roughly the section-title scale. */
.hb-stats__headline {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 0 auto;
  max-width: 980px;
  text-wrap: balance;
}
.hb-stats__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.hb-stats__cell {
  padding: 0 32px;
  text-align: center;
}
.hb-stats__cell + .hb-stats__cell { border-left: 1px solid var(--border); }
.hb-stats__num {
  font-family: 'Geist', sans-serif;
  font-size: 56px;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--fg);
  line-height: 1;
  margin-bottom: 12px;
}
.hb-stats__label {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.hb-stats__sub {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  letter-spacing: 0.04em;
}

/* ======================= SECTION SHELL ======================= */

.hb-section {
  /* Tightened from 120 -> 64: the stacked 120s left too much air around
     sections like "On the road,". 64 gives ~128px gaps, closer to the
     orbit section's tighter rhythm. */
  padding: 64px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.hb-section--dark {
  background: color-mix(in oklab, oklch(0.08 0.01 30) 60%, var(--bg));
  /* Only a top border: the darker background closes the band visually, and
     the footer's own border-top is the separator before the footer — a
     border-bottom here would double up with it (two stacked rules). */
  border-top: 1px solid var(--border);
  max-width: none;
  margin: 0;
  /* Full-bleed band: drop the gutter padding here and move it onto the inner,
     so the inner's content lines up with the same left edge as the normal
     (max-width-centred) sections instead of sitting a gutter further in. */
  padding-left: 0;
  padding-right: 0;
}
.hb-section--dark .hb-section__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.hb-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 56px;
  gap: 40px;
  flex-wrap: wrap;
}

/* ======================= RELEASES ======================= */

.hb-releases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.hb-releases__card {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform 400ms ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.hb-releases__card:hover { transform: translateY(-4px); }
.hb-releases__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, oklch(0.08 0.01 30 / 0.95) 100%);
  z-index: 2;
}
.hb-releases__tags {
  position: absolute;
  left: 28px;
  top: 28px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hb-releases__body {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  z-index: 3;
}
.hb-releases__release-line {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: color-mix(in oklab, white 65%, transparent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hb-releases__title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: var(--font-display-weight, 500);
  color: white;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 8px;
}
.hb-releases__tagline {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: color-mix(in oklab, white 72%, transparent);
  max-width: 420px;
  letter-spacing: -0.005em;
  margin: 0;
}

/* ======================= CATALOG PREVIEW ======================= */

.hb-catalog__filters {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--fg) 5%, transparent);
  border: 1px solid var(--border);
}
.hb-catalog__filter {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--t-fast) ease;
}
.hb-catalog__filter.is-active {
  background: var(--fg);
  color: oklch(0.12 0.01 40);
}

.hb-catalog__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.hb-catalog__more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ======================= EVENTS ======================= */

.hb-events {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
/* Single-event variant: a lone card was rendering at 50% width with the
   internal grid divider running through empty space to its right. Collapse
   to a single column so the card fills the section width. */
.hb-events--single { grid-template-columns: 1fr; }
.hb-events__cell {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  color: inherit;
}
.hb-events__cell a[href]:not(.hb-btn):hover { color: var(--accent); }
.hb-events__cell:nth-child(odd)  { border-right: 1px solid var(--border); }
.hb-events__cell:nth-last-child(n+3) { border-bottom: 1px solid var(--border); }
/* Cover banner from Squidex Image. Hidden on desktop where the current
   text-only layout already reads well; surfaces on mobile (see breakpoint
   below) as a 16:9 header so the card has a visual anchor. */
.hb-events__cover { display: none; }
/* No vertical divider when there's only one cell. */
.hb-events--single .hb-events__cell { border-right: 0; }
/* "Find us" affordance — a white-border ghost pill (not an accent fill). */
.hb-events__booth {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  transition: border-color var(--t-fast) ease;
}
.hb-events__cell:hover .hb-events__booth { border-color: var(--fg); }
.hb-events__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.hb-events__date {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hb-events__name {
  font-family: 'Geist', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
}
.hb-events__top { gap: 16px; flex-wrap: wrap; }
.hb-events__top .hb-btn { flex-shrink: 0; align-self: flex-start; white-space: nowrap; }
.hb-events__city {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.hb-events__venue {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: -0.005em;
}

/* ======================= PRESS ======================= */

.hb-press {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.hb-press__card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  cursor: pointer;
  transition: all 300ms ease;
  min-height: 320px;
  text-decoration: none;
  color: inherit;
}
.hb-press__card:hover {
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  transform: translateY(-3px);
}
/* Optional press hero image. Full-bleed banner pulled out to the card edges
   (cancels the 28px padding) with the card's top corners rounded. Only the
   /news cards carry the .hb-press__media markup; the home preview omits it. */
.hb-press__media {
  margin: -28px -28px 24px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: color-mix(in oklab, var(--fg) 8%, transparent);
}
.hb-press__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.hb-press__card--media:hover .hb-press__media img {
  transform: scale(1.04);
}
.hb-press__meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hb-press__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--font-display-weight, 500);
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.hb-press__excerpt {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 16px;
  letter-spacing: -0.005em;
  flex: 1;
}
.hb-press__more {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ===== responsive collapses ===== */
@media (max-width: 1024px) {
  .hb-section { padding: 80px var(--gutter); }
  .hb-section__head { margin-bottom: 36px; }
  /* Stats are 3 cells now (Games / Languages / Markets - awards row was
     dropped). Keep them on a single row at tablet width; there's still
     room and a 2+1 grid looks lopsided. */
  .hb-stats__inner { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .hb-releases, .hb-press { grid-template-columns: 1fr 1fr; }
  .hb-catalog__grid { grid-template-columns: repeat(3, 1fr); }
  .hb-hero--editorial .hb-hero__split { grid-template-columns: 1fr; gap: 40px; }
  .hb-hero--gallery .hb-hero__grid { grid-template-columns: 1fr 1fr; height: auto; grid-template-rows: repeat(3, 1fr); }
  .hb-hero--gallery .hb-gallery-card--large,
  .hb-hero--gallery .hb-gallery-card--wide { grid-column: span 2; grid-row: auto; }
  .hb-hero--typographic .hb-hero__reel { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  /* Tightened top/bottom padding from 56 to 40 so the gap between sections
     (and especially press -> footer) doesn't read as dead space on phones. */
  .hb-section { padding: 40px var(--gutter); }
  .hb-section:last-of-type { padding-bottom: 24px; }
  .hb-section__head { margin-bottom: 28px; flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Surface the stats on mobile as a compact 3-up row: keep the 3 columns
     (base grid) but shrink the numerals and padding and drop the sub-lines so
     it reads as a tidy strip rather than the 56px scale that previously ate
     half the viewport. */
  .hb-stats__inner { padding: 0 var(--gutter) 40px; }
  .hb-stats__cell { padding: 0 6px; }
  .hb-stats__num { font-size: clamp(24px, 8vw, 34px); margin-bottom: 6px; }
  .hb-stats__label { font-size: 12px; line-height: 1.2; }
  .hb-stats__sub { display: none; }
  .hb-stats__lead { padding: 40px var(--gutter) 24px; }
  .hb-releases, .hb-press, .hb-events { grid-template-columns: 1fr; gap: 16px; }
  .hb-events__cell:nth-child(odd) { border-right: 0; }
  .hb-events__cell:not(:last-child) { border-bottom: 1px solid var(--border); }
  .hb-events__cell { padding: 0 0 22px; overflow: hidden; }
  /* Squidex cover image surfaces on mobile as a full-bleed 16:9 banner
     at the top of the card; the remaining card body picks up its own
     horizontal padding so the image goes edge-to-edge. */
  .hb-events__cover {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 18px;
    background: oklch(0.18 0.012 50 / 0.6);
  }
  .hb-events__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Card body padding lives on the inner blocks now since the cell itself
     went padding-less so the cover image can full-bleed. */
  .hb-events__cell > div:not(.hb-events__cover) { padding-inline: 22px; }
  /* Hide the duplicate Request Meeting CTA in the section head - the
     same button is inside each event card. */
  .hb-section__head-cta { display: none; }
  .hb-catalog__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .hb-catalog__filters { overflow-x: auto; max-width: 100%; }
  .hb-catalog__more { margin-top: 32px; }
  .hb-hero--cinematic { min-height: 480px; }
  .hb-hero--cinematic h1 { font-size: clamp(28px, 7vw, 44px); }
  .hb-hero--cinematic .hb-hero__copy { max-width: 100%; }
  .hb-hero--cinematic .hb-hero__content { padding: 0 var(--gutter); }
  .hb-hero--cinematic .hb-hero__cta { flex-wrap: wrap; gap: 8px; }
  .hb-hero--cinematic .hb-hero__cta .hb-btn { padding: 11px 18px; font-size: 13px; }

  /* Releases card - stack title + button vertically so the button isn't
     squeezed into the right column on narrow screens. */
  .hb-releases__card { aspect-ratio: auto; min-height: 360px; }
  .hb-releases__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .hb-releases__title { font-size: 28px; }
  .hb-releases__body .hb-btn { align-self: flex-start; }
}

/* Habanero 2026 - Games page (filterable catalog) */

.hb-games-hero {
  padding: 100px var(--gutter) 56px;
  max-width: var(--max);
  margin: 0 auto;
}

.hb-games {
  padding: 0 var(--gutter) 120px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-games__filterbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--nav-h);
  background: var(--bg);
  z-index: 10;
  margin-bottom: 40px;
  gap: 24px;
}
.hb-games__filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.hb-games__filter {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all var(--t-fast) ease;
  /* A wrapped label ("Top\ntitles") leaves the curated dot floating
     above its own text; pills stay one line and the row scrolls. */
  white-space: nowrap;
}
.hb-games__filter.is-active {
  background: var(--fg);
  color: oklch(0.12 0.01 40);
}
/* Curated pills (Top / New) get a small accent-coloured dot prefix so they
   read as "curated lists" sitting beside the data-driven category pills. */
.hb-games__filter--curated::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: 2px;
}
.hb-games__filter--curated.is-active::before {
  background: oklch(0.12 0.01 40);
}
.hb-games__count {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.hb-games__searchwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 1 280px;
  min-width: 200px;
}
.hb-games__searchicon {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
}
.hb-games__search {
  width: 100%;
  background: oklch(0.18 0.012 50 / 0.6);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 9px 36px 9px 36px;
  border-radius: var(--radius-pill);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.hb-games__search::placeholder { color: var(--muted); }
.hb-games__search:focus {
  outline: none;
  border-color: var(--accent);
  background: oklch(0.18 0.012 50 / 0.85);
}
/* Hide the default WebKit search "X" - we ship our own clear button so the
   styling is consistent across browsers and respects our accent colour. */
.hb-games__search::-webkit-search-cancel-button,
.hb-games__search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.hb-games__searchclear {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: oklch(0.30 0.01 50 / 0.7);
  color: var(--fg);
  cursor: pointer;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.hb-games__searchclear:hover { background: var(--accent); color: var(--accent-fg); }
.hb-games__searchclear[hidden] { display: none; }
/* Tiles filtered out by the category pill or the search query are
   collapsed, not just hidden, so the grid reflows without gaps. */
.hb-tile.is-filtered-out { display: none; }
.hb-games__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* ===== right-hand filterbar cluster (search · count · view toggle) ===== */
.hb-games__barright {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

/* ===== Grid / Orbit view toggle (shared with the sphere page) ===== */
.hb-viewtoggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: oklch(0.18 0.012 50 / 0.5);
  flex: none;
  /* Stays clickable inside the sphere page's pointer-events:none HUD. */
  pointer-events: auto;
}
.hb-viewtoggle__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.hb-viewtoggle__opt:hover { color: var(--fg); }
.hb-viewtoggle__opt.is-active { background: var(--fg); color: oklch(0.12 0.01 40); cursor: default; }
.hb-viewtoggle__opt svg { width: 14px; height: 14px; display: block; }
/* accent "new" dot on the Orbit option */
.hb-viewtoggle__opt--new::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.hb-viewtoggle__opt--new.is-active::after { background: oklch(0.12 0.01 40); }

/* ===== "Take a Spin!" orbit section (home) — title + subtitle in the section
   header (CTA on its right, like the other sections), the big globe below.
   Uses the standard .hb-section padding now that that's been tightened, so its
   spacing matches the other home sections. ===== */
.hb-orbit .hb-section__head { margin-bottom: 24px; }
.hb-orbit__sub {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.4;
  max-width: 520px;
}
.hb-orbit__cta {
  flex: none;
  white-space: nowrap;
}
/* The globe is the whole content row: big, centred, and bled a touch past the
   section so it fills the space rather than floating in black. */
.hb-orbitband {
  display: block;
  position: relative;
  text-decoration: none;
  /* It's a decorative link, not a drag surface — stop a drag from selecting
     the band's content or kicking off a native link drag-ghost. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.hb-orbitband-canvas {
  display: block;
  width: calc(100% + 2 * var(--gutter));
  height: 500px;
  margin: -8px calc(-1 * var(--gutter)) -16px;
  pointer-events: none;
}
.hb-orbitband-arrow { transition: transform var(--t-fast) ease; }
.hb-orbit__cta:hover .hb-orbitband-arrow,
.hb-orbitband:hover .hb-orbitband-arrow { transform: translateX(3px); }

@media (max-width: 1280px) {
  .hb-games__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .hb-games__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .hb-games-hero { padding: 56px var(--gutter) 28px; }
}
@media (max-width: 720px) {
  .hb-games-hero { padding: 28px var(--gutter) 16px; }
  .hb-games__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Two rows: pills swipe across the first, search + title count share
     the second (count to the right of the box instead of a lonely third
     line). */
  .hb-games__filterbar { flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; margin-bottom: 24px; }
  /* Swipeable filter row; the raw scrollbar under the pills looked like a
     rendering glitch, so it's hidden (the cut-off last pill is the
     scroll affordance). */
  .hb-games__filters { flex: 1 1 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
  .hb-games__filters::-webkit-scrollbar { display: none; }
  /* flex-basis 0 + min-width 0 lets the search box shrink so the title
     counter always fits beside it ("198 TITLES" was pushing onto its
     own row, "6 TITLES" clipped at the edge). */
  .hb-games__searchwrap { flex: 1 1 0; width: auto; min-width: 0; max-width: none; }
  .hb-games { padding-bottom: 56px; }
  /* search + count + toggle share the second row; let them wrap if tight */
  .hb-games__barright { flex: 1 1 100%; flex-wrap: wrap; gap: 10px; }
  .hb-viewtoggle__opt { padding: 6px 10px; }
  /* orbit section: smaller globe under the header */
  .hb-orbitband-canvas { height: 300px; margin: 4px calc(-1 * var(--gutter)) -8px; }
}

/* Habanero 2026 - Solutions page */

.hb-solutions-hero {
  padding: 100px var(--gutter) 32px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-solutions-hero h1 .muted { color: var(--muted); display: block; }
.hb-solutions-hero p {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 32px;
  max-width: 640px;
  letter-spacing: -0.01em;
}

.hb-pillars {
  padding: 0 var(--gutter) 32px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.hb-pillar {
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hb-pillar__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: var(--font-display-weight, 500);
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0;
  line-height: 1.05;
}
.hb-pillar__body {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  letter-spacing: -0.005em;
  flex: 1;
}
.hb-pillar__spec {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.06em;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.hb-partners {
  /* Whitespace-separated like the home sections (no divider rule). Gutter on
     the inner so content lines up with the max-width-on-section sections. */
  padding: 100px 0;
}
.hb-partners__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.hb-partners__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  align-items: stretch;
}
.hb-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: white;
  transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, border-color var(--t-fast) ease;
  text-decoration: none;
}
.hb-partner:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 40%, transparent);
  box-shadow: 0 12px 28px -10px oklch(0 0 0 / 0.5);
}
.hb-partner img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: filter var(--t-fast) ease, opacity var(--t-fast) ease;
}
.hb-partner:hover img { filter: grayscale(0); opacity: 1; }

@media (max-width: 1280px) { .hb-partners__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1024px) { .hb-partners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .hb-partners { padding: 64px 0; }
  .hb-partners__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .hb-partner { height: 72px; padding: 12px 14px; }
}

.hb-markets {
  /* De-banded: no dark fill / divider, flows on whitespace like the rest. */
  padding: 100px 0;
  scroll-margin-top: var(--nav-h);  /* #markets anchor clears the sticky nav */
}
.hb-markets__inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.hb-markets__head { margin-bottom: 56px; }
.hb-markets__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.hb-market {
  padding: 20px 18px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hb-market::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in oklab, oklch(0.75 0.16 145) 90%, transparent);
}

.hb-cta {
  padding: 120px var(--gutter);
  text-align: center;
}
.hb-cta__inner { max-width: 880px; margin: 0 auto; }
.hb-cta h2 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.hb-cta p {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 24px;
  letter-spacing: -0.005em;
}
.hb-cta__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 40px;
  flex-wrap: wrap;
}

@media (max-width: 1024px) {
  .hb-pillars__grid { grid-template-columns: 1fr; gap: 28px; }
  .hb-markets__grid { grid-template-columns: repeat(3, 1fr); }
  .hb-solutions-hero { padding: 56px var(--gutter) 32px; }
  .hb-solutions-hero p { font-size: 17px; margin-top: 20px; }
}
@media (max-width: 720px) {
  .hb-solutions-hero { padding: 32px var(--gutter) 20px; }
  .hb-solutions-hero h1 { font-size: clamp(32px, 7vw, 44px); }
  .hb-solutions-hero p { font-size: 15px; }
  .hb-pillars { padding: 24px var(--gutter) 56px; }
  .hb-pillar { padding-top: 18px; min-height: 0; }
  .hb-pillar__title { font-size: 24px; }
  .hb-markets { padding: 56px 0; }
  .hb-markets__grid { grid-template-columns: repeat(2, 1fr); }
  .hb-cta { padding: 56px var(--gutter); }
  .hb-cta h2 { font-size: clamp(28px, 7vw, 40px); }
}

/* ===== Marketing Tools toolkit (lifecycle lanes) ===== */
.hb-tools {
  padding: 32px var(--gutter) 80px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-tools__head { max-width: 760px; margin-bottom: 48px; }
.hb-tools__head .hb-h2 { margin-top: 12px; text-wrap: balance; }
.hb-tools__lede {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin: 18px 0 0;
}
/* Editorial index: ruled rows, name left / prose right. No boxes, no
   chips, no tic-lists - the typography is the design. */
.hb-tools__index { border-top: 1px solid var(--border); }
.hb-tools__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 16px 64px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
.hb-tools__row-name h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: var(--font-display-weight, 500);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg);
  margin: 0;
}
.hb-tools__row-stage {
  display: block;
  margin-top: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--muted);
}
.hb-tools__row-body p {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 58ch;
}
.hb-tools__row--flagship h3 { color: var(--accent); }
.hb-tools__link {
  display: inline-block;
  margin-top: 12px;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hb-tools__foot {
  margin: 28px 0 0;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 760px;
}
.hb-tools__foot strong { color: var(--fg); font-weight: 500; }

@media (max-width: 900px) {
  .hb-tools__row { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
}

/* Habanero 2026 - /jackpot-race.
   Two-column hero (copy left, live-leaderboard mockup right) + four
   long-form sections beneath. The leaderboard rows animate position
   purely in CSS so the page feels alive without any JS. */

/* ===== Hero ===== */
.hb-jr-hero {
  padding: 80px var(--gutter) 56px;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 64px;
  position: relative;
  overflow: hidden;
}
.hb-jr-hero::before {
  /* Warm radial glow behind the leaderboard side. Sits in a pseudo so
     it doesn't affect layout. */
  content: "";
  position: absolute;
  inset: 0 -10% auto auto;
  width: 50vw;
  height: 80%;
  background: radial-gradient(50% 60% at 60% 50%, oklch(0.58 0.19 38 / 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hb-jr-hero__inner { position: relative; z-index: 1; }
.hb-jr-hero__title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--fg);
  margin: 24px 0 24px;
  text-wrap: balance;
}
.hb-jr-hero__title-accent { color: var(--accent); }
.hb-jr-hero__lede {
  font-family: 'Geist', sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--muted);
  line-height: 1.55;
  max-width: 540px;
  margin: 0 0 32px;
}
.hb-jr-hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ===== Live-leaderboard mockup ===== */
.hb-jr-board {
  position: relative;
  z-index: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 30% 20%, oklch(0.56 0.14 38 / 0.10) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.20 0.014 50 / 0.6) 0%, oklch(0.14 0.010 50 / 0.6) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px 22px 16px;
  overflow: hidden;
}
.hb-jr-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.hb-jr-board__title {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.hb-jr-board__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.75 0.18 145);
  box-shadow: 0 0 0 3px oklch(0.75 0.18 145 / 0.18);
  animation: hb-jr-pulse 1.4s ease-in-out infinite;
}
@keyframes hb-jr-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.25); opacity: 0.7; }
}
.hb-jr-board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.hb-jr-board__row {
  display: grid;
  grid-template-columns: 32px 1.2fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 50%, transparent);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--fg);
  /* Stagger the row reshuffle so it doesn't read as a single block move.
     The animation only nudges by a few pixels - enough to feel live, not
     so much it looks broken. */
  animation: hb-jr-row-shuffle 8s ease-in-out infinite;
  will-change: transform;
}
.hb-jr-board__row[data-pos="1"] { animation-delay: -0.5s; }
.hb-jr-board__row[data-pos="2"] { animation-delay: -1.5s; }
.hb-jr-board__row[data-pos="3"] { animation-delay: -3.0s; }
.hb-jr-board__row[data-pos="4"] { animation-delay: -4.5s; }
.hb-jr-board__row[data-pos="5"] { animation-delay: -6.5s; }
.hb-jr-board__row:last-child { border-bottom: 0; }
/* Summary row for the long tail (positions 4..N). Dimmer + no shuffle so
   it reads as a roll-up of "this is just the top of a 100-place table". */
.hb-jr-board__row--more {
  border-top: 1px dashed color-mix(in oklab, var(--border) 70%, transparent);
  margin-top: 4px;
  padding-top: 12px;
  opacity: 0.7;
  animation: none !important;
}
.hb-jr-board__row--more .hb-jr-board__pos { color: var(--accent); }
.hb-jr-board__row--more .hb-jr-board__handle { color: var(--muted); }
@keyframes hb-jr-row-shuffle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.hb-jr-board__pos {
  color: var(--muted);
  font-size: 11px;
}
.hb-jr-board__row[data-pos="1"] .hb-jr-board__pos { color: oklch(0.82 0.16 85); }
.hb-jr-board__row[data-pos="2"] .hb-jr-board__pos { color: oklch(0.78 0.05 80); }
.hb-jr-board__row[data-pos="3"] .hb-jr-board__pos { color: oklch(0.65 0.12 50); }
.hb-jr-board__handle { letter-spacing: 0.04em; }
.hb-jr-board__spins  { color: var(--muted); text-align: right; }
.hb-jr-board__prize  {
  color: var(--accent);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hb-jr-board__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
}
.hb-jr-board__foot span {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.hb-jr-board__foot strong {
  font-family: 'Geist', sans-serif;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hb-jr-board__row, .hb-jr-board__dot { animation: none; }
}

/* ===== Stats strip ===== */
.hb-jr-stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--accent) 4%, var(--bg));
}
.hb-jr-stats__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.hb-jr-stats__cell {
  padding: 0 24px;
  text-align: center;
}
.hb-jr-stats__cell + .hb-jr-stats__cell { border-left: 1px solid var(--border); }
.hb-jr-stats .hb-meta-value {
  font-family: 'Geist', sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--fg);
  line-height: 1;
}
.hb-jr-stats .hb-meta-label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 10px;
}

/* ===== How it works ===== */
.hb-jr-how {
  padding: 96px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}
.hb-jr-how__head {
  max-width: 760px;
  margin-bottom: 48px;
}
.hb-jr-how__head .hb-h2 {
  margin-top: 12px;
  text-wrap: balance;
}
.hb-jr-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px;
}
.hb-jr-step {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.hb-jr-step__num {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}
.hb-jr-step__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: var(--font-display-weight, 500);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 10px;
  line-height: 1.2;
}
.hb-jr-step__body {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 56ch;
}

/* ===== Operator controls ===== */
.hb-jr-config {
  padding: 24px var(--gutter) 96px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-jr-config__head {
  max-width: 760px;
  margin-bottom: 36px;
}
.hb-jr-config__head .hb-h2 {
  margin-top: 12px;
  text-wrap: balance;
}
.hb-jr-config__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
}
.hb-jr-config__cell {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.hb-jr-config__cell h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--font-display-weight, 500);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 8px;
}
.hb-jr-config__cell p {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* ===== CTA ===== */
.hb-jr-cta {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(60% 80% at 80% 0%, oklch(0.58 0.19 38 / 0.10) 0%, transparent 60%),
    var(--bg);
}
.hb-jr-cta__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 96px var(--gutter);
  text-align: center;
}
.hb-jr-cta__inner .hb-h2 {
  margin-top: 12px;
  text-wrap: balance;
}
.hb-jr-cta__inner p {
  font-family: 'Geist', sans-serif;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 16px auto 32px;
}
.hb-jr-cta__inner a[href^="mailto:"] { color: var(--accent); text-decoration: none; }
/* Small patent footnote under the CTA. */
.hb-jr-cta__inner .hb-jr-patent {
  margin: 28px auto 0;
  max-width: none;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted);
}
.hb-jr-cta__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero pool block - replaces the (incorrect) leaderboard heading. */
.hb-jr-board__pool {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 6px 16px;
  padding: 8px 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.hb-jr-board__poollabel {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.hb-jr-board__pool strong {
  grid-row: 2;
  font-family: 'Geist', sans-serif;
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hb-jr-board__pooltime {
  grid-row: 2;
  justify-self: end;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* ===== Comparison table ===== */
.hb-jr-compare {
  padding: 24px var(--gutter) 56px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-jr-compare__head {
  max-width: 760px;
  margin-bottom: 36px;
}
.hb-jr-compare__head .hb-h2 { margin-top: 12px; text-wrap: balance; }
.hb-jr-compare__table {
  display: grid;
  grid-template-columns: 1.2fr repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
}
.hb-jr-compare__row {
  display: contents;
}
.hb-jr-compare__row > * {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.hb-jr-compare__row > *:not(:last-child) { border-right: 1px solid var(--border); }
.hb-jr-compare__row:last-child > * { border-bottom: 0; }
.hb-jr-compare__row > [role="columnheader"] {
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  color: var(--fg);
  background: color-mix(in oklab, var(--bg-elev) 70%, var(--bg));
  font-size: 13px;
}
.hb-jr-compare__row > [role="rowheader"] {
  font-weight: 500;
  color: var(--fg);
  background: color-mix(in oklab, var(--bg-elev) 40%, var(--bg));
}
/* Each compare cell carries a status colour: yes / partial / no.
   Subtle so the verdict reads from the icon without screaming. */
.hb-jr-compare__yes,
.hb-jr-compare__partial,
.hb-jr-compare__no { position: relative; padding-left: 36px !important; }
.hb-jr-compare__yes::before,
.hb-jr-compare__partial::before,
.hb-jr-compare__no::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.hb-jr-compare__yes::before {
  background: oklch(0.75 0.18 145 / 0.18);
  box-shadow: inset 0 0 0 1px oklch(0.75 0.18 145 / 0.5);
}
.hb-jr-compare__yes::after {
  content: "✓";
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: oklch(0.82 0.18 145);
}
.hb-jr-compare__partial::before {
  background: oklch(0.78 0.14 80 / 0.18);
  box-shadow: inset 0 0 0 1px oklch(0.78 0.14 80 / 0.5);
}
.hb-jr-compare__partial::after {
  content: "~";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: oklch(0.82 0.16 80);
}
.hb-jr-compare__no::before {
  background: oklch(0.55 0.18 25 / 0.14);
  box-shadow: inset 0 0 0 1px oklch(0.55 0.18 25 / 0.4);
}
.hb-jr-compare__no::after {
  content: "✕";
  position: absolute;
  left: 19.5px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: oklch(0.72 0.18 25);
}

/* ===== Funding cards ===== */
.hb-jr-funding {
  padding: 56px var(--gutter) 96px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-jr-funding__head {
  max-width: 760px;
  margin-bottom: 36px;
}
.hb-jr-funding__head .hb-h2 { margin-top: 12px; }
.hb-jr-funding__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 48px;
}
.hb-jr-funding__card {
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.hb-jr-funding__tag {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 12px;
}
.hb-jr-funding__card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--font-display-weight, 500);
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 8px;
}
.hb-jr-funding__card p {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 36ch;
}

.hb-jr-config__lede {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: 54ch;
}

/* ===== Solutions-page feature strip ===== */
/* Two-column promo block dropped between Solutions' pillar grid and
   partners list. Echoes the leaderboard chip on the right so the strip
   visually previews the dedicated /jackpot-race page. */
.hb-jr-feature {
  max-width: var(--max);
  margin: 32px auto 64px;
  padding: 0 var(--gutter);
}
.hb-jr-feature__inner {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: center;
  padding: 48px 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 90% at 100% 50%, oklch(0.58 0.19 38 / 0.10) 0%, transparent 70%),
    color-mix(in oklab, var(--bg-elev) 70%, var(--bg));
  position: relative;
  overflow: hidden;
}
.hb-jr-feature__copy { position: relative; z-index: 1; }
.hb-jr-feature__copy .hb-h2 {
  margin-top: 12px;
  max-width: 18ch;
  text-wrap: balance;
}
.hb-jr-feature__copy p {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
  margin: 20px 0 28px;
}
.hb-jr-feature__art {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 36px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 90% at 30% 20%, oklch(0.56 0.14 38 / 0.10) 0%, transparent 60%),
    linear-gradient(180deg, oklch(0.20 0.014 50 / 0.6) 0%, oklch(0.14 0.010 50 / 0.6) 100%);
}
.hb-jr-feature__chip {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: oklch(0.58 0.19 38 / 0.18);
  color: oklch(0.78 0.16 45);
  margin-bottom: 12px;
}
.hb-jr-feature__pool {
  font-family: 'Geist', sans-serif;
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hb-jr-feature__label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-top: 8px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .hb-jr-funding__grid { grid-template-columns: 1fr; }
  /* Comparison table - stack each row as a card on tablet/mobile so the
     5-col grid doesn't crush text. */
  .hb-jr-compare__table {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: 0;
    gap: 12px;
  }
  .hb-jr-compare__row { display: block; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elev); overflow: hidden; }
  .hb-jr-compare__row--head { display: none; }
  .hb-jr-compare__row > * { border-bottom: 1px solid var(--border); border-right: 0 !important; padding: 12px 16px; }
  .hb-jr-compare__row > *:last-child { border-bottom: 0; }
  .hb-jr-compare__row > [role="rowheader"] { font-size: 14px; background: color-mix(in oklab, var(--accent) 6%, var(--bg-elev)); }
  /* Label each option inline since the column header is gone. */
  .hb-jr-compare__row > .hb-jr-compare__yes::after,
  .hb-jr-compare__row > .hb-jr-compare__partial::after,
  .hb-jr-compare__row > .hb-jr-compare__no::after { left: 19px; }
  .hb-jr-compare__row > *:nth-child(2)::before { content: ""; }
  .hb-jr-compare__row > *:nth-child(2) { font-weight: 500; color: var(--fg); }
}
@media (max-width: 900px) {
  .hb-jr-feature__inner { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
}
@media (max-width: 1024px) {
  .hb-jr-hero { grid-template-columns: 1fr; gap: 48px; padding: 56px var(--gutter); }
  .hb-jr-hero::before { display: none; }
  .hb-jr-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 28px 0; }
  .hb-jr-stats__cell:nth-child(3) { border-left: 0; }
  .hb-jr-stats__cell:nth-child(odd) { border-left: 0; }
  .hb-jr-config__grid { grid-template-columns: repeat(2, 1fr); }
  .hb-jr-how { padding: 56px var(--gutter); }
}
@media (max-width: 720px) {
  .hb-jr-hero { padding: 32px var(--gutter); gap: 32px; }
  .hb-jr-board { padding: 16px 14px 12px; }
  .hb-jr-board__row { grid-template-columns: 28px 1fr auto; }
  .hb-jr-board__spins { display: none; }
  .hb-jr-stats__inner { grid-template-columns: 1fr; }
  .hb-jr-stats__cell { padding: 0; border-left: 0 !important; }
  .hb-jr-stats__cell + .hb-jr-stats__cell { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; }
  .hb-jr-steps { grid-template-columns: 1fr; gap: 24px; }
  .hb-jr-step { padding-top: 16px; }
  .hb-jr-config__grid { grid-template-columns: 1fr; }
  .hb-jr-cta__inner { padding: 56px var(--gutter); }
}

/* Habanero 2026 - single game sheet page */

.hb-gs-hero {
  position: relative;
  min-height: 520px;
  padding: 80px var(--gutter);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hb-gs-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 420px;
}
.hb-gs-hero__copy { max-width: 720px; }
.hb-gs-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin: 16px 0 0;
  text-wrap: balance;
}
.hb-gs-hero__tagline {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  line-height: 1.45;
  color: color-mix(in oklab, var(--fg) 78%, transparent);
  margin-top: 16px;
  max-width: 560px;
  letter-spacing: -0.005em;
}
.hb-gs-hero__cta {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}

/* sticky tab bar */
.hb-gs-tabs {
  position: sticky;
  top: var(--nav-h);
  z-index: 11;
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.hb-gs-tabs__inner {
  display: flex;
  gap: 4px;
  padding: 12px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  overflow-x: auto;
}
.hb-gs-tab {
  background: transparent;
  color: var(--muted);
  border: 0;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--t-fast) ease;
}
.hb-gs-tab:hover { color: var(--fg); }
.hb-gs-tab[aria-current="true"] {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--fg);
}

/* spec rail */
.hb-gs-quickspecs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 56px 0;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
}
.hb-gs-quickspec {
  padding: 24px 28px;
}
.hb-gs-quickspec + .hb-gs-quickspec { border-left: 1px solid var(--border); }
.hb-gs-quickspec__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.hb-gs-quickspec__value {
  font-family: 'Geist', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.025em;
}

.hb-gs-section {
  padding: 80px var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

.hb-gs-section__head { margin-bottom: 40px; }
.hb-gs-section__head h2 { margin: 0; }

/* overview split: 2/3 long-pitch, 1/3 spec sidebar */
.hb-gs-overview {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
  align-items: start;
}
.hb-gs-overview__pitch {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--fg) 82%, transparent);
  letter-spacing: -0.005em;
}
.hb-gs-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 80px);
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
}
.hb-gs-spec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.hb-gs-spec:last-child { border-bottom: 0; }
.hb-gs-spec__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}
.hb-gs-spec__value {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
}

.hb-gs-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.hb-gs-feature {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
}
.hb-gs-feature__name {
  font-family: 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.hb-gs-feature__desc {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: -0.005em;
  margin: 0;
}

.hb-gs-symbols {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hb-gs-symbols__row {
  display: contents;
}
.hb-gs-symbols__cell {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--fg);
}
.hb-gs-symbols__row:last-child .hb-gs-symbols__cell { border-bottom: 0; }
.hb-gs-symbols__icon {
  font-size: 32px;
  color: white;
  text-align: center;
}

.hb-gs-related {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .hb-gs-quickspecs { grid-template-columns: repeat(2, 1fr); }
  .hb-gs-quickspec:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .hb-gs-quickspec:nth-child(4) { border-top: 1px solid var(--border); }
  .hb-gs-overview { grid-template-columns: 1fr; }
  .hb-gs-sidebar { position: static; }
  .hb-gs-features { grid-template-columns: 1fr; }
  .hb-gs-related { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hb-gs-quickspecs { grid-template-columns: 1fr; }
  .hb-gs-quickspec + .hb-gs-quickspec { border-left: 0; border-top: 1px solid var(--border); }
}

/* Habanero 2026 - News, Article, Press, Careers, Contact, Downloads, Error pages
   Lightweight type-driven layouts that share most of the design system. */

.hb-page-hero {
  padding: 100px var(--gutter) 56px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-page-hero h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin: 0;
  max-width: 1100px;
  text-wrap: balance;
}
.hb-page-hero h1 .muted { color: var(--muted); display: block; }
.hb-page-hero__lede {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  margin-top: 24px;
  max-width: 640px;
  letter-spacing: -0.005em;
}

/* ===== Article (long-form) ===== */
.hb-article {
  padding: 24px var(--gutter) 96px;
  max-width: var(--max);
  margin: 0 auto;
}
/* Reading column anchored to the left of the wide container so it sits
   under the .hb-page-hero copy's left edge instead of floating to the
   centre of the viewport. .hb-article__body keeps the 800px readable
   width for prose; the surrounding .hb-article gives it the same gutter
   the hero uses. */
.hb-article__body { max-width: 800px; }
.hb-article__meta {
  display: flex;
  gap: 24px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hb-article__title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg);
  margin: 0 0 40px;
  text-wrap: balance;
}
.hb-article__body {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: color-mix(in oklab, var(--fg) 85%, transparent);
  letter-spacing: -0.005em;
}
.hb-article__body p { margin: 0 0 1.4em; }
.hb-article__body h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--font-display-weight, 500);
  letter-spacing: -0.025em;
  color: var(--fg);
  margin: 1.6em 0 0.6em;
}
.hb-article__body a:not(.hb-btn) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.hb-article__body img { border-radius: var(--radius-md); margin: 1em 0; }
.hb-article__body ul { margin: 0 0 1.4em; padding-left: 22px; }
.hb-article__body ul li { margin-bottom: 0.5em; }
.hb-article__body ul li::marker { color: var(--accent); }
.hb-article__body blockquote {
  margin: 1.6em 0;
  padding: 16px 24px;
  border-left: 3px solid var(--accent);
  font-style: italic;
  color: var(--muted);
}

/* ===== News list ===== */
.hb-news {
  padding: 56px var(--gutter) 120px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ===== pager (news) ===== */
.hb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 56px;
}
.hb-pager__link,
.hb-pager__gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13px;
}
.hb-pager__link {
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
}
.hb-pager__link:hover { border-color: var(--fg); }
.hb-pager__link.is-active {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.hb-pager__link.is-disabled { opacity: .4; pointer-events: none; }
.hb-pager__edge { padding: 0 16px; }
.hb-pager__gap { color: var(--muted); min-width: 20px; }

/* ===== Careers list ===== */
.hb-careers {
  padding: 56px var(--gutter) 120px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-careers__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
}
.hb-career {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: background 200ms ease;
}
.hb-career:hover { background: color-mix(in oklab, var(--accent) 4%, transparent); padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; border-radius: var(--radius-md); }
.hb-career__role {
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.hb-career__team {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.hb-career__location,
.hb-career__type {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--muted);
}
.hb-career__arrow {
  font-family: 'Geist Mono', monospace;
  color: var(--accent);
  font-size: 18px;
}

/* ===== Contact ===== */
/* Player notice. No callout box, no coloured strip — reads as part of the
   page typography rather than a UI alert. Just a top hairline to set it
   apart, then eyebrow + heading + body following the same pattern every
   other section on the site uses. */
.hb-contact__player-notice {
  max-width: var(--max);
  margin: 0 auto 56px;
  padding: 24px var(--gutter) 0;
  border-top: 1px solid var(--border);
}
.hb-contact__player-notice .hb-eyebrow {
  margin-bottom: 12px;
}
.hb-contact__player-notice-head {
  margin: 0 0 10px;
  font-family: 'Geist', sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.hb-contact__player-notice-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 680px;
}

.hb-contact {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  padding: 0 var(--gutter) 120px;
  max-width: var(--max);
  margin: 0 auto;
}
.hb-contact__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hb-contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hb-contact__label {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.hb-contact__input,
.hb-contact__textarea {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--fg);
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: border-color var(--t-fast) ease;
}
.hb-contact__input:focus,
.hb-contact__textarea:focus { outline: none; border-color: var(--accent); }
.hb-contact__textarea { min-height: 140px; resize: vertical; font-family: inherit; }

/* Offices: row per contact channel, each a link with icon + mono label
   + value. Hover slides a chevron in and lifts the value to --fg.
   Reads as a directory rather than a flat list of email addresses. */
.hb-offices {
  display: flex;
  flex-direction: column;
}
.hb-office {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 4px;
  border-top: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast) ease, padding var(--t-fast) ease;
}
.hb-office:last-child { border-bottom: 1px solid var(--border); }
.hb-office__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: oklch(0.18 0.012 50 / 0.6);
  color: var(--muted);
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}
.hb-office__icon svg { width: 18px; height: 18px; }
.hb-office__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hb-office__label {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hb-office__value {
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  color: var(--fg);
  letter-spacing: -0.005em;
  line-height: 1.4;
  /* keep the chevron tucked beside the email text */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hb-office__value--note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.hb-office__chevron {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;
  color: var(--accent);
}
/* Hover only on the clickable rows (mailto links). Static support row
   keeps its resting state. */
a.hb-office:hover .hb-office__icon {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
  color: var(--accent);
}
a.hb-office:hover .hb-office__chevron {
  opacity: 1;
  transform: translateX(0);
}
a.hb-office:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* ===== Downloads ===== */
.hb-downloads {
  padding: 56px var(--gutter) 120px;
  max-width: var(--max);
  margin: 0 auto;
}
/* Language group: each lang has a heading strip (label + file count)
   above its grid. Groups stack with a generous gap so the language
   boundary reads as a real divider, not just whitespace. */
.hb-downloads__group + .hb-downloads__group { margin-top: 40px; }
.hb-downloads__grouphead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.hb-downloads__grouplabel {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.hb-downloads__groupcount {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* Grid list: each entry is a compact horizontal row - extension badge on
   the left, name in the middle, arrow on the right. Two columns on
   desktop so the page reads as a directory rather than a wall of cards. */
.hb-downloads__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.hb-download {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.hb-download:hover {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--border));
  background: color-mix(in oklab, var(--accent) 4%, var(--bg-elev));
}

/* Type badge: small mono pill with a hue-tinted background. The hue
   comes from data-ext via the file-type rules below. */
.hb-download__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: oklch(0.32 0.10 var(--hue, 30) / 0.25);
  color: oklch(0.86 0.14 var(--hue, 30));
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
/* File-type colour cues; --hue from markup is the fallback for anything
   we don't enumerate. */
.hb-download[data-ext="pdf"]  { --hue: 22; }
.hb-download[data-ext="zip"]  { --hue: 85; }
.hb-download[data-ext="rar"]  { --hue: 85; }
.hb-download[data-ext="png"],
.hb-download[data-ext="jpg"],
.hb-download[data-ext="jpeg"],
.hb-download[data-ext="webp"] { --hue: 200; }
.hb-download[data-ext="svg"]  { --hue: 280; }
.hb-download[data-ext="ai"]   { --hue: 310; }
.hb-download[data-ext="psd"]  { --hue: 260; }
.hb-download[data-ext="mp4"],
.hb-download[data-ext="mov"]  { --hue: 340; }

.hb-download__name {
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--fg);
  /* Single-line clamp so the row keeps a fixed height. Long names
     truncate with an ellipsis. */
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hb-download__arrow {
  font-family: 'Geist Mono', monospace;
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease, color var(--t-fast) ease;
}
.hb-download:hover .hb-download__arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent);
}

/* ===== Error ===== */
.hb-error {
  padding: 120px var(--gutter);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.hb-error__code {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hb-error__title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight, 500);
  font-size: clamp(44px, 5.5vw, 84px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
  margin: 0;
}
.hb-error__body {
  font-family: 'Geist', sans-serif;
  font-size: 18px;
  color: var(--muted);
  margin-top: 24px;
  letter-spacing: -0.005em;
}
.hb-error__cta { margin-top: 40px; }

@media (max-width: 1024px) {
  .hb-news__grid { grid-template-columns: repeat(2, 1fr); }
  /* 2-up rows on tablet too - same as desktop now. */
  .hb-downloads__grid { grid-template-columns: repeat(2, 1fr); }
  .hb-contact { grid-template-columns: 1fr; gap: 40px; }
  .hb-career { grid-template-columns: 1fr; gap: 8px; }
  .hb-page-hero { padding: 56px var(--gutter) 32px; }
  .hb-page-hero h1 { font-size: clamp(36px, 6vw, 56px); }
  .hb-article { padding: 48px var(--gutter) 80px; }
  .hb-news, .hb-careers, .hb-downloads { padding-top: 24px; padding-bottom: 80px; }
  .hb-error { padding: 80px var(--gutter); }
}
@media (max-width: 720px) {
  .hb-news__grid { grid-template-columns: 1fr; }
  /* Downloads row layout already reads as a list; collapse to a single
     column on phones so each row gets the full width. */
  .hb-downloads__grid { grid-template-columns: 1fr; }
  .hb-page-hero { padding: 32px var(--gutter) 20px; }
  .hb-page-hero h1 { font-size: clamp(32px, 7vw, 44px); }
  .hb-page-hero__lede { font-size: 16px; margin-top: 16px; }
  .hb-news, .hb-careers, .hb-downloads, .hb-contact { padding-top: 12px; padding-bottom: 56px; }
  .hb-article { padding: 32px var(--gutter) 56px; }
  .hb-article__title { font-size: clamp(30px, 7vw, 44px); margin-bottom: 24px; }
  .hb-error { padding: 56px var(--gutter); }
  .hb-error__title { font-size: clamp(44px, 9vw, 64px); }
  .hb-career__role { font-size: 18px; }
}

/* ===== Client login (dark 2026) ===== */
.hb-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--gutter);
  position: relative;
  overflow: hidden;
}
/* warm glow behind the card, matches the hero accent */
.hb-login::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 680px;
  height: 680px;
  transform: translate(-50%, 50%);
  background: radial-gradient(circle, oklch(0.60 0.19 38 / 0.13), transparent 70%);
  pointer-events: none;
}
.hb-login__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 40px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--bg-elev) 82%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hb-login__brand {
  display: flex;
  justify-content: center;
  margin-bottom: 6px;
  text-decoration: none;
}
.hb-login__brand .hb-logo { width: 200px; display: block; }
.hb-login__eyebrow {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 0 0 28px;
}
.hb-login__form { display: flex; flex-direction: column; gap: 16px; }
.hb-login__field { display: flex; flex-direction: column; gap: 6px; }
.hb-login__label {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: -0.005em;
}
.hb-login__input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  /* Lighter than the card so the field reads clearly as an input. */
  border: 1px solid oklch(0.34 0.012 50);
  background: oklch(0.26 0.012 50);
  color: var(--fg);
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.hb-login__input::placeholder { color: var(--muted); }
.hb-login__input:focus {
  outline: none;
  border-color: var(--accent);
  background: oklch(0.30 0.012 50);
}
.hb-login__remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.hb-login__remember input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }
.hb-login__submit { width: 100%; justify-content: center; margin-top: 4px; }
.hb-login__back {
  display: block;
  text-align: center;
  margin-top: 24px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}
.hb-login__back:hover { color: var(--fg); }

/* Habanero 2026 - hidden tweaks panel (renders only when ?tweaks=1) */

.hb-tweaks {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  background: oklch(0.10 0.012 40 / 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  width: 280px;
  box-shadow: 0 20px 60px -10px oklch(0 0 0 / 0.5);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  color: var(--fg);
}
.hb-tweaks__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.hb-tweaks__close {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
}
.hb-tweaks__group + .hb-tweaks__group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.hb-tweaks__label {
  display: block;
  margin-bottom: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.hb-tweaks__select {
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: 'Geist', sans-serif;
  font-size: 13px;
}
.hb-tweaks__swatches {
  display: flex;
  gap: 8px;
}
.hb-tweaks__swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--border);
  cursor: pointer;
  padding: 0;
}
.hb-tweaks__swatch.is-active { border-color: var(--fg); transform: scale(1.05); }
.hb-tweaks__apply {
  width: 100%;
  margin-top: 14px;
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}