/* Minification failed. Returning unminified contents.
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(59,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(63,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(74,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(81,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(94,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(95,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(105,21): run-time error CSS1039: Token not allowed after unary operator: '-container'
(107,21): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(110,21): run-time error CSS1039: Token not allowed after unary operator: '-container-narrow'
(112,21): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(118,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(119,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(124,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(137,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(139,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(144,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(146,29): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(147,30): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(148,36): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(149,25): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(156,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-2'
(156,73): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(159,25): run-time error CSS1046: Expect comma, found '255'
(159,33): run-time error CSS1046: Expect comma, found '/'
(160,25): run-time error CSS1046: Expect comma, found '136'
(160,33): run-time error CSS1046: Expect comma, found '/'
(161,27): run-time error CSS1046: Expect comma, found '136'
(161,35): run-time error CSS1046: Expect comma, found '/'
(167,25): run-time error CSS1046: Expect comma, found '255'
(167,33): run-time error CSS1046: Expect comma, found '/'
(168,25): run-time error CSS1046: Expect comma, found '136'
(168,33): run-time error CSS1046: Expect comma, found '/'
(169,27): run-time error CSS1046: Expect comma, found '136'
(169,35): run-time error CSS1046: Expect comma, found '/'
(173,17): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(175,40): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(178,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(179,40): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(183,17): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(189,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(191,36): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(191,63): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(198,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(204,29): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(215,19): run-time error CSS1039: Token not allowed after unary operator: '-z-floating'
(216,25): run-time error CSS1046: Expect comma, found '255'
(216,33): run-time error CSS1046: Expect comma, found '/'
(219,38): run-time error CSS1046: Expect comma, found '234'
(219,46): run-time error CSS1046: Expect comma, found '/'
(227,15): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(233,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(253,29): run-time error CSS1046: Expect comma, found '255'
(253,37): run-time error CSS1046: Expect comma, found '/'
(256,39): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(257,23): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(257,38): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(258,26): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(262,39): run-time error CSS1039: Token not allowed after unary operator: '-color-line-2'
(269,79): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(272,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(282,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(285,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(287,49): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(289,53): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(292,78): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(300,25): run-time error CSS1046: Expect comma, found '255'
(300,33): run-time error CSS1046: Expect comma, found '/'
(301,25): run-time error CSS1046: Expect comma, found '136'
(301,33): run-time error CSS1046: Expect comma, found '/'
(302,26): run-time error CSS1046: Expect comma, found '136'
(302,34): run-time error CSS1046: Expect comma, found '/'
(306,25): run-time error CSS1046: Expect comma, found '255'
(306,33): run-time error CSS1046: Expect comma, found '/'
(307,25): run-time error CSS1046: Expect comma, found '136'
(307,33): run-time error CSS1046: Expect comma, found '/'
(308,26): run-time error CSS1046: Expect comma, found '136'
(308,34): run-time error CSS1046: Expect comma, found '/'
(311,40): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(312,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(317,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-2'
(318,17): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(319,22): run-time error CSS1039: Token not allowed after unary operator: '-color-line-2'
(322,44): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(322,72): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(324,52): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(324,86): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(337,19): run-time error CSS1039: Token not allowed after unary operator: '-space-11'
(337,37): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(344,55): run-time error CSS1046: Expect comma, found '136'
(344,63): run-time error CSS1046: Expect comma, found '/'
(345,57): run-time error CSS1046: Expect comma, found '170'
(345,65): run-time error CSS1046: Expect comma, found '/'
(346,58): run-time error CSS1046: Expect comma, found '97'
(346,64): run-time error CSS1046: Expect comma, found '/'
(363,15): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(367,85): run-time error CSS1039: Token not allowed after unary operator: '-space-11'
(370,43): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(372,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(374,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(377,22): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(381,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(386,64): run-time error CSS1046: Expect comma, found '136'
(386,72): run-time error CSS1046: Expect comma, found '/'
(391,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(393,22): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(396,32): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(402,15): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(403,25): run-time error CSS1039: Token not allowed after unary operator: '-space-9'
(410,25): run-time error CSS1046: Expect comma, found '255'
(410,33): run-time error CSS1046: Expect comma, found '/'
(411,31): run-time error CSS1046: Expect comma, found '255'
(411,39): run-time error CSS1046: Expect comma, found '/'
(412,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(427,15): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(428,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(429,33): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(436,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(439,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(444,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(454,19): run-time error CSS1039: Token not allowed after unary operator: '-z-base'
(460,53): run-time error CSS1046: Expect comma, found '136'
(460,61): run-time error CSS1046: Expect comma, found '/'
(476,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-4'
(477,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-1'
(481,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(487,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-4'
(488,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-3'
(492,31): run-time error CSS1046: Expect comma, found '255'
(492,39): run-time error CSS1046: Expect comma, found '/'
(498,47): run-time error CSS1046: Expect comma, found '136'
(498,55): run-time error CSS1046: Expect comma, found '/'
(508,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(511,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(517,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(521,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(529,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(533,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(534,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(535,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(549,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(554,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(559,45): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(559,67): run-time error CSS1039: Token not allowed after unary operator: '-color-line-2'
(565,58): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(570,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(571,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(576,19): run-time error CSS1039: Token not allowed after unary operator: '-z-elevated'
(577,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(581,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-2'
(583,22): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary-soft'
(584,17): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(588,41): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(588,101): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(589,55): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(593,39): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(593,73): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(594,42): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(594,105): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(597,33): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(598,17): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(608,19): run-time error CSS1039: Token not allowed after unary operator: '-space-9'
(609,32): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(610,35): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(611,22): run-time error CSS1039: Token not allowed after unary operator: '-color-canvas'
(619,53): run-time error CSS1046: Expect comma, found '136'
(619,61): run-time error CSS1046: Expect comma, found '/'
(628,17): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(629,22): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(637,15): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(645,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(646,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(650,17): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(651,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-1'
(653,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(653,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(653,108): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(655,66): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(655,97): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(660,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(661,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(664,48): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-soft'
(664,84): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(665,48): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary-soft'
(665,83): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(666,64): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(667,46): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(672,26): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(674,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(675,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(679,22): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(681,75): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(682,71): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(685,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(688,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(698,28): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(702,15): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(709,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(710,19): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(710,34): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(711,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(712,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(712,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(712,108): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(720,53): run-time error CSS1046: Expect comma, found '136'
(720,61): run-time error CSS1046: Expect comma, found '/'
(723,35): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(727,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(734,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-2'
(735,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(736,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(737,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(739,49): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-soft'
(739,85): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(740,49): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary-soft'
(740,84): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(741,65): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(743,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(744,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(748,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(751,48): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(756,31): run-time error CSS1039: Token not allowed after unary operator: '-color-canvas'
(761,53): run-time error CSS1046: Expect comma, found '136'
(761,61): run-time error CSS1046: Expect comma, found '/'
(765,30): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(769,90): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(775,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(778,33): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(778,82): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(779,38): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(780,62): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(782,30): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(783,19): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(784,36): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(785,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(789,71): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(794,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-4'
(796,19): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(797,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(798,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(804,54): run-time error CSS1046: Expect comma, found '170'
(804,62): run-time error CSS1046: Expect comma, found '/'
(808,39): run-time error CSS1039: Token not allowed after unary operator: '-z-base'
(811,15): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(812,25): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(816,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(817,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(821,17): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(825,97): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(826,55): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(829,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(830,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(831,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(832,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-1'
(834,19): run-time error CSS1039: Token not allowed after unary operator: '-z-base'
(837,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(842,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(843,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(846,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(848,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(849,22): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(854,73): run-time error CSS1039: Token not allowed after unary operator: '-color-line-2'
(866,15): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(872,63): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(878,59): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(884,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(885,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(886,19): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(886,34): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(888,19): run-time error CSS1039: Token not allowed after unary operator: '-z-base'
(889,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(889,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(891,61): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(899,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(902,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(903,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(905,25): run-time error CSS1046: Expect comma, found '255'
(905,33): run-time error CSS1046: Expect comma, found '/'
(906,25): run-time error CSS1046: Expect comma, found '136'
(906,33): run-time error CSS1046: Expect comma, found '/'
(907,27): run-time error CSS1046: Expect comma, found '136'
(907,35): run-time error CSS1046: Expect comma, found '/'
(916,30): run-time error CSS1046: Expect comma, found '136'
(916,38): run-time error CSS1046: Expect comma, found '/'
(919,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(920,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(925,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(929,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(938,29): run-time error CSS1039: Token not allowed after unary operator: '-color-canvas'
(943,53): run-time error CSS1046: Expect comma, found '136'
(943,61): run-time error CSS1046: Expect comma, found '/'
(949,15): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(956,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-4'
(957,19): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(957,34): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(958,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(960,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-1'
(966,53): run-time error CSS1046: Expect comma, found '136'
(966,61): run-time error CSS1046: Expect comma, found '/'
(967,58): run-time error CSS1046: Expect comma, found '170'
(967,66): run-time error CSS1046: Expect comma, found '/'
(969,28): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(970,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-3'
(979,17): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(980,25): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(982,37): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(984,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(987,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(988,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(992,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(995,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(997,25): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1001,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1004,36): run-time error CSS1046: Expect comma, found '97'
(1004,42): run-time error CSS1046: Expect comma, found '/'
(1009,58): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1009,121): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1011,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1013,25): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1016,52): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1020,91): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1021,77): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(1022,49): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(1023,45): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1029,74): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(1030,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1032,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1038,25): run-time error CSS1046: Expect comma, found '255'
(1038,33): run-time error CSS1046: Expect comma, found '/'
(1039,26): run-time error CSS1046: Expect comma, found '136'
(1039,34): run-time error CSS1046: Expect comma, found '/'
(1040,27): run-time error CSS1046: Expect comma, found '136'
(1040,35): run-time error CSS1046: Expect comma, found '/'
(1041,19): run-time error CSS1039: Token not allowed after unary operator: '-z-elevated'
(1051,30): run-time error CSS1046: Expect comma, found '136'
(1051,38): run-time error CSS1046: Expect comma, found '/'
(1055,18): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(1058,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1058,71): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(1060,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(1061,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1061,34): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1062,35): run-time error CSS1046: Expect comma, found '136'
(1062,43): run-time error CSS1046: Expect comma, found '/'
(1068,64): run-time error CSS1046: Expect comma, found '255'
(1068,72): run-time error CSS1046: Expect comma, found '/'
(1072,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1085,30): run-time error CSS1039: Token not allowed after unary operator: '-space-9'
(1087,21): run-time error CSS1039: Token not allowed after unary operator: '-container-narrow'
(1091,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1092,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1097,18): run-time error CSS1039: Token not allowed after unary operator: '-space-9'
(1097,35): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1100,74): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1100,124): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1103,32): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1104,27): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1104,95): run-time error CSS1046: Expect comma, found '136'
(1104,103): run-time error CSS1046: Expect comma, found '/'
(1105,47): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1110,25): run-time error CSS1039: Token not allowed after unary operator: '-color-canvas'
(1111,29): run-time error CSS1039: Token not allowed after unary operator: '-container-narrow'
(1111,114): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1114,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1115,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(1117,38): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1117,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1120,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(1121,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(1126,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1126,34): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1130,15): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1131,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1134,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1141,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(1142,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1145,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(1145,79): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1147,77): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1148,35): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1148,50): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1148,73): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1155,19): run-time error CSS1039: Token not allowed after unary operator: '-space-12'
(1157,55): run-time error CSS1046: Expect comma, found '170'
(1157,63): run-time error CSS1046: Expect comma, found '/'
(1158,57): run-time error CSS1046: Expect comma, found '153'
(1158,65): run-time error CSS1046: Expect comma, found '/'
(1159,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1159,63): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(1174,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1180,22): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1185,20): run-time error CSS1046: Expect comma, found '255'
(1185,28): run-time error CSS1046: Expect comma, found '/'
(1188,20): run-time error CSS1046: Expect comma, found '255'
(1188,28): run-time error CSS1046: Expect comma, found '/'
(1191,25): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1196,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1198,25): run-time error CSS1046: Expect comma, found '255'
(1198,33): run-time error CSS1046: Expect comma, found '/'
(1199,25): run-time error CSS1046: Expect comma, found '0'
(1199,29): run-time error CSS1046: Expect comma, found '/'
(1200,27): run-time error CSS1046: Expect comma, found '0'
(1200,31): run-time error CSS1046: Expect comma, found '/'
(1204,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(1207,25): run-time error CSS1046: Expect comma, found '255'
(1207,33): run-time error CSS1046: Expect comma, found '/'
(1208,25): run-time error CSS1046: Expect comma, found '0'
(1208,29): run-time error CSS1046: Expect comma, found '/'
(1209,27): run-time error CSS1046: Expect comma, found '0'
(1209,31): run-time error CSS1046: Expect comma, found '/'
(1218,19): run-time error CSS1039: Token not allowed after unary operator: '-space-11'
(1218,37): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1222,30): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(1224,25): run-time error CSS1039: Token not allowed after unary operator: '-space-9'
(1227,61): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1227,132): run-time error CSS1039: Token not allowed after unary operator: '-space-4'
(1229,113): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1229,130): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1231,52): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-2'
(1234,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1239,22): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1242,93): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1245,35): run-time error CSS1046: Expect comma, found '255'
(1245,43): run-time error CSS1046: Expect comma, found '/'
(1246,23): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1247,47): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1251,60): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1272,26): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(1279,55): run-time error CSS1046: Expect comma, found '136'
(1279,63): run-time error CSS1046: Expect comma, found '/'
(1280,57): run-time error CSS1046: Expect comma, found '170'
(1280,65): run-time error CSS1046: Expect comma, found '/'
(1282,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1283,19): run-time error CSS1039: Token not allowed after unary operator: '-space-9'
(1283,36): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1284,35): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1285,22): run-time error CSS1039: Token not allowed after unary operator: '-space-9'
(1299,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1301,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1305,18): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1316,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1317,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1329,17): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(1340,17): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(1346,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1349,41): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1351,43): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1352,65): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1361,22): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1370,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1372,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1385,40): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1389,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1390,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1397,22): run-time error CSS1039: Token not allowed after unary operator: '-space-9'
(1405,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1407,36): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1409,58): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1411,36): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1414,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1417,25): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1420,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1422,38): run-time error CSS1046: Expect comma, found '136'
(1422,46): run-time error CSS1046: Expect comma, found '/'
(1424,40): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1426,76): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1430,35): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1433,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1435,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1436,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(1437,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(1437,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1438,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1440,75): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(1447,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1449,25): run-time error CSS1046: Expect comma, found '255'
(1449,33): run-time error CSS1046: Expect comma, found '/'
(1450,25): run-time error CSS1046: Expect comma, found '136'
(1450,33): run-time error CSS1046: Expect comma, found '/'
(1451,27): run-time error CSS1046: Expect comma, found '136'
(1451,35): run-time error CSS1046: Expect comma, found '/'
(1453,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1460,30): run-time error CSS1046: Expect comma, found '136'
(1460,38): run-time error CSS1046: Expect comma, found '/'
(1463,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1466,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1472,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1475,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1477,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1480,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1488,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1489,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1490,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(1491,19): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1491,34): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1492,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-1'
(1493,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1494,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1497,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1499,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1501,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1504,35): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1507,32): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1511,29): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(1512,46): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary-soft'
(1514,51): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(1515,38): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(1517,29): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1518,46): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary-soft'
(1521,42): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1523,29): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1524,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(1537,15): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1539,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1543,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(1547,29): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(1548,30): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1549,36): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1550,25): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1551,32): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1559,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-2'
(1559,73): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1563,25): run-time error CSS1046: Expect comma, found '255'
(1563,33): run-time error CSS1046: Expect comma, found '/'
(1564,25): run-time error CSS1046: Expect comma, found '136'
(1564,33): run-time error CSS1046: Expect comma, found '/'
(1565,27): run-time error CSS1046: Expect comma, found '136'
(1565,35): run-time error CSS1046: Expect comma, found '/'
(1572,25): run-time error CSS1046: Expect comma, found '255'
(1572,33): run-time error CSS1046: Expect comma, found '/'
(1573,25): run-time error CSS1046: Expect comma, found '136'
(1573,33): run-time error CSS1046: Expect comma, found '/'
(1574,27): run-time error CSS1046: Expect comma, found '136'
(1574,35): run-time error CSS1046: Expect comma, found '/'
(1578,58): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(1582,25): run-time error CSS1046: Expect comma, found '255'
(1582,33): run-time error CSS1046: Expect comma, found '/'
(1583,26): run-time error CSS1046: Expect comma, found '170'
(1583,34): run-time error CSS1046: Expect comma, found '/'
(1584,28): run-time error CSS1046: Expect comma, found '170'
(1584,36): run-time error CSS1046: Expect comma, found '/'
(1591,25): run-time error CSS1046: Expect comma, found '255'
(1591,33): run-time error CSS1046: Expect comma, found '/'
(1592,26): run-time error CSS1046: Expect comma, found '170'
(1592,34): run-time error CSS1046: Expect comma, found '/'
(1593,28): run-time error CSS1046: Expect comma, found '170'
(1593,36): run-time error CSS1046: Expect comma, found '/'
(1597,58): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(1601,25): run-time error CSS1046: Expect comma, found '255'
(1601,33): run-time error CSS1046: Expect comma, found '/'
(1602,25): run-time error CSS1046: Expect comma, found '0'
(1602,29): run-time error CSS1046: Expect comma, found '/'
(1603,27): run-time error CSS1046: Expect comma, found '0'
(1603,31): run-time error CSS1046: Expect comma, found '/'
(1613,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1616,25): run-time error CSS1046: Expect comma, found '0'
(1616,29): run-time error CSS1046: Expect comma, found '/'
(1617,27): run-time error CSS1046: Expect comma, found '0'
(1617,31): run-time error CSS1046: Expect comma, found '/'
(1620,40): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(1624,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1625,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1629,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1632,35): run-time error CSS1046: Expect comma, found '136'
(1632,43): run-time error CSS1046: Expect comma, found '/'
(1645,30): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1646,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-2'
(1649,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1651,40): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1651,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1657,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1658,33): run-time error CSS1046: Expect comma, found '136'
(1658,41): run-time error CSS1046: Expect comma, found '/'
(1661,48): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(1663,41): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1667,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(1670,17): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(1677,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1683,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1684,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(1685,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-1'
(1687,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(1687,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1687,108): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1690,39): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(1691,67): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(1693,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-2'
(1693,73): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1696,19): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1696,34): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1697,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1702,58): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(1712,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1715,34): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1717,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1719,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1722,22): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(1724,32): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1727,41): run-time error CSS1039: Token not allowed after unary operator: '-radius-2'
(1731,35): run-time error CSS1039: Token not allowed after unary operator: '-color-line-2'
(1733,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1735,44): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1735,72): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1739,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(1740,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1746,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1747,43): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1748,42): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(1749,38): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1751,34): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1752,35): run-time error CSS1039: Token not allowed after unary operator: '-color-tertiary'
(1753,32): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1759,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1760,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(1762,25): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1765,22): run-time error CSS1039: Token not allowed after unary operator: '-color-canvas'
(1766,17): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(1768,35): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1774,66): run-time error CSS1039: Token not allowed after unary operator: '-color-line-2'
(1774,94): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1777,45): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1778,27): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1780,33): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1781,24): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1782,18): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1783,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1784,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1788,33): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1793,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1794,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1807,19): run-time error CSS1039: Token not allowed after unary operator: '-space-10'
(1807,35): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1808,22): run-time error CSS1039: Token not allowed after unary operator: '-color-canvas'
(1812,22): run-time error CSS1039: Token not allowed after unary operator: '-color-surface'
(1813,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1814,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(1815,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(1816,19): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(1816,34): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(1822,32): run-time error CSS1039: Token not allowed after unary operator: '-space-7'
(1822,47): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1826,25): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1830,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1833,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(1835,22): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1842,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1847,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1854,17): run-time error CSS1039: Token not allowed after unary operator: '-color-quaternary'
(1860,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1867,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(1869,30): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1870,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-1'
(1873,40): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1873,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(1877,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1878,33): run-time error CSS1046: Expect comma, found '136'
(1878,41): run-time error CSS1046: Expect comma, found '/'
(1883,17): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(1887,24): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1893,17): run-time error CSS1039: Token not allowed after unary operator: '-color-secondary'
(1901,25): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1909,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1918,24): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1928,22): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(1932,22): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(1933,23): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(1934,32): run-time error CSS1039: Token not allowed after unary operator: '-color-line-2'
(1937,17): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(1941,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(1980,47): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(1984,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-tint'
(1985,35): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1990,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(1991,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-2'
(1992,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-1'
(1994,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2002,15): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2004,19): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2004,34): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2008,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(2009,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2014,44): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(2014,72): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(2016,63): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-tint'
(2016,97): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(2017,38): run-time error CSS1030: Expected identifier, found '.'
(2017,63): run-time error CSS1031: Expected selector, found ')'
(2017,63): run-time error CSS1025: Expected comma or open brace, found ')'
(2021,97): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-tint'
(2022,82): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2028,34): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(2029,35): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(2031,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(2036,22): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(2037,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(2038,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2042,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2045,55): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2045,70): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2045,85): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2045,108): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(2047,64): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
(2051,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(2052,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-3'
(2053,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(2056,48): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2056,63): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2058,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2064,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-2'
(2064,70): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(2070,22): run-time error CSS1039: Token not allowed after unary operator: '-color-canvas'
(2071,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(2072,35): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(2074,46): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2076,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-2'
(2076,70): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(2078,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2079,23): run-time error CSS1039: Token not allowed after unary operator: '-font-body'
(2082,34): run-time error CSS1046: Expect comma, found '136'
(2082,42): run-time error CSS1046: Expect comma, found '/'
(2083,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(2083,73): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(2085,99): run-time error CSS1046: Expect comma, found '136'
(2085,107): run-time error CSS1046: Expect comma, found '/'
(2088,17): run-time error CSS1039: Token not allowed after unary operator: '-color-text'
(2091,33): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(2091,65): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(2093,63): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2099,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-4'
(2100,19): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2102,55): run-time error CSS1046: Expect comma, found '170'
(2102,63): run-time error CSS1046: Expect comma, found '/'
(2103,57): run-time error CSS1046: Expect comma, found '153'
(2103,65): run-time error CSS1046: Expect comma, found '/'
(2104,38): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2104,63): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(2105,33): run-time error CSS1046: Expect comma, found '255'
(2105,41): run-time error CSS1046: Expect comma, found '/'
(2105,74): run-time error CSS1046: Expect comma, found '119'
(2105,82): run-time error CSS1046: Expect comma, found '/'
(2115,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2122,55): run-time error CSS1046: Expect comma, found '255'
(2122,63): run-time error CSS1046: Expect comma, found '/'
(2123,63): run-time error CSS1039: Token not allowed after unary operator: '-radius-pill'
(2125,35): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(2126,33): run-time error CSS1046: Expect comma, found '0'
(2126,37): run-time error CSS1046: Expect comma, found '/'
(2126,63): run-time error CSS1046: Expect comma, found '0'
(2126,67): run-time error CSS1046: Expect comma, found '/'
(2127,37): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(2127,68): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(2129,96): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2131,33): run-time error CSS1046: Expect comma, found '255'
(2131,41): run-time error CSS1046: Expect comma, found '/'
(2132,44): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(2132,76): run-time error CSS1039: Token not allowed after unary operator: '-ease-spring'
(2134,83): run-time error CSS1046: Expect comma, found '255'
(2134,91): run-time error CSS1046: Expect comma, found '/'
(2138,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(2139,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-2'
(2141,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-1'
(2146,69): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(2148,22): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(2150,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2154,27): run-time error CSS1046: Expect comma, found '255'
(2154,35): run-time error CSS1046: Expect comma, found '/'
(2158,84): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-tint'
(2161,53): run-time error CSS1039: Token not allowed after unary operator: '-radius-2'
(2165,28): run-time error CSS1039: Token not allowed after unary operator: '-color-line'
(2166,25): run-time error CSS1039: Token not allowed after unary operator: '-radius-2'
(2167,22): run-time error CSS1039: Token not allowed after unary operator: '-shadow-1'
(2168,25): run-time error CSS1039: Token not allowed after unary operator: '-space-3'
(2172,64): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-soft'
(2172,103): run-time error CSS1039: Token not allowed after unary operator: '-shadow-2'
(2177,17): run-time error CSS1039: Token not allowed after unary operator: '-color-ink'
(2178,23): run-time error CSS1039: Token not allowed after unary operator: '-font-display'
(2182,19): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2182,34): run-time error CSS1039: Token not allowed after unary operator: '-space-8'
(2182,49): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2182,64): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2183,44): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(2183,72): run-time error CSS1039: Token not allowed after unary operator: '-ease-out'
(2185,75): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-tint'
(2185,109): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(2187,46): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-tint'
(2188,17): run-time error CSS1039: Token not allowed after unary operator: '-color-primary-3'
(2190,78): run-time error CSS1039: Token not allowed after unary operator: '-color-subtle'
(2191,85): run-time error CSS1039: Token not allowed after unary operator: '-color-primary'
(2192,70): run-time error CSS1039: Token not allowed after unary operator: '-space-6'
(2192,85): run-time error CSS1039: Token not allowed after unary operator: '-space-5'
(2193,70): run-time error CSS1039: Token not allowed after unary operator: '-color-muted'
(2193,99): run-time error CSS1039: Token not allowed after unary operator: '-space-2'
*/
/*
ATI / Access to Info - modern site stylesheet
Loaded site-wide via ~/bundles/ati-modern (BundleConfig.vb).
Source mockup: ATI_MVC/mockup.html (Phase 1 design target).
Brand palette extracted from Content/porto/css/skins/default.css.
This stylesheet is intentionally loaded AFTER the Porto theme CSS so its
declarations take cascade precedence for the chrome (.site-header,
.site-footer) and home-page sections. Class names do not collide with
Porto's #header/#footer or its component classes.
*/
/* =========================================================================
Tokens
========================================================================= */
:root {
--color-primary: #0088CC;
--color-primary-2: #0099E6;
--color-primary-3: #0077B3;
--color-primary-soft: #E6F4FB;
--color-primary-tint: #F4FAFE;
--color-secondary: #E36159;
--color-secondary-soft: #FCE9E7;
--color-tertiary: #2BAAB1;
--color-tertiary-soft: #DEF3F4;
--color-quaternary: #383F48;
--color-ink: #0F1620;
--color-text: #2A323C;
--color-muted: #5B6573;
--color-subtle: #8B95A3;
--color-line: #E6EAF0;
--color-line-2: #EEF2F6;
--color-surface: #FFFFFF;
--color-canvas: #F7F9FC;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
--space-9: 56px;
--space-10: 72px;
--space-11: 96px;
--space-12: 128px;
--radius-1: 6px;
--radius-2: 10px;
--radius-3: 14px;
--radius-4: 20px;
--radius-pill: 999px;
--shadow-1:
0 1px 2px rgb(15 22 32 / 0.04),
0 2px 6px rgb(15 22 32 / 0.04);
--shadow-2:
0 1px 2px rgb(0 136 204 / 0.05),
0 8px 24px rgb(0 136 204 / 0.06),
0 24px 56px rgb(0 136 204 / 0.06);
--shadow-3:
0 1px 3px rgb(0 136 204 / 0.06),
0 12px 40px rgb(0 136 204 / 0.10),
0 32px 72px rgb(0 136 204 / 0.10);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--font-display: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--container: 1200px;
--container-narrow: 920px;
--z-base: 1;
--z-elevated: 10;
--z-floating: 100;
--z-overlay: 1000;
--z-modal: 10000;
}
/* =========================================================================
Base - scoped to html/body so Porto's component-level styles still apply
to other pages without us fighting them on every selector.
========================================================================= */
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--color-text);
background: var(--color-surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* =========================================================================
Modern utility primitives (used by .site-header, .site-footer, home page)
========================================================================= */
.atim-container {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--space-6);
}
.atim-container-narrow {
max-width: var(--container-narrow);
margin: 0 auto;
padding: 0 var(--space-6);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-primary);
}
.eyebrow::before {
content: "";
width: 24px; height: 1.5px;
background: currentColor;
border-radius: 2px;
}
.atim-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 8px 16px;
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.25;
border-radius: var(--radius-pill);
transition:
transform 0.4s var(--ease-spring),
box-shadow 0.3s var(--ease-out),
background-color 0.2s var(--ease-out),
color 0.2s var(--ease-out);
text-decoration: none;
border: 0;
cursor: pointer;
will-change: transform;
}
.atim-btn-primary {
background: linear-gradient(180deg, var(--color-primary-2) 0%, var(--color-primary) 100%);
color: #fff;
box-shadow:
0 1px 0 rgb(255 255 255 / 0.4) inset,
0 1px 2px rgb(0 136 204 / 0.2),
0 10px 24px rgb(0 136 204 / 0.28);
}
.atim-btn-primary:hover {
color: #fff;
transform: translateY(-2px);
box-shadow:
0 1px 0 rgb(255 255 255 / 0.5) inset,
0 2px 4px rgb(0 136 204 / 0.24),
0 16px 36px rgb(0 136 204 / 0.36);
}
.atim-btn-primary:active { transform: translateY(0); }
.atim-btn-ghost {
color: var(--color-quaternary);
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--color-line);
}
.atim-btn-ghost:hover {
color: var(--color-primary);
box-shadow: inset 0 0 0 1.5px var(--color-primary);
transform: translateY(-2px);
}
.atim-btn-link {
color: var(--color-quaternary);
font-weight: 600;
padding: 14px 8px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.atim-btn-link:hover { color: var(--color-primary); gap: var(--space-3); }
.atim-btn .arrow {
position: static;
display: inline-block;
width: 16px;
height: 16px;
flex-shrink: 0;
transition: transform 0.3s var(--ease-spring);
}
.atim-btn:hover .arrow { transform: translateX(3px); }
.atim-btn:focus-visible,
a:focus-visible {
outline: 3px solid var(--color-primary);
outline-offset: 2px;
border-radius: 2px;
}
/* =========================================================================
Site header (modern chrome - replaces Porto #header)
========================================================================= */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-floating);
background: rgb(255 255 255 / 0.78);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid rgb(230 234 240 / 0.7);
}
.site-header * { box-sizing: border-box; }
.site-header .header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 76px;
gap: var(--space-7);
}
.site-header .brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--color-ink);
line-height: 0;
text-decoration: none;
}
.site-header .brand-img {
display: block;
height: 38px;
width: auto;
}
.site-header .primary-nav { display: none; }
@media (max-width: 959.98px) {
.site-header[data-nav-open="true"] .primary-nav {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
position: absolute;
top: 100%;
left: 0; right: 0;
background: rgb(255 255 255 / 0.96);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--color-line);
padding: var(--space-3) var(--space-6);
box-shadow: var(--shadow-2);
}
.site-header[data-nav-open="true"] .primary-nav a {
padding: 14px 8px;
border-bottom: 1px solid var(--color-line-2);
font-size: 16px;
}
.site-header[data-nav-open="true"] .primary-nav a:last-child { border-bottom: 0; }
.site-header[data-nav-open="true"] .primary-nav a::after { display: none; }
}
@media (min-width: 960px) {
.site-header .primary-nav { display: flex; align-items: center; gap: var(--space-7); }
}
.site-header .primary-nav a {
color: var(--color-text);
font-size: 14.5px;
font-weight: 600;
padding: 8px 0;
position: relative;
text-decoration: none;
}
.site-header .primary-nav a::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px; background: var(--color-primary);
border-radius: 2px;
transform: scaleX(0); transform-origin: left;
transition: transform 0.3s var(--ease-out);
}
.site-header .primary-nav a:hover { color: var(--color-primary); }
.site-header .primary-nav a:hover::after { transform: scaleX(1); }
.site-header .primary-nav a.is-active { color: var(--color-primary); }
.site-header .primary-nav a.is-active::after { transform: scaleX(1); }
.site-header .header-actions { display: flex; align-items: center; gap: var(--space-4); }
/* Compact header CTA - sits cleanly inside the 76px header bar without
visually escaping past it. */
.site-header .header-actions .atim-btn {
padding: 8px 16px;
font-size: 13px;
gap: 6px;
box-shadow:
0 1px 0 rgb(255 255 255 / 0.4) inset,
0 1px 2px rgb(0 136 204 / 0.18),
0 4px 12px rgb(0 136 204 / 0.22);
}
.site-header .header-actions .atim-btn:hover {
box-shadow:
0 1px 0 rgb(255 255 255 / 0.5) inset,
0 2px 4px rgb(0 136 204 / 0.22),
0 8px 20px rgb(0 136 204 / 0.30);
}
.site-header .header-actions .atim-btn .arrow { width: 12px; height: 12px; }
.site-header .login-link { color: var(--color-text); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.site-header .login-link:hover { color: var(--color-primary); }
.site-header .menu-toggle {
display: inline-flex;
width: 40px; height: 40px;
align-items: center; justify-content: center;
border-radius: var(--radius-2);
color: var(--color-quaternary);
background: var(--color-line-2);
border: 0;
cursor: pointer;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.site-header .menu-toggle:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.site-header .menu-toggle .open-icon { display: block; }
.site-header .menu-toggle .close-icon { display: none; }
.site-header[data-nav-open="true"] .menu-toggle .open-icon { display: none; }
.site-header[data-nav-open="true"] .menu-toggle .close-icon { display: block; }
@media (min-width: 960px) { .site-header .menu-toggle { display: none; } }
/* =========================================================================
Hero
========================================================================= */
.hero {
position: relative;
overflow: hidden;
padding: var(--space-11) 0 var(--space-12);
isolation: isolate;
}
.hero::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(900px 600px at 12% 0%, rgb(0 136 204 / 0.10), transparent 60%),
radial-gradient(700px 500px at 100% 30%, rgb(43 170 177 / 0.10), transparent 60%),
radial-gradient(600px 400px at 50% 100%, rgb(227 97 89 / 0.06), transparent 60%),
linear-gradient(180deg, #FBFDFE 0%, #FFFFFF 100%);
z-index: -2;
}
.hero::after {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.35;
mix-blend-mode: multiply;
pointer-events: none;
z-index: -1;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
align-items: center;
}
@media (min-width: 1040px) {
.hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-11); }
}
.hero-copy .eyebrow { margin-bottom: var(--space-5); }
.hero-headline {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-ink);
font-size: clamp(40px, 5.6vw, 72px);
line-height: 1.02;
margin: 0 0 var(--space-5);
letter-spacing: -0.03em;
}
.hero-headline .accent {
color: var(--color-primary);
font-style: italic;
font-weight: 500;
}
.hero-headline .underline {
background: linear-gradient(180deg, transparent 70%, rgb(0 136 204 / 0.18) 70%);
padding: 0 0.05em;
}
.hero-sub {
font-size: clamp(17px, 1.5vw, 19px);
color: var(--color-muted);
max-width: 56ch;
margin: 0 0 var(--space-7);
line-height: 1.7;
}
.hero-sub strong { color: var(--color-quaternary); font-weight: 700; }
.hero-ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-4);
margin-bottom: var(--space-9);
}
.hero-ctas .atim-btn-primary { padding: 5px 6px 5px 16px; }
.hero-ctas .price-chip {
display: inline-flex;
align-items: baseline;
gap: 3px;
background: rgb(255 255 255 / 0.18);
border: 1px solid rgb(255 255 255 / 0.22);
border-radius: var(--radius-pill);
padding: 3px 8px;
margin-left: 2px;
line-height: 1;
font-weight: 800;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hero-ctas .price-chip small { font-size: 8px; opacity: 0.92; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; }
.hero-ctas .price-chip b { font-size: 11px; font-weight: 800; letter-spacing: -0.01em; }
.hero-trust {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-7);
padding-top: var(--space-6);
border-top: 1px dashed var(--color-line);
}
.hero-trust-stat {
display: flex; flex-direction: column;
line-height: 1.2;
}
.hero-trust-stat b {
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.02em;
}
.hero-trust-stat span {
font-size: 13px;
color: var(--color-muted);
font-weight: 500;
}
.hero-visual {
position: relative;
aspect-ratio: 4 / 5;
max-width: 560px;
width: 100%;
margin: 0 auto;
z-index: var(--z-base);
}
.hero-visual::before {
content: "";
position: absolute;
inset: 4% 8%;
background: radial-gradient(closest-side, rgb(0 136 204 / 0.18), transparent 70%);
filter: blur(40px);
z-index: -1;
}
.doc-stack {
position: absolute;
inset: 4% 8% 6% 8%;
perspective: 1600px;
transform-style: preserve-3d;
}
.doc-stack::before {
content: "";
position: absolute;
inset: -2% -3% 2% 5%;
background: linear-gradient(180deg, #F4F8FC 0%, #E9F1F8 100%);
border-radius: var(--radius-4);
box-shadow: var(--shadow-1);
transform: rotate(-3deg);
transform-origin: 50% 100%;
z-index: -1;
border: 1px solid var(--color-line);
}
.doc {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 100%);
border-radius: var(--radius-4);
box-shadow: var(--shadow-3);
padding: 36px 36px 32px;
transform: rotate(1.5deg);
transform-origin: 50% 100%;
border: 1px solid rgb(255 255 255 / 0.8);
overflow: hidden;
}
.doc::before {
content: "";
position: absolute; left: 0; right: 0; top: 0; height: 38%;
background: linear-gradient(180deg, rgb(0 136 204 / 0.06), transparent);
pointer-events: none;
}
.doc-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.doc-title {
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
color: var(--color-ink);
letter-spacing: -0.02em;
line-height: 1.15;
}
.doc-title small {
display: block;
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--color-primary);
margin-bottom: 6px;
text-transform: uppercase;
}
.doc-title .doc-org {
display: block;
font-weight: 500;
font-style: italic;
color: var(--color-primary);
margin-top: 4px;
}
.doc-stamp {
border: 2px solid var(--color-primary);
color: var(--color-primary);
font-family: var(--font-body);
font-weight: 800;
font-size: 10px;
letter-spacing: 0.14em;
padding: 6px 8px;
border-radius: 4px;
transform: rotate(-8deg);
line-height: 1.1;
text-align: center;
text-transform: uppercase;
opacity: 0.85;
}
.doc-section { margin-bottom: 18px; }
.doc-section h5 {
font-family: var(--font-body);
font-size: 9.5px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 8px;
}
.doc-line {
height: 7px;
background: linear-gradient(90deg, var(--color-line) 0%, var(--color-line-2) 100%);
border-radius: 4px;
margin-bottom: 7px;
}
.doc-line.short { width: 65%; }
.doc-line.shorter { width: 40%; }
.doc-line.dark { background: linear-gradient(90deg, var(--color-quaternary), #5B6573); opacity: 0.85; }
.float-card {
position: absolute;
background: #fff;
border-radius: var(--radius-3);
box-shadow: var(--shadow-2);
padding: 14px 18px;
display: flex;
align-items: center;
gap: 12px;
z-index: var(--z-elevated);
border: 1px solid var(--color-line);
}
.float-card .icon {
width: 40px; height: 40px;
border-radius: var(--radius-2);
display: grid; place-items: center;
background: var(--color-tertiary-soft);
color: var(--color-tertiary);
flex-shrink: 0;
}
.float-card .text { line-height: 1.25; }
.float-card .text b { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--color-ink); display: block; }
.float-card .text span { font-size: 12px; color: var(--color-muted); }
.float-approved { left: -28px; bottom: 18%; transform: rotate(-3deg); }
.float-price { right: -28px; top: 14%; transform: rotate(3deg); padding: 16px 20px; }
.float-price .icon { background: var(--color-primary-soft); color: var(--color-primary); }
.float-price .text b { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--color-ink); }
.float-price .text .strike {
text-decoration: line-through;
text-decoration-color: var(--color-secondary);
color: var(--color-subtle);
font-size: 12px;
font-weight: 600;
display: block;
}
/* =========================================================================
Credibility band
========================================================================= */
.cred-band {
padding: var(--space-9) 0;
border-top: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
background: var(--color-canvas);
position: relative;
overflow: hidden;
}
.cred-band::before {
content: "";
position: absolute; left: -10%; top: -50%;
width: 60%; height: 200%;
background: radial-gradient(closest-side, rgb(0 136 204 / 0.06), transparent);
pointer-events: none;
}
.cred-band-label {
text-align: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-subtle);
margin: 0 0 var(--space-7);
position: relative;
}
.cred-pills {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: var(--space-3);
position: relative;
}
.cred-pill {
display: inline-flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
padding: 10px 18px 10px 14px;
font-size: 14px;
font-weight: 600;
color: var(--color-quaternary);
box-shadow: var(--shadow-1);
line-height: 1.3;
transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out), border-color 0.2s var(--ease-out);
}
.cred-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--color-primary-soft); }
.cred-pill .icon {
width: 28px; height: 28px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--color-primary-soft);
color: var(--color-primary);
flex-shrink: 0;
}
.cred-pill.tone-coral .icon { background: var(--color-secondary-soft); color: var(--color-secondary); }
.cred-pill.tone-teal .icon { background: var(--color-tertiary-soft); color: var(--color-tertiary); }
.cred-pill.tone-slate .icon { background: #EEF1F4; color: var(--color-quaternary); }
.cred-pill b { font-weight: 800; color: var(--color-ink); margin-right: 2px; }
/* =========================================================================
Section primitives
========================================================================= */
.section { padding: var(--space-12) 0; }
.section h2 {
font-family: var(--font-display);
color: var(--color-ink);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 var(--space-5);
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-10); }
.section-head .eyebrow { justify-content: center; margin-bottom: var(--space-5); }
.section-head h2 {
font-size: clamp(32px, 4vw, 48px);
margin-bottom: var(--space-5);
}
.section-head p {
color: var(--color-muted);
font-size: 18px;
margin: 0 auto;
max-width: 60ch;
line-height: 1.7;
}
/* =========================================================================
Values (4-card grid)
========================================================================= */
.values { background: var(--color-surface); }
.values-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: var(--space-5);
}
@media (min-width: 720px) { .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .values-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value-card {
background: #fff;
border-radius: var(--radius-3);
padding: var(--space-7) var(--space-6);
border: 1px solid var(--color-line);
transition: transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
position: relative;
overflow: hidden;
}
.value-card::after {
content: "";
position: absolute; inset: auto -20% -40% auto;
width: 240px; height: 240px;
background: radial-gradient(closest-side, rgb(0 136 204 / 0.08), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s var(--ease-out);
}
.value-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-2);
border-color: transparent;
}
.value-card:hover::after { opacity: 1; }
.value-card .icon {
width: 48px; height: 48px;
display: grid; place-items: center;
border-radius: var(--radius-2);
background: var(--color-primary-soft);
color: var(--color-primary);
margin-bottom: var(--space-5);
}
.value-card.tone-coral .icon { background: var(--color-secondary-soft); color: var(--color-secondary); }
.value-card.tone-teal .icon { background: var(--color-tertiary-soft); color: var(--color-tertiary); }
.value-card.tone-slate .icon { background: #EEF1F4; color: var(--color-quaternary); }
.value-card h3 {
font-family: var(--font-display);
color: var(--color-ink);
font-weight: 700;
letter-spacing: -0.02em;
font-size: 19px;
margin: 0 0 var(--space-3);
line-height: 1.25;
}
.value-card p { font-size: 14.5px; color: var(--color-muted); margin: 0; line-height: 1.65; }
/* =========================================================================
Explainer
========================================================================= */
.explainer { background: var(--color-canvas); position: relative; overflow: hidden; }
.explainer::before {
content: "";
position: absolute; left: -10%; top: -10%;
width: 480px; height: 480px;
background: radial-gradient(closest-side, rgb(0 136 204 / 0.08), transparent);
pointer-events: none;
}
.explainer-grid {
display: grid; gap: var(--space-10);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 1040px) { .explainer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
.explainer-copy h2 {
font-size: clamp(30px, 3.6vw, 44px);
}
.explainer-copy h2 em {
font-style: italic;
color: var(--color-primary);
font-weight: 500;
}
.explainer-copy p { color: var(--color-muted); font-size: 17px; margin: 0 0 var(--space-5); line-height: 1.7; }
.explainer-copy strong { color: var(--color-quaternary); font-weight: 700; }
.explainer-list { list-style: none; padding: 0; margin: var(--space-6) 0 0; }
.explainer-list li {
display: flex; gap: var(--space-3); align-items: flex-start;
padding: var(--space-3) 0;
border-bottom: 1px dashed var(--color-line);
color: var(--color-text);
font-size: 16px;
}
.explainer-list li:last-child { border-bottom: 0; }
.explainer-list li svg { flex-shrink: 0; margin-top: 4px; color: var(--color-tertiary); }
.explainer-visual {
position: relative;
aspect-ratio: 5 / 4.5;
border-radius: var(--radius-4);
background: linear-gradient(160deg, #FFFFFF 0%, #EEF6FB 100%);
padding: var(--space-7);
box-shadow: var(--shadow-2);
border: 1px solid var(--color-line);
overflow: hidden;
}
.explainer-visual::after {
content: ""; position: absolute; inset: auto -15% -25% auto;
width: 380px; height: 380px;
background: radial-gradient(closest-side, rgb(43 170 177 / 0.16), transparent);
pointer-events: none;
}
.compliance-badges {
position: relative; z-index: var(--z-base);
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-6);
}
.compliance-badges .badge {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-pill);
padding: 8px 14px;
font-size: 12px;
font-weight: 700;
color: var(--color-quaternary);
letter-spacing: 0.04em;
display: inline-flex; gap: 6px; align-items: center;
}
.compliance-badges .badge .dot { width: 8px; height: 8px; border-radius: 99px; background: var(--color-tertiary); }
.compliance-badges .badge.alt .dot { background: var(--color-primary); }
.explainer-doc {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-3);
padding: var(--space-6);
box-shadow: var(--shadow-1);
position: relative;
z-index: var(--z-base);
}
.explainer-doc h4 {
font-family: var(--font-body);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
margin: 0 0 var(--space-3);
}
.explainer-doc p {
font-family: var(--font-display);
font-size: 22px;
color: var(--color-ink);
margin: 0 0 var(--space-5);
line-height: 1.25;
font-weight: 600;
}
.explainer-doc .lines { display: flex; flex-direction: column; gap: 8px; }
.explainer-doc .lines i { display: block; height: 8px; background: var(--color-line-2); border-radius: 4px; }
.explainer-doc .lines i:nth-child(2) { width: 92%; }
.explainer-doc .lines i:nth-child(3) { width: 78%; }
.explainer-doc .lines i:nth-child(4) { width: 88%; }
/* =========================================================================
How it works
========================================================================= */
.howto { background: #fff; }
.steps {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
counter-reset: step;
position: relative;
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
.steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.steps::before {
content: "";
position: absolute;
top: 68px; left: 14%; right: 14%;
height: 2px;
background: repeating-linear-gradient(90deg, var(--color-primary-soft) 0 8px, transparent 8px 16px);
z-index: 0;
}
}
.step {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-3);
padding: var(--space-7) var(--space-6);
position: relative;
z-index: var(--z-base);
transition: transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.step .num {
width: 72px; height: 72px;
border-radius: 50%;
background:
radial-gradient(closest-side at 30% 30%, #fff, #F4FAFE 60%, #E6F4FB 100%);
border: 1.5px solid #fff;
display: grid; place-items: center;
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
color: var(--color-primary);
margin: 0 auto var(--space-5);
box-shadow:
0 1px 0 rgb(255 255 255 / 0.8) inset,
0 1px 2px rgb(0 136 204 / 0.10),
0 12px 24px rgb(0 136 204 / 0.14);
letter-spacing: -0.02em;
position: relative;
}
.step .num::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px dashed rgb(0 136 204 / 0.18);
}
.step h3 {
font-family: var(--font-display);
color: var(--color-ink);
font-weight: 700;
letter-spacing: -0.02em;
font-size: 19px;
text-align: center;
margin: 0 0 var(--space-3);
}
.step p {
text-align: center;
color: var(--color-muted);
font-size: 14.5px;
margin: 0;
line-height: 1.6;
}
/* =========================================================================
Pricing
========================================================================= */
.pricing { background: var(--color-canvas); position: relative; overflow: hidden; }
.pricing::before {
content: "";
position: absolute; right: -10%; top: 10%;
width: 520px; height: 520px;
background: radial-gradient(closest-side, rgb(0 136 204 / 0.10), transparent);
pointer-events: none;
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
max-width: 980px; margin: 0 auto;
align-items: stretch;
}
@media (min-width: 800px) { .pricing-grid { grid-template-columns: 1fr auto 1fr; align-items: center; } }
.price-card {
background: #fff;
border-radius: var(--radius-4);
padding: var(--space-8) var(--space-7);
border: 1px solid var(--color-line);
text-align: center;
box-shadow: var(--shadow-1);
position: relative;
overflow: hidden;
}
.price-card.us {
background:
radial-gradient(220px 200px at 0% 0%, rgb(0 136 204 / 0.10), transparent),
radial-gradient(220px 200px at 100% 100%, rgb(43 170 177 / 0.12), transparent),
linear-gradient(180deg, #fff 0%, #F7FAFD 100%);
border: 1px solid var(--color-primary-soft);
box-shadow: var(--shadow-3);
transform: translateY(-4px);
}
.price-card.them { opacity: 0.95; }
.price-card .label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-subtle);
margin-bottom: var(--space-4);
}
.price-card.us .label { color: var(--color-primary); }
.price-card .name {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
color: var(--color-ink);
margin-bottom: var(--space-5);
line-height: 1.2;
}
.price-card .amount {
font-family: var(--font-display);
font-size: clamp(44px, 6vw, 64px);
font-weight: 800;
color: var(--color-ink);
line-height: 1;
margin-bottom: var(--space-2);
letter-spacing: -0.02em;
}
.price-card.them .amount {
color: var(--color-secondary);
text-decoration: line-through;
text-decoration-thickness: 3px;
text-decoration-color: rgb(227 97 89 / 0.55);
}
.price-card.us .amount-row {
display: inline-flex; align-items: baseline; gap: 6px;
}
.price-card.us .amount-row .currency { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--color-muted); }
.price-card .sub {
color: var(--color-muted);
font-size: 14px;
margin-bottom: var(--space-6);
}
.price-card .features {
list-style: none; padding: 0; margin: 0 0 var(--space-6); text-align: left;
display: flex; flex-direction: column; gap: 8px;
font-size: 14.5px;
}
.price-card .features li { display: flex; gap: 10px; align-items: flex-start; color: var(--color-text); line-height: 1.5; }
.price-card .features li svg { flex-shrink: 0; margin-top: 4px; color: var(--color-tertiary); }
.price-card.them .features li svg { color: var(--color-subtle); }
.price-card.them .features li { color: var(--color-muted); }
.pricing-vs {
width: 80px; height: 80px;
border-radius: 50%;
background:
radial-gradient(closest-side at 30% 30%, #fff, #F4FAFE 60%, var(--color-primary-soft) 100%);
color: var(--color-primary);
display: grid; place-items: center;
font-family: var(--font-display);
font-style: italic;
font-size: 26px;
font-weight: 700;
margin: 0 auto;
box-shadow:
0 1px 0 rgb(255 255 255 / 0.9) inset,
0 8px 18px rgb(0 136 204 / 0.18),
0 24px 48px rgb(0 136 204 / 0.18);
z-index: var(--z-elevated);
position: relative;
letter-spacing: -0.02em;
border: 1px solid #fff;
}
.pricing-vs::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px dashed rgb(0 136 204 / 0.22);
}
.savings-callout {
margin: var(--space-8) auto 0;
text-align: center;
max-width: 560px;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-3) 100%);
color: #fff;
border-radius: var(--radius-3);
padding: var(--space-6) var(--space-7);
box-shadow: 0 18px 40px rgb(0 136 204 / 0.35);
position: relative; overflow: hidden;
}
.savings-callout::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(closest-side at 0% 0%, rgb(255 255 255 / 0.18), transparent);
pointer-events: none;
}
.savings-callout b {
font-family: var(--font-display);
font-size: 28px;
font-weight: 700;
display: block;
margin-bottom: 4px;
}
.savings-callout span { font-size: 14.5px; opacity: 0.92; }
/* =========================================================================
Long-form SEO body
========================================================================= */
.longform { background: #fff; }
.longform-grid {
display: grid; gap: var(--space-9);
grid-template-columns: 1fr;
max-width: var(--container-narrow);
margin: 0 auto;
}
.longform h2 {
font-family: var(--font-display);
color: var(--color-ink);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
font-size: clamp(26px, 3vw, 34px);
margin: var(--space-9) 0 var(--space-5);
}
.longform > article > h2:first-child { margin-top: 0; }
.longform p, .longform ul, .longform ol { font-size: 16.5px; color: var(--color-text); line-height: 1.75; margin: 0 0 var(--space-5); }
.longform ul, .longform ol { padding-left: 1.5em; }
.longform li { margin-bottom: 8px; }
.longform strong { color: var(--color-ink); font-weight: 700; }
.longform a { color: var(--color-primary); font-weight: 600; border-bottom: 1.5px solid rgb(0 136 204 / 0.25); text-decoration: none; }
.longform a:hover { border-bottom-color: var(--color-primary); }
/* =========================================================================
FAQ accordion
========================================================================= */
.faq { background: var(--color-canvas); }
.faq-list { max-width: var(--container-narrow); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.faq-item {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-3);
overflow: hidden;
transition: box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.faq-item[open] {
box-shadow: var(--shadow-2);
border-color: var(--color-primary-soft);
}
.faq-item summary {
list-style: none;
cursor: pointer;
padding: var(--space-6) var(--space-7);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
color: var(--color-ink);
line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary);
display: grid; place-items: center;
flex-shrink: 0;
transition: transform 0.4s var(--ease-spring), background-color 0.2s var(--ease-out);
}
.faq-item[open] summary .chev { transform: rotate(180deg); background: var(--color-primary); color: #fff; }
.faq-item .body { padding: 0 var(--space-7) var(--space-7); color: var(--color-muted); font-size: 16px; line-height: 1.75; }
.faq-item .body p { margin: 0; }
/* =========================================================================
Final CTA
========================================================================= */
.cta-final {
padding: var(--space-12) 0;
background:
radial-gradient(700px 500px at 10% 0%, rgb(43 170 177 / 0.20), transparent 60%),
radial-gradient(700px 500px at 100% 100%, rgb(0 153 230 / 0.20), transparent 60%),
linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-3) 100%);
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-final::after {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.5;
pointer-events: none;
}
.cta-final h2 {
font-family: var(--font-display);
color: #fff;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
font-size: clamp(34px, 4.6vw, 56px);
margin: 0 0 var(--space-5);
}
.cta-final h2 .accent {
font-style: italic;
font-weight: 500;
color: rgb(255 255 255 / 0.85);
}
.cta-final p {
color: rgb(255 255 255 / 0.88);
font-size: 18px;
max-width: 60ch;
margin: 0 auto var(--space-7);
line-height: 1.7;
}
.cta-final .atim-btn-primary {
background: #fff;
color: var(--color-primary);
box-shadow:
0 1px 0 rgb(255 255 255 / 0.7) inset,
0 1px 2px rgb(0 0 0 / 0.1),
0 16px 36px rgb(0 0 0 / 0.18);
}
.cta-final .atim-btn-primary:hover {
background: #fff;
color: var(--color-primary-3);
transform: translateY(-2px);
box-shadow:
0 1px 0 rgb(255 255 255 / 0.8) inset,
0 2px 4px rgb(0 0 0 / 0.12),
0 22px 44px rgb(0 0 0 / 0.22);
}
/* =========================================================================
Site footer (modern chrome - replaces Porto #footer)
========================================================================= */
.site-footer {
background: #0B1220;
color: #BFC8D6;
padding: var(--space-11) 0 var(--space-7);
}
.site-footer * { box-sizing: border-box; }
.site-footer .footer-grid {
display: grid; gap: var(--space-8);
grid-template-columns: 1fr;
margin-bottom: var(--space-9);
}
@media (min-width: 720px) { .site-footer .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer .footer-brand { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 22px; margin-bottom: var(--space-4); letter-spacing: -0.02em; }
.site-footer .footer-brand img { height: 36px; width: auto; display: block; }
.site-footer .footer-blurb { color: #8B95A3; font-size: 14.5px; line-height: 1.7; max-width: 36ch; margin: var(--space-5) 0 var(--space-5); }
.site-footer .footer-contact a { color: #fff; font-weight: 600; text-decoration: none; }
.site-footer .footer-contact a:hover { color: var(--color-primary-2); }
.site-footer .footer-col h4 {
color: #fff;
font-family: var(--font-body);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
margin: 0 0 var(--space-5);
}
.site-footer .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer .footer-col a { color: #BFC8D6; font-size: 14.5px; transition: color 0.2s var(--ease-out); text-decoration: none; }
.site-footer .footer-col a:hover { color: #fff; }
.site-footer .footer-bottom {
border-top: 1px solid rgb(255 255 255 / 0.08);
padding-top: var(--space-6);
display: flex; flex-wrap: wrap; gap: var(--space-5);
align-items: center; justify-content: space-between;
color: #8B95A3; font-size: 13px;
}
.site-footer .footer-bottom nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-footer .footer-bottom nav a { color: #8B95A3; text-decoration: none; }
.site-footer .footer-bottom nav a:hover { color: #fff; }
/* =========================================================================
Legacy Porto chrome compatibility layer
-------------------------------------------------------------------------
The site's inner pages (HowToGuide, PAIA_FAQ, PAIAManualGenerator, Contact,
Login, Register, Articles, Article, Terms, etc.) use Porto's Bootstrap-
based markup: .main wrapper, .page-header.page-header-classic banner,
.heading.heading-border, .process-step / .process-step-circle, .alert,
.btn / .btn-* variants, .form-control, .card. These rules retheme those
patterns to the modern design tokens without touching any view markup —
so all 19+ inner pages pick up the new look automatically.
Selectors are scoped to `.main` (Porto's public-page wrapper) wherever
reasonable so admin/member views with different chrome are unaffected.
========================================================================= */
/* Main content wrapper - give breathing room under the sticky header and
set the prose canvas. */
.main { background: var(--color-surface); }
.main > .container,
.main > section > .container { position: relative; }
/* ---- Page header banner (replaces Porto's dark .page-header-classic) ---- */
.main .page-header.page-header-classic {
background:
radial-gradient(700px 360px at 12% 0%, rgb(0 136 204 / 0.10), transparent 60%),
radial-gradient(600px 320px at 100% 30%, rgb(43 170 177 / 0.10), transparent 60%),
linear-gradient(180deg, #FBFDFE 0%, #FFFFFF 100%);
color: var(--color-ink);
padding: var(--space-9) 0 var(--space-7);
border-bottom: 1px solid var(--color-line);
margin: 0 0 var(--space-9);
position: relative;
overflow: hidden;
}
.main .page-header.page-header-classic::after {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.25;
mix-blend-mode: multiply;
pointer-events: none;
}
.main .page-header h1,
.main .page-header.page-header-classic h1 {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.03em;
line-height: 1.1;
font-size: clamp(34px, 4.4vw, 52px);
margin: var(--space-3) 0 0;
background: none !important;
border: 0 !important;
padding: 0 !important;
text-shadow: none !important;
}
.main .page-header h1::before,
.main .page-header h1::after { display: none !important; }
.main .page-header h1[data-title-border] { border: 0; padding: 0; }
.main .page-header .lead {
font-size: clamp(16px, 1.4vw, 19px);
color: var(--color-muted);
margin-top: var(--space-3);
max-width: 60ch;
}
/* ---- Breadcrumb ---- */
.main .breadcrumb {
background: transparent;
padding: 0;
margin: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--color-subtle);
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.main .breadcrumb li {
display: inline-flex; align-items: center; gap: 8px;
}
.main .breadcrumb li + li::before {
content: "›";
color: var(--color-subtle);
font-weight: 400;
font-size: 16px;
line-height: 1;
}
.main .breadcrumb a {
color: var(--color-muted);
text-decoration: none;
}
.main .breadcrumb a:hover { color: var(--color-primary); }
.main .breadcrumb .active,
.main .breadcrumb li.active { color: var(--color-primary); }
.main .breadcrumb-item + .breadcrumb-item::before { color: var(--color-line); }
/* ---- Section heading wrapper (.heading.heading-border) ---- */
.main .heading.heading-border,
.main .heading.heading-border-bottom,
.main .heading.heading-middle-border {
background: none !important;
border: 0 !important;
padding: 0 !important;
margin: 0 0 var(--space-7) !important;
text-align: left;
position: relative;
}
.main .heading.heading-middle-border::before,
.main .heading.heading-middle-border::after { display: none !important; }
.main .heading h1,
.main .heading h2,
.main .heading h3 {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
background: none !important;
border: 0 !important;
padding: 0 !important;
}
.main .heading h1 { font-size: clamp(28px, 3.4vw, 40px); }
.main .heading h2 { font-size: clamp(24px, 3vw, 34px); }
.main .heading h3 { font-size: clamp(20px, 2.4vw, 26px); }
.main .heading h1 strong,
.main .heading h2 strong,
.main .heading h3 strong { color: var(--color-primary); }
/* ---- General prose inside .main ---- */
.main h1, .main h2, .main h3, .main h4, .main h5, .main h6 {
font-family: var(--font-display);
color: var(--color-ink);
letter-spacing: -0.02em;
line-height: 1.2;
font-weight: 700;
}
.main article > h2,
.main .container > .row > .col-lg-8 > article > h2 {
margin-top: var(--space-9);
font-size: clamp(24px, 2.8vw, 32px);
}
.main article > h2:first-child { margin-top: 0; }
.main article p,
.main article li {
font-size: 16.5px;
line-height: 1.75;
color: var(--color-text);
}
.main article p { margin: 0 0 var(--space-5); }
.main article ul,
.main article ol { padding-left: 1.5em; margin: 0 0 var(--space-5); }
.main article li { margin-bottom: 8px; }
.main article strong { color: var(--color-ink); font-weight: 700; }
.main p.lead {
font-size: clamp(17px, 1.5vw, 20px);
color: var(--color-muted);
line-height: 1.65;
font-weight: 400;
margin-bottom: var(--space-6);
}
.main article a:not(.btn):not(.atim-btn) {
color: var(--color-primary);
font-weight: 600;
border-bottom: 1.5px solid rgb(0 136 204 / 0.25);
text-decoration: none;
transition: border-color 0.2s var(--ease-out);
}
.main article a:not(.btn):not(.atim-btn):hover { border-bottom-color: var(--color-primary); }
/* ---- Process steps (.process > .process-step) ---- */
.main .row.process,
.main .process { margin-top: var(--space-7); position: relative; }
.main .process-step {
text-align: center;
padding: var(--space-6);
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-3);
transition: transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease-out);
margin-bottom: var(--space-5) !important;
}
.main .process-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.main .process-step-circle {
width: 72px; height: 72px;
border-radius: 50%;
background: radial-gradient(closest-side at 30% 30%, #fff, #F4FAFE 60%, #E6F4FB 100%) !important;
border: 1.5px solid #fff !important;
display: grid; place-items: center;
margin: 0 auto var(--space-5);
box-shadow:
0 1px 0 rgb(255 255 255 / 0.8) inset,
0 1px 2px rgb(0 136 204 / 0.10),
0 12px 24px rgb(0 136 204 / 0.14) !important;
position: relative;
color: var(--color-primary) !important;
}
.main .process-step-circle::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
border: 1px dashed rgb(0 136 204 / 0.18);
}
.main .process-step-circle-content {
font-family: var(--font-display) !important;
font-size: 28px !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
letter-spacing: -0.02em;
background: none !important;
line-height: 1;
}
.main .process-step-content h4 {
font-family: var(--font-display);
font-size: 18px !important;
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.02em;
margin: 0 0 var(--space-3) !important;
}
.main .process-step-content p {
color: var(--color-muted);
font-size: 14.5px;
line-height: 1.6;
}
/* ---- Alerts (.alert / .alert-success / .alert-danger / .alert-info) ---- */
.main .alert {
background: #fff;
border: 1px solid var(--color-line);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-3);
padding: var(--space-6) var(--space-7);
box-shadow: var(--shadow-1);
color: var(--color-text);
margin-bottom: var(--space-5);
}
.main .alert-heading {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.02em;
margin: 0 0 var(--space-3);
font-size: 19px;
}
.main .alert p { margin: 0 0 var(--space-2); }
.main .alert p:last-child { margin-bottom: 0; }
.main .alert ul,
.main .alert ol { margin: var(--space-2) 0 0; padding-left: 1.4em; }
.main .alert ul li,
.main .alert ol li { font-size: 15px; margin-bottom: 6px; }
.main .alert-success {
border-left-color: var(--color-tertiary);
background: linear-gradient(180deg, var(--color-tertiary-soft) 0%, #fff 60%);
}
.main .alert-success .alert-heading { color: var(--color-tertiary); }
.main .alert-success i { color: var(--color-tertiary); }
.main .alert-danger {
border-left-color: var(--color-secondary);
background: linear-gradient(180deg, var(--color-secondary-soft) 0%, #fff 60%);
}
.main .alert-danger .alert-heading,
.main .alert-danger strong { color: var(--color-secondary); }
.main .alert-info {
border-left-color: var(--color-primary);
background: linear-gradient(180deg, var(--color-primary-soft) 0%, #fff 60%);
}
.main .alert-warning {
border-left-color: #E6A100;
background: linear-gradient(180deg, #FFF6DD 0%, #fff 60%);
}
/* ---- Buttons (Bootstrap .btn / Porto variants) ---- */
.main .btn,
.site-footer .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 12px 22px;
font-family: var(--font-body);
font-size: 14.5px;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
text-decoration: none;
transition:
transform 0.4s var(--ease-spring),
box-shadow 0.3s var(--ease-out),
background-color 0.2s var(--ease-out),
color 0.2s var(--ease-out),
border-color 0.2s var(--ease-out);
line-height: 1.2;
will-change: transform;
}
.main .btn-lg { padding: 14px 28px; font-size: 15px; }
.main .btn-sm { padding: 8px 16px; font-size: 13px; }
.main .btn-primary {
background: linear-gradient(180deg, var(--color-primary-2) 0%, var(--color-primary) 100%) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow:
0 1px 0 rgb(255 255 255 / 0.4) inset,
0 1px 2px rgb(0 136 204 / 0.2),
0 10px 24px rgb(0 136 204 / 0.28) !important;
}
.main .btn-primary:hover,
.main .btn-primary:focus {
color: #fff !important;
transform: translateY(-2px);
box-shadow:
0 1px 0 rgb(255 255 255 / 0.5) inset,
0 2px 4px rgb(0 136 204 / 0.24),
0 16px 36px rgb(0 136 204 / 0.36) !important;
}
.main .btn-success {
background: linear-gradient(180deg, #34BFC6 0%, var(--color-tertiary) 100%) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow:
0 1px 0 rgb(255 255 255 / 0.4) inset,
0 1px 2px rgb(43 170 177 / 0.2),
0 10px 24px rgb(43 170 177 / 0.28) !important;
}
.main .btn-success:hover,
.main .btn-success:focus {
color: #fff !important;
transform: translateY(-2px);
box-shadow:
0 1px 0 rgb(255 255 255 / 0.5) inset,
0 2px 4px rgb(43 170 177 / 0.24),
0 16px 36px rgb(43 170 177 / 0.36) !important;
}
.main .btn-dark {
background: linear-gradient(180deg, #4B5460 0%, var(--color-quaternary) 100%) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow:
0 1px 0 rgb(255 255 255 / 0.2) inset,
0 1px 2px rgb(0 0 0 / 0.18),
0 10px 24px rgb(0 0 0 / 0.18) !important;
}
.main .btn-dark:hover {
color: #fff !important;
transform: translateY(-2px);
}
.main .btn-light,
.main .btn-light-2 {
background: #fff !important;
color: var(--color-primary) !important;
border-color: transparent !important;
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 12px 28px rgb(0 0 0 / 0.10) !important;
}
.main .btn-light:hover,
.main .btn-light-2:hover { color: var(--color-primary-3) !important; transform: translateY(-2px); }
.main .btn-outline-primary {
background: transparent !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
box-shadow: none !important;
}
.main .btn-outline-primary:hover {
background: var(--color-primary) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgb(0 136 204 / 0.24) !important;
}
.main .btn-warning {
background: linear-gradient(180deg, #F0B232 0%, #E6A100 100%) !important;
color: #fff !important;
border-color: transparent !important;
}
/* ---- Forms (Bootstrap .form-control / .form-row / .form-group) ---- */
.main .form-control,
.main .form-control-lg {
background: #fff;
border: 1.5px solid var(--color-line);
border-radius: var(--radius-2);
padding: 12px 14px;
font-size: 15px;
color: var(--color-ink);
box-shadow: none;
transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
height: auto;
line-height: 1.4;
}
.main .form-control-lg { padding: 14px 16px; font-size: 16px; }
.main .form-control:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 4px rgb(0 136 204 / 0.14);
outline: 0;
}
.main .form-control::placeholder { color: var(--color-subtle); }
.main textarea.form-control { min-height: 140px; resize: vertical; }
.main .form-group { margin-bottom: var(--space-5); }
.main .form-group label,
.main label.required {
display: inline-block;
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
color: var(--color-quaternary);
margin-bottom: 8px;
letter-spacing: 0.01em;
}
.main label.required::after,
.main .required::after {
content: " *";
color: var(--color-secondary);
}
/* ---- Cards (Bootstrap .card) ---- */
.main .card {
background: #fff;
border: 1px solid var(--color-line) !important;
border-radius: var(--radius-3) !important;
box-shadow: var(--shadow-1);
overflow: hidden;
transition: transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease-out), border-color 0.2s var(--ease-out);
}
.main .card.shadow-sm,
.main .card.shadow { box-shadow: var(--shadow-2) !important; border-color: transparent !important; }
.main .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.main .card-header {
background: linear-gradient(180deg, var(--color-primary-2) 0%, var(--color-primary) 100%) !important;
color: #fff !important;
border-bottom: 0;
padding: var(--space-5) var(--space-6);
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.01em;
}
.main .card-header.bg-secondary {
background: linear-gradient(180deg, #4B5460 0%, var(--color-quaternary) 100%) !important;
}
.main .card-header.bg-warning {
background: linear-gradient(180deg, #F0B232 0%, #E6A100 100%) !important;
}
.main .card-header h3,
.main .card-header h4,
.main .card-header h5 {
color: #fff;
margin: 0;
font-family: var(--font-display);
font-weight: 700;
}
.main .card-body { padding: var(--space-6); }
.main .card-title {
font-family: var(--font-display);
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.02em;
line-height: 1.25;
margin: 0 0 var(--space-3);
}
.main .card-text { color: var(--color-muted); }
/* ---- List groups (Bootstrap) ---- */
.main .list-group { border-radius: var(--radius-2); overflow: hidden; }
.main .list-group-item {
background: #fff;
border: 0;
border-bottom: 1px solid var(--color-line-2);
padding: 14px 16px;
color: var(--color-text);
font-size: 14.5px;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.main .list-group-item:last-child { border-bottom: 0; }
.main .list-group-item.list-group-item-action:hover {
background: var(--color-primary-soft);
color: var(--color-primary);
}
.main .list-group-flush .list-group-item { border-radius: 0; }
/* ---- Porto utility text classes - ensure brand colour mapping ---- */
.main .text-color-primary,
.main .text-primary { color: var(--color-primary) !important; }
.main .text-color-secondary { color: var(--color-secondary) !important; }
.main .text-color-tertiary { color: var(--color-tertiary) !important; }
.main .text-color-dark { color: var(--color-ink) !important; }
.main .text-color-danger,
.main .text-danger { color: var(--color-secondary) !important; }
.main .text-success { color: var(--color-tertiary) !important; }
.main .text-info { color: var(--color-primary) !important; }
.main .text-warning { color: #E6A100 !important; }
/* ---- Tables (Bootstrap) ---- */
.main .table {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-3);
overflow: hidden;
margin-bottom: var(--space-6);
}
.main .table thead th {
background: var(--color-canvas);
color: var(--color-quaternary);
font-weight: 700;
border-bottom: 1px solid var(--color-line);
padding: 14px 16px;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.main .table td { padding: 14px 16px; border-top: 1px solid var(--color-line-2); color: var(--color-text); }
/* ---- Misc Porto leftovers ---- */
.main hr.solid { border-top: 1px solid var(--color-line); }
.main .lead { color: var(--color-muted); }
.main blockquote {
border-left: 4px solid var(--color-primary);
padding-left: var(--space-6);
margin: var(--space-6) 0;
color: var(--color-muted);
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
}
.main .text-muted { color: var(--color-muted) !important; }
/* ---- Sidebar widgets (used on Articles page, etc.) ---- */
.main aside.sidebar h3,
.main aside.sidebar h4 {
font-family: var(--font-display);
color: var(--color-ink);
font-weight: 700;
letter-spacing: -0.02em;
}
/* =========================================================================
Auth pages (Register, Login)
========================================================================= */
.auth-page {
min-height: calc(100vh - 76px);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-10) var(--space-6);
background: var(--color-canvas);
}
.auth-card {
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--radius-3);
box-shadow: var(--shadow-2);
padding: var(--space-8) var(--space-8);
width: 100%;
max-width: 500px;
}
@media (max-width: 480px) {
.auth-card { padding: var(--space-7) var(--space-6); }
}
.auth-card-header {
margin-bottom: var(--space-6);
}
.auth-title {
font-family: var(--font-display);
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.02em;
margin: 0 0 var(--space-2);
border: 0;
padding: 0;
}
.auth-subtitle {
font-size: 15px;
color: var(--color-muted);
margin: 0;
}
.auth-alert {
margin-bottom: var(--space-5);
}
.auth-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--color-quaternary);
margin-bottom: 5px;
letter-spacing: 0.01em;
}
.auth-card .form-group {
margin-bottom: var(--space-5);
}
.auth-card .form-control.auth-input {
height: 44px;
padding: 0 14px;
font-size: 14px;
color: var(--color-text);
background: #fff;
border: 1.5px solid var(--color-line);
border-radius: var(--radius-1);
box-shadow: none;
line-height: 44px;
transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.auth-card .form-control.auth-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgb(0 136 204 / 0.12);
outline: none;
}
.auth-card .form-control.auth-input::placeholder {
color: var(--color-subtle);
}
.has-error .auth-input {
border-color: var(--color-secondary) !important;
}
.auth-field-error {
display: block;
font-size: 12px;
color: var(--color-secondary);
margin-top: 4px;
}
.auth-row-between {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-5);
font-size: 13px;
}
.auth-remember {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--color-muted);
cursor: pointer;
margin: 0;
font-weight: 400;
}
.auth-remember input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: var(--color-primary);
cursor: pointer;
flex-shrink: 0;
}
.auth-submit {
width: 100%;
justify-content: center;
padding: 10px 20px;
font-size: 14px;
margin-top: var(--space-2);
}
.auth-card-footer {
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--color-line-2);
text-align: center;
font-size: 14px;
color: var(--color-muted);
}
.auth-link {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }
/* =========================================================================
Reduced motion
========================================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/*
ATI / Access to Info — content/article page polish
Loaded site-wide via ~/bundles/ati-modern (BundleConfig.vb), after the Porto
theme so its declarations win the cascade. Everything is scoped to the
.ati-doc wrapper so it only affects pages that opt in (e.g. PAIAManualTemplate).
Purpose: bring the Bootstrap/Porto "blue blocks" (accordion headers, sidebar
card headers, the CTA band, FAQ toggles, comparison table) in line with the
home.css design language — gradients, layered tinted shadows, radius tokens
and the Poppins display face — instead of flat, saturated solid-blue fills.
Design tokens (--color-*, --space-*, --radius-*, --shadow-*, --ease-*,
--font-*) are defined on :root in Content/home.css, which loads in the same
bundle.
*/
/* Headings on these pages → Poppins, for parity with the home page */
.ati-doc h1,
.ati-doc .content-body h2,
.ati-doc .content-body h3,
.ati-doc .content-body h4 { font-family: var(--font-display); letter-spacing: -0.01em; }
/* Page header — a soft brand wash instead of plain white */
.ati-doc .page-header-classic {
background: linear-gradient(180deg, var(--color-primary-tint), #fff);
border-bottom: 1px solid var(--color-line);
}
/* ---- Accordion: clean white cards, soft pill badge, readable titles ---- */
.ati-doc #templateSections .card {
border: 1px solid var(--color-line);
border-radius: var(--radius-2);
box-shadow: var(--shadow-1);
overflow: hidden;
margin-bottom: var(--space-3);
background: #fff;
}
.ati-doc #templateSections .card-header { background: #fff !important; border: 0; padding: 0; }
.ati-doc #templateSections .card-header h3 { margin: 0; }
.ati-doc #templateSections .btn-link {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-5) var(--space-6);
background: transparent;
border: 0;
text-decoration: none;
color: var(--color-ink);
font-family: var(--font-display);
font-weight: 600;
font-size: 16.5px;
line-height: 1.35;
text-align: left;
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.ati-doc #templateSections .btn-link:hover { background: var(--color-primary-tint); color: var(--color-primary-3); }
.ati-doc #templateSections .card:has(.btn-link:not(.collapsed)) {
border-color: var(--color-primary-soft);
box-shadow: var(--shadow-2);
}
.ati-doc #templateSections .btn-link:not(.collapsed) { background: linear-gradient(180deg, var(--color-primary-tint), #fff); }
.ati-doc #templateSections .btn-link:not(.collapsed)::after { border-color: var(--color-primary); }
.ati-doc #templateSections .btn-link::after {
content: "";
margin-left: auto;
margin-top: -3px;
width: 9px; height: 9px;
border-right: 2px solid var(--color-subtle);
border-bottom: 2px solid var(--color-subtle);
transform: rotate(45deg);
transition: transform 0.3s var(--ease-spring);
flex-shrink: 0;
}
.ati-doc #templateSections .btn-link:not(.collapsed)::after { transform: rotate(-135deg); margin-top: 3px; }
.ati-doc #templateSections .badge-primary {
background: var(--color-primary-soft) !important;
color: var(--color-primary-3) !important;
font-family: var(--font-body);
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.02em;
border-radius: var(--radius-pill);
padding: 5px 12px;
}
.ati-doc #templateSections .card-body { padding: var(--space-2) var(--space-6) var(--space-6); color: var(--color-muted); }
.ati-doc #templateSections .card-body ul { margin-bottom: 0; }
.ati-doc #templateSections .card-body li { margin-bottom: var(--space-2); }
/* ---- Sidebar cards ---- */
.ati-doc .sidebar .card {
border: 1px solid var(--color-line);
border-radius: var(--radius-3);
box-shadow: var(--shadow-2);
overflow: hidden;
}
.ati-doc .sidebar .card-header { padding: var(--space-5) var(--space-6); border: 0; }
.ati-doc .sidebar .card-header h4 {
font-family: var(--font-display);
font-weight: 700;
font-size: 16.5px;
letter-spacing: -0.01em;
}
.ati-doc .sidebar .card-header.bg-primary {
background: linear-gradient(135deg, var(--color-primary-2), var(--color-primary-3)) !important;
}
.ati-doc .sidebar .card-header.bg-secondary {
background: linear-gradient(135deg, #E8746C, #D8473E) !important;
}
.ati-doc .sidebar .card-header.bg-light {
background: var(--color-canvas) !important;
color: var(--color-ink);
border-bottom: 1px solid var(--color-line);
}
.ati-doc .sidebar .card-body { padding: var(--space-6); }
.ati-doc .sidebar .btn-primary {
background: linear-gradient(135deg, var(--color-primary-2), var(--color-primary-3));
border: 0;
border-radius: var(--radius-pill);
font-family: var(--font-body);
font-weight: 700;
padding: 12px 20px;
box-shadow: 0 6px 18px rgb(0 136 204 / 0.28);
transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out);
}
.ati-doc .sidebar .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgb(0 136 204 / 0.34); }
.ati-doc .sidebar .list-group-item-action {
padding: 10px 0 !important;
color: var(--color-text);
font-weight: 600;
font-size: 14.5px;
transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.ati-doc .sidebar .list-group-item-action:hover { color: var(--color-primary); transform: translateX(3px); background: transparent; }
/* ---- Big CTA band ---- */
.ati-doc .content-body .bg-primary {
position: relative;
overflow: hidden;
border-radius: var(--radius-4) !important;
padding: var(--space-8) !important;
background:
radial-gradient(600px 400px at 12% 0%, rgb(43 170 177 / 0.22), transparent 60%),
radial-gradient(600px 420px at 100% 110%, rgb(0 153 230 / 0.28), transparent 60%),
linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-3) 100%) !important;
box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 18px 44px rgb(0 119 179 / 0.28);
}
.ati-doc .content-body .bg-primary::after {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay; opacity: 0.4; pointer-events: none;
}
.ati-doc .content-body .bg-primary > * { position: relative; }
.ati-doc .content-body .bg-primary h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(22px, 2.4vw, 28px);
letter-spacing: -0.02em;
text-transform: none;
color: #fff;
}
.ati-doc .content-body .bg-primary p { color: rgb(255 255 255 / 0.92); font-size: 16px; line-height: 1.7; }
.ati-doc .content-body .bg-primary .btn { border-radius: var(--radius-pill); font-weight: 700; padding: 12px 22px; }
.ati-doc .content-body .bg-primary .btn-light {
background: #fff; color: var(--color-primary-3); border: 0;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 14px 30px rgb(0 0 0 / 0.18);
transition: transform 0.3s var(--ease-spring), color 0.2s var(--ease-out);
}
.ati-doc .content-body .bg-primary .btn-light:hover { transform: translateY(-2px); color: var(--color-primary); }
.ati-doc .content-body .bg-primary .btn-outline-light {
border: 1.5px solid rgb(255 255 255 / 0.7); color: #fff; background: transparent;
transition: background-color 0.2s var(--ease-out), transform 0.3s var(--ease-spring);
}
.ati-doc .content-body .bg-primary .btn-outline-light:hover { background: rgb(255 255 255 / 0.14); transform: translateY(-2px); }
/* ---- Comparison table ---- */
.ati-doc .content-body .table-responsive {
border: 1px solid var(--color-line);
border-radius: var(--radius-2);
overflow: hidden;
box-shadow: var(--shadow-1);
}
.ati-doc .content-body table { margin: 0; }
.ati-doc .content-body table.table-bordered,
.ati-doc .content-body table.table-bordered td,
.ati-doc .content-body table.table-bordered th { border-color: var(--color-line); }
.ati-doc .content-body .thead-dark th {
background: var(--color-ink) !important;
color: #fff !important;
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
border-color: rgb(255 255 255 / 0.08) !important;
padding: 14px 16px;
}
.ati-doc .content-body .table td { padding: 12px 16px; vertical-align: middle; }
.ati-doc .content-body .table-striped tbody tr:nth-of-type(odd) { background: var(--color-primary-tint); }
/* ---- Alerts: consistent rounding ---- */
.ati-doc .content-body .alert { border-radius: var(--radius-2); }
/* ---- FAQ toggles (Porto .toggle-primary) → match the accordion ---- */
.ati-doc .toggle-primary > .toggle {
border: 1px solid var(--color-line);
border-radius: var(--radius-2);
box-shadow: var(--shadow-1);
margin-bottom: var(--space-3);
overflow: hidden;
background: #fff;
}
.ati-doc .toggle-primary > .toggle.active { border-color: var(--color-primary-soft); box-shadow: var(--shadow-2); }
.ati-doc .toggle-primary .toggle > .toggle-title {
background: #fff;
border: 0;
border-radius: 0;
color: var(--color-ink);
font-family: var(--font-display);
font-weight: 600;
font-size: 16.5px;
line-height: 1.35;
padding: var(--space-5) var(--space-8) var(--space-5) var(--space-6);
transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.ati-doc .toggle-primary .toggle > .toggle-title:hover { background: var(--color-primary-tint); color: var(--color-primary-3); }
.ati-doc .toggle-primary .toggle.active > .toggle-title {
background: linear-gradient(180deg, var(--color-primary-tint), #fff);
color: var(--color-primary-3);
}
.ati-doc .toggle-primary .toggle > .toggle-title:before { border-color: var(--color-subtle); }
.ati-doc .toggle-primary .toggle.active > .toggle-title:before { border-color: var(--color-primary); }
.ati-doc .toggle-primary .toggle > .toggle-content { padding: 0 var(--space-6) var(--space-5); }
.ati-doc .toggle-primary .toggle > .toggle-content > p { color: var(--color-muted); padding: var(--space-2) 0 0; }