/* Exit My Solar Deal — Design v3: blue-to-purple gradient glass on near-black. Brand gradient (decorative): #3E7BFF -> #8B5CF6 -> #B563FF. CTA gradient (buttons/banner/nav-active, white text): #2563EB -> #7C3AED (white on #2563EB = 5.17:1, white on #7C3AED = 7.16:1 — both pass WCAG AA). Senior-first (65+): 18px base, big tap targets, pill shapes, no sharp boxes. */ :root{ --bg:#05050B; --bg-deep:#000000; --panel:rgba(255,255,255,.045); --panel-solid:#0D0C1C; --glass-brd:rgba(139,92,246,.28); --glass-brd-strong:rgba(139,92,246,.5); --input-bg:rgba(255,255,255,.06); --grad-cta:linear-gradient(135deg,#2563EB,#7C3AED); --grad-bright:linear-gradient(90deg,#3E7BFF,#8B5CF6,#B563FF); --grad-text:linear-gradient(90deg,#8FB6FF,#C77DFF); --accent:#B79CFF; --text:#FFFFFF; --text2:#D9D6F2; --muted:#B9B4D6; --card-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08); } *{box-sizing:border-box} /* No sideways sliding ever: clip anything that bleeds past the screen edge at the root (overflow:clip keeps position:sticky working; hidden is the fallback). */ html,body{overflow-x:hidden} @supports (overflow:clip){html,body{overflow-x:clip}} html{background:var(--bg-deep);scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.6;-webkit-text-size-adjust:100%;overflow-wrap:break-word} /* aurora glow layer — pure CSS, fixed, behind everything */ body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background: radial-gradient(560px 380px at 10% -4%,rgba(62,91,255,.30),rgba(62,91,255,0) 62%), radial-gradient(660px 470px at 100% 10%,rgba(139,44,246,.24),rgba(139,44,246,0) 62%), radial-gradient(840px 640px at 50% 112%,rgba(181,99,255,.15),rgba(181,99,255,0) 62%)} a{color:#C9B8FF;text-underline-offset:3px} a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #8B5CF6;outline-offset:2px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;border-color:#8B5CF6;box-shadow:0 0 0 2px #8B5CF6,0 0 16px rgba(139,92,246,.35)} h1{font-size:32px;font-weight:800;letter-spacing:-.01em;line-height:1.25;margin:.4em 0 .5em} h2{font-size:25px;line-height:1.3;margin:.6em 0 .4em} h3{font-size:21px;line-height:1.35;margin:.5em 0 .35em} p{margin:.55em 0} .wrap{max-width:880px;margin:0 auto;padding:20px 16px 150px;position:relative;z-index:1} .narrow{max-width:620px;margin:0 auto;padding:20px 16px 150px;position:relative;z-index:1} .brand{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:14px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .stepbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-brd);border-radius:999px;padding:8px 10px 8px 8px;margin:14px 0;box-shadow:var(--card-shadow)} .stepbar .stepof{font-size:19px;font-weight:700;color:var(--text)} .backlink{display:inline-flex;align-items:center;min-height:56px;padding:10px 18px;border:1px solid var(--glass-brd-strong);border-radius:999px;color:#fff;text-decoration:none;font-weight:700;font-size:17px;background:rgba(255,255,255,.05)} .card{background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-brd);border-radius:22px;padding:20px;margin:16px 0;box-shadow:var(--card-shadow)} .card.crit{background:linear-gradient(135deg,rgba(37,99,235,.16),rgba(124,58,237,.16)),var(--panel);border-color:rgba(139,92,246,.55)} .btn{display:flex;align-items:center;justify-content:center;min-height:60px;width:100%;background:var(--grad-cta);color:#fff;border:0;border-radius:999px;font-size:19px;font-weight:700;padding:16px 22px;text-decoration:none;cursor:pointer;margin:12px 0;line-height:1.35;text-align:center;box-shadow:0 12px 30px rgba(76,29,149,.35)} .btn:active{transform:scale(.98)} .btn2{display:flex;align-items:center;justify-content:center;min-height:56px;width:100%;background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;border:1px solid var(--glass-brd-strong);border-radius:999px;font-size:18px;font-weight:600;padding:13px 20px;text-decoration:none;cursor:pointer;margin:12px 0;line-height:1.35;text-align:center} .btn2:active{transform:scale(.98);background:rgba(139,92,246,.16)} /* The ONE green button in the app (owner order): the testimony recording-consent Allow button. */ .btnAllow{display:flex;align-items:center;justify-content:center;min-height:64px;width:100%;background:linear-gradient(135deg,#16A34A,#15803D);color:#fff;border:0;border-radius:999px;font-size:20px;font-weight:800;padding:16px 22px;text-decoration:none;cursor:pointer;margin:12px 0;line-height:1.35;text-align:center;box-shadow:0 12px 30px rgba(22,163,74,.35)} .btnAllow:active{transform:scale(.98)} .btn:disabled,.btn2:disabled{opacity:.55;cursor:not-allowed} button{font-family:inherit} label{font-weight:600;display:block;margin-top:14px;font-size:18px;line-height:1.45} input,select,textarea{width:100%;background:var(--input-bg);border:1px solid var(--glass-brd-strong);border-radius:16px;color:var(--text);font-size:18px;line-height:1.45;padding:14px;min-height:56px;margin:8px 0 16px} select option{background:#141230;color:#fff} textarea{min-height:110px} input[type="checkbox"],input[type="radio"]{width:26px;height:26px;min-height:26px;accent-color:#7C3AED;vertical-align:-5px;margin:0 8px 0 0} input.inline{width:auto;display:inline-block;min-height:44px;border:0;border-bottom:2px solid #8B5CF6;border-radius:0;background:transparent;color:var(--text);padding:4px 6px;margin:0;font-size:18px;max-width:100%} ::placeholder{color:var(--muted);opacity:1} .mut{color:var(--text2)} .small{font-size:16px;color:var(--muted);line-height:1.55} .eyebrow{font-size:15px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .chip{display:inline-block;background:rgba(255,255,255,.05);border:1px solid var(--glass-brd-strong);color:#E4DEFA;border-radius:999px;padding:6px 14px;font-size:15px;font-weight:600;margin:3px 2px;line-height:1.4} .chip.hot{background:var(--grad-cta);border-color:transparent;color:#fff;font-weight:800;letter-spacing:.04em} .stat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .stat .card{text-align:center;padding:16px 10px} .stat b{font-size:28px;display:block;color:var(--text);line-height:1.2} .progress{height:12px;background:rgba(255,255,255,.08);border:1px solid var(--glass-brd);border-radius:99px;overflow:hidden;margin:14px 0} .progress i{display:block;height:100%;background:var(--grad-bright)} .ring{width:200px;height:200px;margin:12px auto;display:block} .ringnum{font-size:44px;font-weight:800;fill:#fff} .ringband{font-size:15px;fill:#B79CFF;letter-spacing:.14em;font-weight:700} .blurbox{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--glass-brd)} .blurinner{filter:blur(8px);padding:20px;background:rgba(255,255,255,.03)} .blurover{position:absolute;inset:auto 0 0 0;background:rgba(10,8,20,.93);padding:16px;text-align:center;border-top:2px solid #8B5CF6;font-size:17px} .testbanner{background:linear-gradient(90deg,#2563EB,#7C3AED);color:#fff;text-align:center;font-weight:800;font-size:18px;padding:14px 12px;letter-spacing:.05em;position:sticky;top:0;z-index:50} .banner{background:rgba(255,255,255,.05);border:1px solid var(--glass-brd-strong);border-left:6px solid #8B5CF6;color:var(--text);padding:16px 18px;border-radius:18px;margin:14px 0;font-weight:600;font-size:18px;line-height:1.55} .flash{background:rgba(255,255,255,.05);border:1px solid var(--glass-brd-strong);border-radius:18px;padding:16px;margin:14px 0;font-size:18px} .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:18px} table{width:100%;border-collapse:collapse;font-size:17px} td,th{border-bottom:1px solid rgba(139,92,246,.18);padding:12px 10px;text-align:left;vertical-align:top;line-height:1.5} th{color:var(--text);font-size:17px} /* floating pill bottom bar: ONE ☰ Menu button (owner order, 2026-10-14). The old one-row tab bar overflowed at seven destinations and wrapped labels mid-word; the destinations now live in the dropdown sheet. */ .bottombar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));background:rgba(13,12,28,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(139,92,246,.38);border-radius:999px;padding:6px;display:flex;gap:4px;z-index:40;box-shadow:0 18px 40px rgba(0,0,0,.5)} .menubtn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:10px 16px;border:0;border-radius:999px;background:rgba(139,92,246,.16);color:#fff;font:inherit;font-size:19px;font-weight:700;cursor:pointer} .menubtn:active{background:rgba(139,92,246,.32)} .menuburger{font-size:22px;line-height:1} .menupanel{position:absolute;left:0;right:0;bottom:calc(100% + 10px);background:rgba(13,12,28,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(139,92,246,.38);border-radius:26px;padding:8px;display:flex;flex-direction:column;gap:4px;box-shadow:0 18px 40px rgba(0,0,0,.5);max-height:72vh;overflow-y:auto} .menupanel[hidden]{display:none} .menupanel a{display:flex;align-items:center;min-height:52px;padding:12px 18px;color:var(--text2);text-decoration:none;font-size:18px;font-weight:600;border-radius:18px;line-height:1.3;white-space:nowrap} .menupanel a.active{background:var(--grad-cta);color:#fff;font-weight:700} .menupanel a:active{background:rgba(139,92,246,.18);color:#fff} details{background:var(--panel);border:1px solid var(--glass-brd);border-radius:18px;padding:16px;margin:12px 0} summary{cursor:pointer;font-weight:700;font-size:19px;min-height:48px;line-height:1.5} .sigpad{width:100%;height:150px;background:#fff;border-radius:16px;touch-action:none;border:2px solid var(--glass-brd-strong)} .sigfile{background:#fff;border-radius:16px;padding:14px 16px;max-width:440px;border:2px solid var(--glass-brd-strong)} .sigfile img{width:300px;max-width:100%;display:block} .kicker{font-size:21px;line-height:1.55} .topbtn{margin-top:22px} .handzone{border:2px dashed var(--glass-brd-strong)} .handmode{font-size:125%} .handmode p,.handmode label,.handmode li{font-size:1.12em;line-height:1.6} .handmode .btn,.handmode .btn2{min-height:68px;font-size:1.08em} .handmode input,.handmode select,.handmode textarea{font-size:1.05em;min-height:64px} img,svg,video,canvas,iframe{max-width:100%} /* ---------- landing page (salesman front page) ---------- */ .hero{position:relative;padding:30px 2px 8px;overflow:hidden} .hero-wave{position:absolute;top:-24px;right:0;width:340px;height:240px;opacity:.55;pointer-events:none} .hero h1{font-size:37px;line-height:1.18;margin:.25em 0 .35em;max-width:560px} .hero .sub{font-size:21px;line-height:1.5;color:var(--text2);max-width:540px} .hero-cta{display:flex;flex-direction:column;gap:2px;margin-top:8px} .feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0} .feat-grid .card{margin:0} .feat-grid h3{margin-top:.1em} .feat-grid h2{font-size:21px;line-height:1.35;margin:.5em 0 .35em;margin-top:.1em} .steps5{margin:18px 0} .step5{display:flex;gap:14px;align-items:flex-start;padding:12px 2px} .step-dot{flex:0 0 52px;width:52px;height:52px;border-radius:50%;background:var(--grad-cta);color:#fff;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(76,29,149,.4)} .step5 h3{margin:.35em 0 .15em} .step5 p{margin:0;color:var(--text2)} @media(max-width:640px){ h1{font-size:28px} .hero h1{font-size:31px} .feat-grid{grid-template-columns:1fr} .stat{grid-template-columns:1fr} .stat .card{margin:6px 0} table,thead,tbody,tr,td,th{display:block;width:100%} tr{border-bottom:2px solid var(--glass-brd);padding:8px 0} td,th{border-bottom:0;padding:6px 8px} .ring{width:170px;height:170px} .stepbar .stepof{font-size:18px} .hero-wave{width:250px;height:180px;right:0} } /* Brand lockup (logo) — the logo is a link home, per area (2026-10-13) */ .brandrow{display:flex;align-items:center;gap:12px;margin:4px 0 14px} .brandlink{text-decoration:none;cursor:pointer} a.brandlink:hover{opacity:.93} .brandrow .brand{min-width:0} /* Shared Back button — one look, top-left under the header, 65+ sized */ .backrow{margin:0 0 12px} .backbtn{display:inline-flex;align-items:center;min-height:56px;padding:12px 24px;border:1px solid var(--glass-brd-strong);border-radius:999px;color:#fff;text-decoration:none;font-weight:800;font-size:19px;background:rgba(255,255,255,.06)} .brandlogo{height:44px;width:44px;border-radius:10px;display:block} .herologo{height:132px;width:132px;border-radius:24px;display:block;margin:12px auto 18px} .centerlogo{height:96px;width:96px;border-radius:20px;display:block;margin:10px auto 18px} /* ---------- fit-to-screen guards (2026-10-13) ---------- Flex/grid children must be allowed to shrink below their content size, or one long word (an email, a file name, an ID) pushes the whole page wide. */ .stepbar .stepof,.step5>div,.feat-grid .card,.stat .card,.menubtn,.menupanel a{min-width:0} a{overflow-wrap:anywhere} pre{max-width:100%;overflow-x:auto} /* ===================================================================== RESPONSIVE SYSTEM (2026-10-16) — owner order: "fully responsive, everything else kept the same", phone fit FIRST (when a desktop treatment and a phone treatment conflict, the phone wins), and EXTREMELY user friendly for a 65+ audience: generous spacing, readable type, one obvious primary action per area, sticky save bars on long forms, tall easy-to-hit dropdown rows. Breakpoints (mobile-first — the base rules above ARE the phone): base phone, designed at 360-430px wide 641px tablet / large phone landscape 861px the ☰ clusters (.dd) open up into full displays 1024px desktop grids + wider page container 1440px very wide monitors PRINT INSULATION: every widening/layout rule in this section lives under @media screen. The agreement packets link this sheet and print from it, so at print time only the base rules apply (the 880px document measure is unchanged on paper). The workbook reading copy uses workbook.css, the PDF generators read no screen CSS, and email HTML is fully inline — none of them can see these rules. ===================================================================== */ img{height:auto} /* classed logos size themselves; photos never distort */ /* --- form field grids: fields stack full-width on a phone, pair up on tablet, and spread three-across only where .fgrid3 is used. Labels always sit ABOVE their field (the base label rule), and inputs keep the base 18px type (never below 16px, so iOS does not auto-zoom a focused field) and 56px height. --- */ .fgrid{display:grid;grid-template-columns:1fr;gap:0 20px} .fgrid>label{margin-top:10px;min-width:0} .fgrid>.fwide{grid-column:1/-1} /* --- sticky save bar: on a long form the Save button rides along near the bottom of the screen (clear of the fixed ☰ Menu bar) instead of living only at the very end of the page. --- */ .savebar{position:sticky;bottom:calc(90px + env(safe-area-inset-bottom));z-index:35;background:rgba(13,12,28,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-brd-strong);border-radius:22px;padding:10px 12px;box-shadow:var(--card-shadow);margin:14px 0} .savebar .btn,.savebar .btn2{margin:4px 0} /* --- ☰ dropdown clusters (.dd): the SAME pattern as the main Menu — one big ☰ button; below 861px the panel stays closed until tapped (tall rows, in-flow so it can never overflow the screen sideways); at 861px and up the button retires and the panel is simply open: link clusters become tile grids, form clusters stack exactly as they always did. Same destinations, same actions — only the container changes. --- */ .dd{position:relative} .ddbtn{width:100%} .ddpanel{border:1px solid var(--glass-brd);border-radius:22px;background:rgba(255,255,255,.03);padding:10px 12px;margin:10px 0 6px} .ddpanel[hidden]{display:none} .ddpanel .btn2{margin:6px 0} /* phone-only tightening (the base design width is a phone; these keep 360px screens roomy: slightly smaller display type, snugger cards) */ @media screen and (max-width:640px){ h2{font-size:23px} .card{padding:18px 16px} .stat b{font-size:25px} .ddpanel a,.ddpanel .btn2{min-height:56px} } /* tablet step */ @media screen and (min-width:641px){ .wrap,.narrow{padding-left:24px;padding-right:24px} .fgrid{grid-template-columns:1fr 1fr} } /* ☰ clusters open up */ @media screen and (min-width:861px){ .ddbtn{display:none} .ddpanel[hidden]{display:block} .ddpanel{border:0;background:transparent;padding:0;margin:0} .ddlinks[hidden]{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 14px} } /* desktop step: wider container (SCREEN ONLY — print keeps 880px), card/panel grids, hero uses the room without stretching prose (hero text keeps its own readable max-widths). */ @media screen and (min-width:1024px){ .wrap{max-width:1180px;padding:28px 32px 160px} .feat-grid{grid-template-columns:repeat(4,1fr)} .hero h1{font-size:44px;max-width:640px} .hero .sub{font-size:22px;max-width:600px} .panelgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin:16px 0} .panelgrid>.card{margin:0} .cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin:16px 0} .cardgrid>.card{margin:0} .peoplegrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .peoplegrid>.card{margin:8px 0} .fgrid3{grid-template-columns:1fr 1fr 1fr} } @media screen and (min-width:1440px){ .wrap{max-width:1280px} } /* ===================================================================== UX POLISH (2026-10-17) — app-wide presentation refinement layered on top of Design v3 + the 2026-10-16 responsive system. ADDITIVE ONLY: no rule above is changed, no class or id renamed, no pinned layout behavior altered. Every layout-affecting rule below is @media screen, so the agreement packets that link this sheet print exactly as before. Field-driven goals: native controls that match the dark theme, tap responses with no double-tap-zoom delay for one-handed phone use outdoors, steadier card rhythm, calmer motion for reduced-motion users, and a stronger-contrast boost when the user asks their device for one (bright-sunlight help). ===================================================================== */ @media screen{ :root{color-scheme:dark} .chip{min-height:40px;display:inline-flex;align-items:center} .card>:first-child{margin-top:0} .card>:last-child{margin-bottom:0} h1,h2,h3{text-wrap:balance} .flash{border-left:6px solid #8B5CF6} input,select,textarea{scroll-margin-bottom:130px} .menupanel{scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.55) transparent} .menupanel::-webkit-scrollbar{width:6px} .menupanel::-webkit-scrollbar-thumb{background:rgba(139,92,246,.55);border-radius:99px} } ::selection{background:#7C3AED;color:#fff} .btn,.btn2,.btnAllow,.backbtn,.backlink,.menubtn,.ddbtn,.menupanel a,.ddpanel a{touch-action:manipulation;-webkit-tap-highlight-color:transparent} .btn,.btn2,.btnAllow,.backbtn,.menubtn{user-select:none;-webkit-user-select:none} @media screen and (min-width:861px){ tbody tr{transition:background .12s ease} tbody tr:hover{background:rgba(139,92,246,.07)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn:active,.btn2:active,.btnAllow:active,.backlink:active{transform:none} tbody tr{transition:none} } @media (prefers-contrast:more){ :root{--panel:rgba(255,255,255,.09);--muted:#CFC9EA;--text2:#E9E6FB;--glass-brd:rgba(139,92,246,.48);--glass-brd-strong:rgba(139,92,246,.68)} body::before{opacity:.45} } /* ===================================================================== PUBLIC CONTENT POLISH (2026-10-22) — presentation-only pass over the public content pages (landing, /faq, guides, locations, legal): roomier reading measure, calmer article rhythm, gradient-ruled section headings, a Short-answer callout, check-marked document lists, tappable link rows, a sticky slim brand header, and a clearer footer. ADDITIVE ONLY — no rule above is changed, no class renamed, and this file carries no text, so no copy anywhere is affected. Layout-affecting rules sit under @media screen so print keeps the base measure, exactly like the sections above. ===================================================================== */ @media screen{ .narrow{max-width:700px} .brandrow{position:sticky;top:10px;z-index:30;background:rgba(10,9,22,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--glass-brd);border-radius:999px;padding:8px 18px 8px 10px;box-shadow:var(--card-shadow)} article p{line-height:1.72} article>h2{margin-top:1.6em;padding-bottom:.28em;background:linear-gradient(90deg,#3E7BFF,#8B5CF6,#B563FF) left bottom/100% 2px no-repeat} article>h2.faq-q{background:none} article li{line-height:1.65} footer{margin-top:36px;border-top:1px solid var(--glass-brd);padding-top:18px} footer a{display:inline-flex;align-items:center;min-height:44px;padding:4px 2px} } .shortanswer{border-left:5px solid #8B5CF6;background:rgba(139,92,246,.08);border-radius:0 14px 14px 0;padding:14px 16px;font-size:19px;line-height:1.65} ul.checklist{list-style:none;padding-left:0} ul.checklist li{position:relative;padding-left:36px;margin:.55em 0} ul.checklist li::before{content:"✓";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--grad-cta);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1} .card.attorney{border-color:var(--glass-brd-strong);background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(124,58,237,.10)),var(--panel)} ul.linklist{list-style:none;padding-left:0;margin:.4em 0} ul.linklist li{border-top:1px solid rgba(139,92,246,.18)} ul.linklist li:first-child{border-top:0} ul.linklist a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 2px;text-decoration:none;font-weight:600;color:#E4DEFA} ul.linklist a::after{content:"›";color:#B79CFF;font-size:26px;font-weight:800;line-height:1} ul.linklist a:hover{color:#fff} .crumbs a{display:inline-flex;align-items:center;min-height:44px;padding:4px 2px} .faq-q{margin-top:1.25em} p.faq-a{margin-top:.1em} @media screen and (min-width:1024px){ article p,article li{max-width:72ch} } @media (prefers-reduced-motion:reduce){ .brandrow{position:static} } /* ===================================================================== AUDIT PASS (2026-10-24) — public-site conversion + fit fixes. ADDITIVE ONLY, @media screen where layout-affecting, so print is untouched. 1. .hero-cta: a real above-the-fold call to action (tap-to-call and the sample workbook) — the page had none. 2. .contactbar: a fixed bottom call/email bar on every public, crawlable page for signed-out visitors (65+ sized, safe-area aware). body.has-contactbar adds the bottom padding that keeps the last lines of a page from hiding under it. 3. Footer links on the landing page now live in a real