/* Lifted verbatim from site/plans.html — the quoting tool header, scoped to .sitechrome */ :root{ --navy:#011D46; --red:#E20212; --cream:#FAF7EF; --white:#fff; --pale:#E1EAF4; --sage:var(--green-tint); --green:#0FB37A; --green-deep:#0A7A54; --green-tint:#E8F8F1; --peach:#FCE8D8; /* gold carries two meanings: a star rating, and a benefit that exists but is limited */ --gold:#FBEFD0; --gold-ink:#7A5A12; /* --ink3 was #6B7280, which on the blue page measured 3.98:1 -- below the 4.5:1 minimum, i.e. genuinely failing, not merely faint. #414B5E clears AAA (7:1) on the blue ground and every other surface the page uses. The blue is the darkest ground here, so it is the one that sets this value. */ --ink:#011D46; --ink2:#455166; --ink3:#414B5E; --line:#E5E0D5; --shadow:0 16px 28px -14px rgba(1,29,70,.28); --sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --serif:'Lora',Georgia,'Times New Roman',serif; /* --- theme: the page ground, for the cream-vs-blue comparison --- --ground is the page colour. The blue is #E1EAF4, the exact value the questionnaire switches to on its situation / DOB / coverage screens. Everything else in the palette is unchanged between the two. */ --ground:var(--cream); --deco-r:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'420'%20height%3D'6000'%3E%3Cfilter%20id%3D's'%20filterUnits%3D'userSpaceOnUse'%20x%3D'-60'%20y%3D'-60'%20width%3D'540'%20height%3D'6120'%3E%3CfeGaussianBlur%20stdDeviation%3D'1.5'%2F%3E%3C%2Ffilter%3E%3Cg%20filter%3D'url%28%23s%29'%3E%3Ccircle%20cx%3D'390'%20cy%3D'200'%20r%3D'170'%20fill%3D'%23E1EAF4'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'415'%20cy%3D'800'%20r%3D'95'%20fill%3D'%23887A8F'%20fill-opacity%3D'0.033'%2F%3E%3Ccircle%20cx%3D'405'%20cy%3D'1450'%20r%3D'120'%20fill%3D'%23E1EAF4'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'370'%20cy%3D'1800'%20r%3D'95'%20fill%3D'%23FCE8D8'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'415'%20cy%3D'2500'%20r%3D'145'%20fill%3D'%23E1EAF4'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'420'%20cy%3D'2900'%20r%3D'70'%20fill%3D'%23887A8F'%20fill-opacity%3D'0.033'%2F%3E%3Ccircle%20cx%3D'395'%20cy%3D'3600'%20r%3D'175'%20fill%3D'%23E1EAF4'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'400'%20cy%3D'4050'%20r%3D'110'%20fill%3D'%23FCE8D8'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'410'%20cy%3D'4750'%20r%3D'130'%20fill%3D'%23887A8F'%20fill-opacity%3D'0.033'%2F%3E%3Ccircle%20cx%3D'385'%20cy%3D'5150'%20r%3D'160'%20fill%3D'%23E1EAF4'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'410'%20cy%3D'5850'%20r%3D'85'%20fill%3D'%23E1EAF4'%20fill-opacity%3D'0.26'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23011D46'%20fill-opacity%3D'0.14'%3E%3Ccircle%20cx%3D'330'%20cy%3D'488'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'346'%20cy%3D'488'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'362'%20cy%3D'488'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'378'%20cy%3D'488'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'394'%20cy%3D'488'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'410'%20cy%3D'488'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'330'%20cy%3D'503'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'346'%20cy%3D'503'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'362'%20cy%3D'503'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'378'%20cy%3D'503'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'394'%20cy%3D'503'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'410'%20cy%3D'503'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'330'%20cy%3D'518'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'346'%20cy%3D'518'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'362'%20cy%3D'518'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'378'%20cy%3D'518'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'394'%20cy%3D'518'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'410'%20cy%3D'518'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'330'%20cy%3D'533'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'346'%20cy%3D'533'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'362'%20cy%3D'533'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'378'%20cy%3D'533'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'394'%20cy%3D'533'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'410'%20cy%3D'533'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'338'%20cy%3D'1158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'354'%20cy%3D'1158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'370'%20cy%3D'1158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'386'%20cy%3D'1158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'402'%20cy%3D'1158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'418'%20cy%3D'1158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'338'%20cy%3D'1173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'354'%20cy%3D'1173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'370'%20cy%3D'1173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'386'%20cy%3D'1173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'402'%20cy%3D'1173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'418'%20cy%3D'1173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'338'%20cy%3D'1188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'354'%20cy%3D'1188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'370'%20cy%3D'1188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'386'%20cy%3D'1188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'402'%20cy%3D'1188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'418'%20cy%3D'1188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'338'%20cy%3D'1203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'354'%20cy%3D'1203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'370'%20cy%3D'1203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'386'%20cy%3D'1203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'402'%20cy%3D'1203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'418'%20cy%3D'1203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'324'%20cy%3D'2158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'340'%20cy%3D'2158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'356'%20cy%3D'2158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'372'%20cy%3D'2158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'388'%20cy%3D'2158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'404'%20cy%3D'2158'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'324'%20cy%3D'2173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'340'%20cy%3D'2173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'356'%20cy%3D'2173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'372'%20cy%3D'2173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'388'%20cy%3D'2173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'404'%20cy%3D'2173'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'324'%20cy%3D'2188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'340'%20cy%3D'2188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'356'%20cy%3D'2188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'372'%20cy%3D'2188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'388'%20cy%3D'2188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'404'%20cy%3D'2188'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'324'%20cy%3D'2203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'340'%20cy%3D'2203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'356'%20cy%3D'2203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'372'%20cy%3D'2203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'388'%20cy%3D'2203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'404'%20cy%3D'2203'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'334'%20cy%3D'3258'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'350'%20cy%3D'3258'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'366'%20cy%3D'3258'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'382'%20cy%3D'3258'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'398'%20cy%3D'3258'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'414'%20cy%3D'3258'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'334'%20cy%3D'3273'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'350'%20cy%3D'3273'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'366'%20cy%3D'3273'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'382'%20cy%3D'3273'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'398'%20cy%3D'3273'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'414'%20cy%3D'3273'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'334'%20cy%3D'3288'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'350'%20cy%3D'3288'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'366'%20cy%3D'3288'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'382'%20cy%3D'3288'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'398'%20cy%3D'3288'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'414'%20cy%3D'3288'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'334'%20cy%3D'3303'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'350'%20cy%3D'3303'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'366'%20cy%3D'3303'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'382'%20cy%3D'3303'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'398'%20cy%3D'3303'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'414'%20cy%3D'3303'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'328'%20cy%3D'4408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'344'%20cy%3D'4408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'360'%20cy%3D'4408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'376'%20cy%3D'4408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'392'%20cy%3D'4408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'408'%20cy%3D'4408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'328'%20cy%3D'4423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'344'%20cy%3D'4423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'360'%20cy%3D'4423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'376'%20cy%3D'4423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'392'%20cy%3D'4423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'408'%20cy%3D'4423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'328'%20cy%3D'4438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'344'%20cy%3D'4438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'360'%20cy%3D'4438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'376'%20cy%3D'4438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'392'%20cy%3D'4438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'408'%20cy%3D'4438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'328'%20cy%3D'4453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'344'%20cy%3D'4453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'360'%20cy%3D'4453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'376'%20cy%3D'4453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'392'%20cy%3D'4453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'408'%20cy%3D'4453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'336'%20cy%3D'5558'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'352'%20cy%3D'5558'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'368'%20cy%3D'5558'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'384'%20cy%3D'5558'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'400'%20cy%3D'5558'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'416'%20cy%3D'5558'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'336'%20cy%3D'5573'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'352'%20cy%3D'5573'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'368'%20cy%3D'5573'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'384'%20cy%3D'5573'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'400'%20cy%3D'5573'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'416'%20cy%3D'5573'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'336'%20cy%3D'5588'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'352'%20cy%3D'5588'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'368'%20cy%3D'5588'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'384'%20cy%3D'5588'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'400'%20cy%3D'5588'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'416'%20cy%3D'5588'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'336'%20cy%3D'5603'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'352'%20cy%3D'5603'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'368'%20cy%3D'5603'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'384'%20cy%3D'5603'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'400'%20cy%3D'5603'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'416'%20cy%3D'5603'%20r%3D'2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --deco-l:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'420'%20height%3D'6000'%3E%3Cfilter%20id%3D's'%20filterUnits%3D'userSpaceOnUse'%20x%3D'-60'%20y%3D'-60'%20width%3D'540'%20height%3D'6120'%3E%3CfeGaussianBlur%20stdDeviation%3D'1.5'%2F%3E%3C%2Ffilter%3E%3Cg%20filter%3D'url%28%23s%29'%3E%3Ccircle%20cx%3D'10'%20cy%3D'380'%20r%3D'105'%20fill%3D'%23FCE8D8'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'1000'%20r%3D'80'%20fill%3D'%23887A8F'%20fill-opacity%3D'0.033'%2F%3E%3Ccircle%20cx%3D'30'%20cy%3D'1350'%20r%3D'90'%20fill%3D'%23E1EAF4'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'2100'%20r%3D'140'%20fill%3D'%23FCE8D8'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'25'%20cy%3D'2550'%20r%3D'165'%20fill%3D'%23FCE8D8'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'3300'%20r%3D'110'%20fill%3D'%23887A8F'%20fill-opacity%3D'0.033'%2F%3E%3Ccircle%20cx%3D'5'%20cy%3D'3700'%20r%3D'105'%20fill%3D'%23FCE8D8'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'15'%20cy%3D'4550'%20r%3D'140'%20fill%3D'%23FCE8D8'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'35'%20cy%3D'5000'%20r%3D'75'%20fill%3D'%23E1EAF4'%20fill-opacity%3D'0.26'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'5750'%20r%3D'150'%20fill%3D'%23FCE8D8'%20fill-opacity%3D'0.26'%2F%3E%3C%2Fg%3E%3Cg%20fill%3D'%23011D46'%20fill-opacity%3D'0.14'%3E%3Ccircle%20cx%3D'18'%20cy%3D'708'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'708'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'708'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'708'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'708'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'98'%20cy%3D'708'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'723'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'723'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'723'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'723'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'723'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'98'%20cy%3D'723'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'738'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'738'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'738'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'738'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'738'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'98'%20cy%3D'738'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'753'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'753'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'753'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'753'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'753'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'98'%20cy%3D'753'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'1758'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'40'%20cy%3D'1758'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'56'%20cy%3D'1758'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'1758'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'88'%20cy%3D'1758'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'104'%20cy%3D'1758'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'1773'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'40'%20cy%3D'1773'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'56'%20cy%3D'1773'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'1773'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'88'%20cy%3D'1773'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'104'%20cy%3D'1773'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'1788'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'40'%20cy%3D'1788'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'56'%20cy%3D'1788'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'1788'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'88'%20cy%3D'1788'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'104'%20cy%3D'1788'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'1803'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'40'%20cy%3D'1803'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'56'%20cy%3D'1803'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'1803'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'88'%20cy%3D'1803'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'104'%20cy%3D'1803'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'2958'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'2958'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'48'%20cy%3D'2958'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'2958'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'2958'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'96'%20cy%3D'2958'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'2973'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'2973'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'48'%20cy%3D'2973'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'2973'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'2973'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'96'%20cy%3D'2973'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'2988'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'2988'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'48'%20cy%3D'2988'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'2988'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'2988'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'96'%20cy%3D'2988'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'16'%20cy%3D'3003'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'32'%20cy%3D'3003'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'48'%20cy%3D'3003'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'3003'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'3003'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'96'%20cy%3D'3003'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'22'%20cy%3D'4108'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'4108'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'54'%20cy%3D'4108'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'70'%20cy%3D'4108'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'86'%20cy%3D'4108'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'102'%20cy%3D'4108'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'22'%20cy%3D'4123'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'4123'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'54'%20cy%3D'4123'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'70'%20cy%3D'4123'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'86'%20cy%3D'4123'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'102'%20cy%3D'4123'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'22'%20cy%3D'4138'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'4138'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'54'%20cy%3D'4138'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'70'%20cy%3D'4138'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'86'%20cy%3D'4138'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'102'%20cy%3D'4138'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'22'%20cy%3D'4153'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'4153'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'54'%20cy%3D'4153'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'70'%20cy%3D'4153'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'86'%20cy%3D'4153'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'102'%20cy%3D'4153'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'5408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'5408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'5408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'5408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'5408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'98'%20cy%3D'5408'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'5423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'5423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'5423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'5423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'5423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'98'%20cy%3D'5423'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'5438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'5438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'5438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'5438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'5438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'98'%20cy%3D'5438'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'18'%20cy%3D'5453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'34'%20cy%3D'5453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'50'%20cy%3D'5453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'5453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'82'%20cy%3D'5453'%20r%3D'2'%2F%3E%3Ccircle%20cx%3D'98'%20cy%3D'5453'%20r%3D'2'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } /* The rubber-band strip above the page takes its colour from the canvas, .sitechrome which was inheriting the ground from body -- so pulling down on a phone showed a cream (or blue) bar sitting on top of the white header. Giving the root its own white background stops that inheritance, .sitechrome and the strip now reads as an extension of header.site, .sitechrome which is white in both themes. The page ground is untouched: body keeps --ground. Matches the same fix in the funnel. */ html{-webkit-text-size-adjust:100%;background:#fff} /* the page colour sits on the content, .sitechrome not on the document — a phone tints its own bars from the document colour, .sitechrome which put a pale blue strip above the white header (2026-09-15) */ body{background-color:#fff !important} /* colour only: the page keeps its ground as a background-image (2026-10-16) */ .sitechrome /* ---------- site header ---------- Values lifted from the live funnel by measuring the rendered page, .sitechrome not by reading its CSS -- that file carries several override blocks stacked on top of each other, .sitechrome so the source values are not the ones that win. */ /* sticky: the masthead rides along on scroll (Hunter 2026-09-02). z-index 50 sits below the sheets (60) so dialogs still cover it; the help popover keeps its own layer inside. The soft shadow separates it from content sliding under. */ header.site{background:var(--white);border-bottom:1px solid #E6E3DC; position:sticky;top:0;z-index:50;box-shadow:0 6px 18px -12px rgba(1,29,70,.25); padding-top:env(safe-area-inset-top)} .sitechrome .hwrap{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:12px 28px} .sitechrome /* flex:1 1 0 on BOTH sides, .sitechrome not 1 1 auto -- equal shares left and right are what hold the 430px search bar in the centre. With `auto` the brand sizes to its own content, .sitechrome grows into the slack, .sitechrome and shunts the search bar over against the phone. */ .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:1 1 0;min-width:0} .sitechrome .brand img{height:52px;width:auto;display:block} .sitechrome .brandtext{display:flex;flex-direction:column;min-width:0} .sitechrome .word{font-size:21px;font-weight:800;letter-spacing:.01em;color:#091358;line-height:1.12} .sitechrome .word b{color:var(--red);font-weight:800} .sitechrome .tag{font-size:9.5px;font-weight:700;letter-spacing:.14em;color:#6C5478;white-space:nowrap;margin-top:2px} .sitechrome /* margin:0 kills the UA default form margin-bottom, .sitechrome which the flex centring counted -- it floated the search bar 9px above the logo/button centre line */ .searchwrap{position:relative;flex:0 1 430px;max-width:430px;margin:0} .sitechrome .searchwrap input{width:100%;height:44px;border:1.5px solid #E2DED4;background:var(--white); border-radius:999px;padding:0 18px 0 44px;font-family:var(--sans);font-size:14.5px;color:var(--ink); transition:border-color .25s,box-shadow .25s} .sitechrome .searchwrap input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(1,29,70,.13)} .sitechrome .s-ic{position:absolute;left:16px;top:50%;transform:translateY(-9px);width:18px;height:18px; color:var(--navy);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round; stroke-linejoin:round;pointer-events:none} .sitechrome .head-phone{display:flex;align-items:center;justify-content:flex-end;gap:14px; flex-wrap:nowrap;font-size:13px;color:#5B6472;flex:1 1 0;min-width:0} .sitechrome .head-phone .lbl{display:block;font-size:12px} .sitechrome .head-phone a{display:inline-flex;align-items:center;justify-content:center;background:var(--navy); color:#fff;padding:9px 18px;border-radius:999px;font-size:15px;font-weight:800;text-decoration:none; white-space:nowrap;margin-top:2px;min-height:44px;transition:background .3s} .sitechrome .head-phone a:hover{background:#011430} .sitechrome .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .sitechrome /* ---------- main navigation ---------- The band under the header: Learn · Health · Medicare · Life · Home · Auto · FAQ, .sitechrome each with a dropdown. Values measured off the rendered funnel, .sitechrome like the header. The bar itself is TRANSPARENT on the live site, .sitechrome so it takes the page ground -- which is why it picks up the blue here without any extra work. */ .navbar{position:relative;z-index:40} .sitechrome .navbar .wrap{max-width:none;padding:0 28px;display:flex;justify-content:center;z-index:auto} .sitechrome .mainnav{display:flex;gap:30px;align-items:center} .sitechrome .mn-item{position:relative} .sitechrome .mn-link{font-family:var(--sans);font-weight:700;font-size:15.5px;color:var(--navy); background:none;border:none;border-bottom:2px solid transparent;cursor:pointer; padding:12px 2px;display:inline-flex;align-items:center;gap:6px;transition:border-color .2s} .sitechrome .mn-item:hover .mn-link, .sitechrome .mn-item.open .mn-link{border-bottom-color:var(--red)} .sitechrome .mn-link:focus-visible{outline:3px solid var(--red);outline-offset:3px} .sitechrome .mn-drop{position:absolute;top:calc(100% + 4px);left:50%; transform:translateX(-50%) translateY(6px);background:#fff; border:1px solid rgba(1,29,70,.08);border-radius:18px; box-shadow:0 28px 60px -20px rgba(1,29,70,.28);min-width:320px;padding:10px; opacity:0;visibility:hidden;z-index:41; transition:opacity .2s ease,transform .2s ease,visibility .2s} .sitechrome .mn-item.open .mn-drop, .sitechrome .mn-item:hover .mn-drop{opacity:1;visibility:visible; transform:translateX(-50%) translateY(0)} .sitechrome .mn-drop a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none; transition:background .2s} .sitechrome .mn-drop a:hover{background:var(--ground)} .sitechrome .mn-drop a:focus-visible{outline:3px solid var(--red);outline-offset:-2px} .sitechrome .mn-drop b{display:block;font-size:15px;color:var(--navy);font-weight:700} .sitechrome .mn-drop span{display:block;font-size:13px;color:#5B6472;line-height:1.45;margin-top:2px} .sitechrome .sortbtn:focus-visible, .sitechrome .detailbtn:focus-visible, .sitechrome .closex:focus-visible, .sitechrome .callbtn:focus-visible{outline:3px solid var(--red);outline-offset:2px} .sitechrome .callbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none; font-size:15.5px;font-weight:700;color:#fff;background:var(--navy);border-radius:10px;min-height:46px} .sitechrome .callbtn:hover{background:#011430} @media (max-width:1000px){ .sitechrome /* three columns need room; below this the header stacks as it did before */ .phrow{flex-wrap:wrap} } .sitechrome /* the pill sits ON the carrier line, .sitechrome not above it -- one word does not earn a whole line in a header that is already a third of the card */ .bylinerow{display:flex;flex-wrap:wrap;align-items:center;gap:9px} .sitechrome /* ── header treatment: TINT (default) — the band takes the plan type's colour ── */ body.hdr-tint .phead{background:var(--pale)} .sitechrome /* ── header treatment: NAVY ── */ body.hdr-navy .phead{background:var(--navy);border-bottom:0} .sitechrome /* 8px top read as the list being stuck to the header, .sitechrome so on opening the two blurred into one thing. The gap is what tells you where the plan's identity ends and its benefits begin. */ .pbody{overflow-y:auto;padding:26px 24px;-webkit-overflow-scrolling:touch} @media (max-width:400px){ .sitechrome .tag{display:none} } .sitechrome .sheetcall .callbtn{flex:0 0 auto;padding:0 22px} .sitechrome /* the label column of the header IS the navy -- nothing else is */ #csheet .cnames{margin:0;padding:0} .sitechrome /* an all-matching group is dimmed at the header, .sitechrome not removed */ .diffs-only .csec.allsame > summary{opacity:.62} .sitechrome /* ---------- sheet search + star help ---------- */ /* phone: the header keeps ONLY the rating; the doctor link rides the Doctor visits section instead of the header tools. No preview numbers in the sheet at any width -- the card already did that job. */ .starrow{position:relative;display:inline-block;font-size:17px;line-height:1;letter-spacing:2px;vertical-align:-1px} .sitechrome /* ---------- "Get free help" header bubble ---------- */ .head-phone{position:relative} .sitechrome /* height matches the brand block, .sitechrome so with the bar centring children the button's bottom sits level with the tagline's -- the optical alignment Hunter asked for */ .helpcta{font:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--navy); border:0;border-radius:999px;min-height:34px;padding:0 17px;cursor:pointer;white-space:nowrap} .sitechrome .helpcta:hover{background:#011430} .sitechrome /* drawn at 32px, .sitechrome tappable at ~46px: an invisible halo catches near-miss taps -- the optical alignment stays, .sitechrome the button stops punishing shaky fingers */ .helpcta{position:relative} .sitechrome .helpcta::after{content:"";position:absolute;inset:-7px -6px} .sitechrome .helpcta:focus-visible{outline:3px solid var(--red);outline-offset:2px} .sitechrome .loginbtn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:15px; font-weight:800;color:var(--navy);background:none;border:0;cursor:pointer; min-height:38px;padding:0 2px;flex:0 0 auto} .sitechrome .loginbtn:hover{color:#011430} .sitechrome .loginbtn:focus-visible{outline:3px solid var(--red);outline-offset:2px} .sitechrome .loginic{width:26px;height:26px} @media (max-width:640px){ .sitechrome .loginbtn{font-size:13px;gap:5px;min-height:36px} .sitechrome .logintxt{display:none} .sitechrome /* icon-only below 640 -- the text collided with the brand */ .head-phone{gap:8px} .sitechrome .loginic{width:22px;height:22px} } .sitechrome .helppop[hidden]{display:none} .sitechrome .helppop{position:absolute;right:0;top:calc(100% + 10px);z-index:90;width:250px; background:var(--white);border:1.5px solid var(--line);border-radius:14px; padding:14px 16px;box-shadow:0 16px 34px -14px rgba(1,29,70,.45);text-align:left} .sitechrome .helppop p{margin:0 0 10px;font-size:14.5px;line-height:1.45;color:var(--ink2);font-weight:600} .sitechrome .helppop .callbtn{display:inline-flex;padding:0 18px;flex:0 0 auto} @media (max-width:900px){ .sitechrome /* level with the 32px logo mark */ .helpcta{font-size:13px;padding:0 13px;min-height:33px} } .sitechrome /* ===================================================================== Plan details as a PAGE — the default view. Full screen like compare, .sitechrome one centred 1180px frame for header and body so their edges agree, .sitechrome and the extra width spent on a sticky decision rail rather than on stretching the benefit rows back apart. ===================================================================== */ .backlink{display:none} .sitechrome /* one primary action: Enroll is filled, .sitechrome Call is outlined -- same size, .sitechrome same shape */ #sheet .prail .enrollbtn, .sitechrome #sheet .prail .callbtn, .sitechrome #sheet .prail .railmail .mailbtn{flex:0 0 auto;width:100%;min-height:52px;font-size:16.5px; border-radius:12px;align-self:stretch;grid-area:auto;display:inline-flex; align-items:center;justify-content:center;padding:0 16px} .sitechrome #sheet .prail .callbtn{margin:10px 0 0;background:var(--white);color:var(--navy); border:1.5px solid var(--navy)} .sitechrome #sheet .prail .callbtn:hover{background:var(--pale)} .sitechrome /* ---------- main nav: icons + coloured menu headers (matches the funnel) ---------- */ .mn-ic{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.75; stroke-linecap:round;stroke-linejoin:round;opacity:.72;transition:opacity .2s} .sitechrome .mn-item:hover .mn-ic, .sitechrome .mn-item.open .mn-ic{opacity:1} .sitechrome .mn-link{gap:7px} @media(min-width:1120px) and (max-width:1320px){ .sitechrome .mainnav{gap:20px} .sitechrome .mn-ic{width:16px;height:16px} } .sitechrome .mn-drop{padding:0;overflow:hidden} .sitechrome .mn-body{padding:8px} .sitechrome .mn-head{display:flex;align-items:center;gap:9px;padding:12px 16px; font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase} .sitechrome .mn-head .mn-ic{width:18px;height:18px;opacity:1} /* Each dropdown used to carry a 3px bar of its category colour across the very top as well as the tinted header strip below it -- the same signal twice, and on the dark categories (navy #011D46, #091358) it read as a hard dark line sitting on the card rather than as part of it. Hunter said so on 2026-10-01 about the homepage and again on 2026-10-06 about the guides, which keep their own copy of this CSS and were missed the first time. The bar is gone; the tinted .mn-head still names the category. */ .sitechrome .mn-learn .mn-head{background:#F4EEDF;color:#8A6215} .sitechrome .mn-medicare .mn-head{background:#E8ECF4;color:#011D46} .sitechrome .mn-health .mn-head{background:#E8ECF4;color:#091358} .sitechrome .mn-life .mn-head{background:#FAF7EF;color:var(--green-deep)} .sitechrome .mn-auto .mn-head{background:#FCE8D8;color:#9A3F1F} .sitechrome .mn-home .mn-head{background:#F0E8F0;color:#6A4B74} .sitechrome /* the mark that slides in wears its own section’s colour -- the same value the coloured menu header below it uses, .sitechrome so the icon does not change colour as the menu opens. Medicare and Health are navy by design, .sitechrome so those two shift barely at all; that is the palette being honest, .sitechrome not a miss. */ .mn-item.mni-learn .mn-link .mn-ic{color:#8A6215} .sitechrome .mn-item.mni-medicare .mn-link .mn-ic{color:#011D46} .sitechrome .mn-item.mni-health .mn-link .mn-ic{color:#091358} .sitechrome .mn-item.mni-life .mn-link .mn-ic{color:var(--green-deep)} .sitechrome .mn-item.mni-auto .mn-link .mn-ic{color:#9A3F1F} .sitechrome .mn-item.mni-home .mn-link .mn-ic{color:#6A4B74} .sitechrome /* consistency with the funnel: no mark at rest, .sitechrome it slides in on hover or open */ .mn-link .mn-ic{width:0;opacity:0;margin-right:-7px; transition:width .22s ease,opacity .22s ease,margin-right .22s ease} .sitechrome .mn-item:hover .mn-link .mn-ic, .sitechrome .mn-item.open .mn-link .mn-ic{width:17px;opacity:1;margin-right:0} @media(prefers-reduced-motion:reduce){ .sitechrome .mn-link .mn-ic{transition:none} } .sitechrome /* the hovered row wears its section, .sitechrome using the same two values as the header directly above it. The grey description line is deliberately left alone. */ .mn-drop.mn-learn a:hover{background:#F4EEDF} .sitechrome .mn-drop.mn-learn a:hover b{color:#8A6215} .sitechrome .mn-drop.mn-medicare a:hover{background:#E8ECF4} .sitechrome .mn-drop.mn-medicare a:hover b{color:#011D46} .sitechrome .mn-drop.mn-health a:hover{background:#E8ECF4} .sitechrome .mn-drop.mn-health a:hover b{color:#091358} .sitechrome .mn-drop.mn-life a:hover{background:#FAF7EF} .sitechrome .mn-drop.mn-life a:hover b{color:var(--green-deep)} .sitechrome .mn-drop.mn-auto a:hover{background:#FCE8D8} .sitechrome .mn-drop.mn-auto a:hover b{color:#9A3F1F} .sitechrome .mn-drop.mn-home a:hover{background:#F0E8F0} .sitechrome .mn-drop.mn-home a:hover b{color:#6A4B74} /* ---- mockup-only additions ---- plans.html is a desktop-first page, so the chrome it ships with overflows on a phone. These mirror what site.css does on the rest of the site (nav bar hides below 1120px) and keep the header inside the screen on small widths. Nothing here changes desktop. */ @media (max-width:1119px){ .sitechrome .navbar{display:none} } @media (max-width:820px){ .sitechrome .searchwrap{display:none} } @media (max-width:640px){ .sitechrome .hwrap{padding:10px 14px;gap:10px} .sitechrome .brand img{width:34px} /* L5: at 375px .brand and .head-phone split the row evenly at 169px each, which left the wordmark 124px for a name that needs 148 -- so every page on this chrome showed "INSURANCEO", not just the two the audit named. Measured, on step-1. Shrinking the type only fits at 15px with a pixel to spare, which is too small to read; the brand takes a bigger share instead and the right side still holds "Get free help" at 130px. */ .sitechrome .brand{flex:1.6 1 0} .sitechrome .word{font-size:18px} .sitechrome .tag{display:none} .sitechrome .helpcta{font-size:14px;padding:8px 13px} .sitechrome .head-phone{gap:8px} } @media (max-width:430px){ .sitechrome .logintxt{display:none} } /* The quoting tool's page body is white, so its transparent nav bar reads white. The guide's page is pale blue, so the nav needs the white itself. */ .sitechrome .navbar{background:#fff} /* ── The way back (2026-09-29) ─────────────────────────────────────────────────── Every step linked forward and none linked back, so re-reading the page before this one meant the browser's back button, and a crawler could only travel one way down the guide. The link sits in the progress row at the top, quiet and to the right. It does NOT go at the bottom: the bottom of a step is one forward action and nothing else, which is the whole point of that design. */ .progress .backlink{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted); text-decoration:none;padding:3px 8px;border-radius:7px;white-space:nowrap} .progress .backlink:hover{color:var(--navy);background:var(--card)} .progress .backlink span{font-weight:800;margin-right:1px} @media (max-width:560px){ /* On a phone the row wraps; the link keeps its own line rather than squeezing the "Step 3 of 6" caption into an ellipsis. */ .progress .backlink{margin-left:0;padding-left:0} } /* L2 (2026-10-06 launch audit): the guide pages had no Privacy or Do Not Sell link at all. .flinks lives in site.css, which these pages do not load, so the look is repeated here rather than pulling in a whole stylesheet for one row. */ .sitechrome-flinks, footer.disc .flinks{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center; margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid var(--line,#E6E3DC)} footer.disc .flinks a{color:var(--navy,#011D46);font-size:13.5px;font-weight:600;text-decoration:none} footer.disc .flinks a:hover{text-decoration:underline} footer.disc .flinks a:focus-visible{outline:2px solid var(--red,#E20212);outline-offset:2px} @media (max-width:560px){footer.disc .flinks{gap:6px 14px}footer.disc .flinks a{font-size:13px}} /* P2 (launch audit): the header's two buttons were 36px and 33px tall on a phone, under the 44px a finger needs. Padding only -- the look does not change. */ .sitechrome .loginbtn{min-height:44px} .sitechrome .head-phone a,.sitechrome .helpcta{min-height:44px;display:inline-flex;align-items:center} /* LOGIN-OFF (Hunter, 2026-10-07): "I think we may disable the log in to the public for right now until we get the whole dashboard and everything tidy up". Log In is hidden on every page; /account still works by direct link. To bring it back, delete this rule here and in the other six places (search the site for LOGIN-OFF). */ .sitechrome .loginbtn{display:none !important}