/* ProviderQMS premium stylesheet. */ /* ===== PART 0: reset ===== */ /* Preflight-equivalent reset. * * The source design imports Tailwind but uses ZERO utility classes — so the whole utility layer is * dead weight and is dropped. What is NOT dead weight is Tailwind's *preflight*: the design silently * depends on it for margin zeroing, heading font-size normalisation, list de-bulleting and border * defaults. Dropping the import without replacing preflight makes the layout collapse in a way that * looks like a CSS bug rather than a missing reset — headings inflate, lists grow bullets and indents, * every block gains browser margin. * * This is the minimum preflight the 372-rule design actually relies on, and no more. */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; } html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; line-height: 1.5; } body { margin: 0; line-height: inherit; } /* Headings inherit size and weight — the design sets every one explicitly. Without this they take browser defaults and the whole display ladder is wrong. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; } p, figure, blockquote, dl, dd, hr, pre { margin: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; cursor: pointer; } :-moz-focusring { outline: auto; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none !important; } ::placeholder { opacity: 1; color: #9ca3af; } hr { height: 0; color: inherit; border-top-width: 1px; } blockquote { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } /* ===== PART 1: cloned design, type floor lifted ===== */ :root{--navy:#0b1c2c;--ink:#13293b;--muted:#607383;--teal:#087f7b;--lime:#b9e44b;--cream:#f7f8f4;--line:#dce4e4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Arial,sans-serif}.shell{width:min(1160px,calc(100% - 40px));margin:auto}.alertbar{height:36px;background:var(--navy);color:#eaf7f2;display:flex;align-items:center;justify-content:center;font-size:15.5px}.alertbar span{color:var(--lime);margin:0 10px}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--navy);font-size:20px;font-weight:800;line-height:.85}.brand>span>span{color:var(--teal)}.brand small{display:block;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;margin-top:7px;color:#72828e}.brandmark{width:34px;height:34px;display:grid;place-items:center;background:var(--teal);color:white!important;border-radius:9px;font:22px Georgia}.navlinks,.navactions{display:flex;align-items:center;gap:28px}.nav a{color:#405461;text-decoration:none;font-size:16px}.button{display:inline-flex;justify-content:center;align-items:center;gap:22px;background:var(--teal);color:#fff!important;text-decoration:none;padding:17px 23px;border-radius:7px;font-size:16.5px;font-weight:700;box-shadow:0 8px 22px #087f7b24;transition:.2s}.button:hover{transform:translateY(-2px)}.button.small{padding:12px 18px}.hero{min-height:650px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:55px 0 75px}.eyebrow,.kicker{font-size:15px;font-weight:800;letter-spacing:.14em;color:var(--teal);text-transform:uppercase}.eyebrow i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:9px}.hero h1{font:500 59px/1.03 Georgia;letter-spacing:-.04em;margin:22px 0;color:var(--navy)}.hero h1 em{font-style:normal;color:var(--teal)}.lede{font-size:19px;line-height:1.65;color:#556b78}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:32px}.tour{color:var(--navy);text-decoration:none;font-size:16.5px;font-weight:bold}.tour span{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid #bdd0cf;border-radius:50%;font-size:13px;color:var(--teal);margin-right:8px}.micro{display:flex;gap:18px;margin-top:20px;color:#6c7e87;font-size:15px}.product{position:relative}.app{height:430px;background:#fff;border:1px solid #cbd9d8;border-radius:15px;box-shadow:0 32px 65px #133c4c1c;display:flex;overflow:hidden}.app aside{width:58px;background:var(--navy);display:flex;flex-direction:column;align-items:center;gap:24px;padding:17px}.app aside b{width:27px;height:27px;border-radius:7px;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:Georgia}.app aside i{width:17px;height:17px;border-radius:4px;border:1px solid #627383}.app aside .on{background:var(--teal);border-color:var(--teal)}.appbody{flex:1;background:#f7faf8;padding:27px}.appbody header{font-size:19px}.appbody header small{display:block;font-size:13.5px;color:#86969d;margin-top:6px}.score{margin-top:25px;background:var(--navy);border-radius:11px;color:#fff;padding:22px;display:flex;align-items:center;justify-content:space-between}.score small{font-size:12.5px;letter-spacing:.15em}.score strong{font:45px Georgia;display:block}.score strong sup{font-size:19px}.score p{font-size:13px;color:#a9e65a;margin:0}.ring{width:82px;height:82px;border-radius:50%;border:8px solid var(--lime);display:grid;place-items:center;font:bold 24px Georgia}.ring small{position:absolute;margin:33px 0 0 28px}.attention{margin-top:22px}.attention>div{display:flex;justify-content:space-between;font-size:15px}.attention a{color:var(--teal)}.attention article{display:flex;align-items:center;gap:10px;background:#fff;padding:11px;margin-top:8px;border:1px solid #e1e9e6;border-radius:8px}.attention article p{flex:1;margin:0}.attention article p b,.attention article p small{display:block;font-size:13.5px}.attention article p small{font-size:12.5px;color:#839197;margin-top:4px}.risk{font-size:12px;font-weight:bold;padding:5px;border-radius:4px}.red{background:#ffe7e1;color:#af3b27}.amber{background:#fff1cc;color:#9c7100}.blue{background:#dff3f4;color:#087f7b}.attention button{font-size:12.5px;color:var(--teal);background:white;border:1px solid #bfd6d3;border-radius:4px;padding:6px}.float,.ethan{position:absolute;background:#fff;border:1px solid #d4e2df;border-radius:10px;box-shadow:0 15px 35px #1136471f;display:flex;align-items:center;z-index:2;padding:13px 18px}.float{left:-35px;top:40px}.float>b{width:28px;height:28px;background:#ffe9df;color:#b8492c;border-radius:50%;display:grid;place-items:center;margin-right:10px}.float strong,.float small,.ethan strong,.ethan small{display:block;font-size:13.5px}.float small,.ethan small{font-size:12.5px;color:#74858c;margin-top:3px}.ethan{right:-25px;bottom:-20px}.ethan>b{font-size:20px;color:var(--teal);margin-right:10px}.trust{border-block:1px solid var(--line);padding:27px 0;text-align:center}.trust p{font-size:13.5px;letter-spacing:.1em;color:#85939a;text-transform:uppercase}.trust div div{display:flex;justify-content:center;gap:25px;margin-top:18px;color:#40555f;font-size:15px;font-weight:bold}.trust i{color:#b6c2c4}.problem{padding:110px 0;text-align:center}.problem h2,.how h2,.pricing h2,.faq h2{font:44px/1.12 Georgia;color:var(--navy);letter-spacing:-.03em}.problem h2 span,.pricing h2 span{color:var(--teal)}.compare{margin-top:55px;display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;text-align:left}.before,.after{padding:34px 38px;border:1px solid var(--line);border-radius:12px}.before{background:#fafafa;color:#68787f}.after{background:#eff9f4;border-color:#b9dfd0}.before small,.after small{font-size:13px;letter-spacing:.13em;font-weight:bold}.after small{color:var(--teal)}.before h3,.after h3{font:28px Georgia;color:var(--navy);margin:13px 0 22px}.before ul,.after ul,.inside ul,.plist ul{list-style:none;padding:0}.before li,.after li,.inside li,.plist li{display:flex;gap:11px;align-items:center;padding:8px 0;font-size:16px}.before li:before{content:'×';color:#a9b2b5;font-weight:bold}.check{width:19px;height:19px;display:inline-grid;place-items:center;background:var(--teal);color:white;border-radius:50%;font-size:13.5px;flex:none}.arrow{width:56px;height:56px;background:var(--navy);color:#fff;border-radius:50%;display:grid;place-items:center;z-index:2;font-size:24px}.how{background:var(--navy);color:white;padding:105px 0}.how .kicker,.how h2{text-align:center}.how .kicker{color:var(--lime)}.how h2{color:#fff;margin:17px 0 55px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps article{position:relative;background:#10283b;border:1px solid #284052;padding:32px;border-radius:12px}.steps article>span{position:absolute;right:20px;top:16px;font:35px Georgia;color:#243c4d}.steps article>div{font-size:25px;color:var(--lime)}.steps h3{font:23px Georgia}.steps p{color:#afbec7;font-size:16px;line-height:1.6}.steps b{color:var(--lime);font-size:13px;letter-spacing:.12em}.inside{padding:110px 0;display:grid;grid-template-columns:1fr 1.05fr;gap:90px;align-items:center}.inside h2{font:43px/1.1 Georgia;margin:18px 0}.inside>div>p{color:var(--muted);font-size:17px;line-height:1.65}.modules{display:grid;grid-template-columns:1fr 1fr;gap:12px}.modules article{border:1px solid var(--line);border-radius:10px;padding:22px;box-shadow:0 8px 24px #1836430a}.modules .featured{grid-column:1/3;background:var(--navy);color:white;padding:30px}.featured small{color:var(--lime)}.featured strong{display:block;font:25px Georgia;margin:9px 0}.featured p{color:#9fafb9;font-size:15px}.featured div{display:flex;gap:6px}.featured i{height:5px;background:var(--teal);border-radius:5px;flex:1}.featured i:nth-child(2){background:var(--lime);flex:2}.modules article>span{color:var(--teal);font-size:20px}.modules article>b,.modules article>small{display:block;margin-top:10px}.modules article>small{font-size:13px;color:#71838c}.proof{background:var(--cream);padding:95px 0}.proofgrid{display:grid;grid-template-columns:1fr .8fr;gap:90px;align-items:center}.proof blockquote{font:31px/1.35 Georgia;margin:20px 0}.proof p{font-size:15px;color:var(--muted)}.stats{display:flex;gap:37px;border-top:1px solid #d7dfdc;margin-top:35px;padding-top:24px}.stats b,.stats span{display:block}.stats b{font:25px Georgia;color:var(--teal)}.stats span{font-size:12.5px;color:#708089;text-transform:uppercase}.video{height:260px;border-radius:14px;background:linear-gradient(145deg,#16354a,#087f7b);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.video>span{width:62px;height:62px;border:1px solid #ffffff80;border-radius:50%;display:grid;place-items:center;margin-bottom:20px}.video b{font:21px Georgia}.video small{color:#c4dedb;margin-top:8px}.pricing{padding:110px 0;text-align:center}.pricecard{max-width:850px;margin:50px auto 0;border:1px solid #cddbd8;border-radius:14px;display:grid;grid-template-columns:.9fr 1.1fr;text-align:left;overflow:hidden;box-shadow:0 30px 70px #1b3d4c13}.price{background:var(--navy);color:white;padding:45px;position:relative}.save{position:absolute;right:20px;top:20px;background:var(--lime);color:var(--navy);font-size:12.5px;padding:7px}.price>small{color:#aebbc3}.price>div:nth-of-type(2){font:58px Georgia;margin-top:23px}.price sup{font-size:19px}.price div span{font:16.5px Arial;color:#aebbc3}.price p{font-size:15px;color:#b7c5cd}.full{width:100%;margin-top:22px}.price em{display:block;text-align:center;font-size:12.5px;color:#aab9c1;margin-top:12px;font-style:normal}.plist{padding:43px}.plist h3{font:20px Georgia}.plist a{color:var(--teal);font-size:15px;font-weight:bold}.faq{padding:95px 0;display:grid;grid-template-columns:.65fr 1fr;gap:100px;border-top:1px solid var(--line)}.faq>div>p{color:var(--muted);font-size:16px;line-height:1.6}.faq details{border-bottom:1px solid var(--line);padding:19px 0}.faq summary{list-style:none;font-weight:bold;font-size:16px;cursor:pointer}.faq summary span{float:right;color:var(--teal);font-size:20px}.faq details p{color:var(--muted);font-size:15.5px}.final{background:var(--teal);color:#fff;text-align:center;padding:80px 20px}.final>span{color:var(--lime);font-size:26px}.final h2{font:42px Georgia;margin:15px}.final p{color:#cce6e3}.light{background:#fff;color:var(--teal)!important;margin:15px}.final small{display:block;color:#cce6e3;font-size:13px}footer{padding:40px 0;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;color:#73838b;font-size:13px;line-height:1.7}footer p{text-align:center}footer>div:last-child{display:flex;gap:12px;justify-content:flex-end}footer a{color:#64747c;text-decoration:none} @media(max-width:850px){.navlinks,.signin{display:none}.hero,.inside,.proofgrid,.faq{grid-template-columns:1fr}.hero h1{font-size:45px}.trust div div{flex-wrap:wrap}.compare{grid-template-columns:1fr}.arrow{margin:-20px auto;transform:rotate(90deg)}.steps{grid-template-columns:1fr}.pricecard{grid-template-columns:1fr}.inside,.proofgrid,.faq{gap:40px}footer{grid-template-columns:1fr;text-align:center;gap:20px}footer .brand,footer>div:last-child{justify-self:center;justify-content:center}} @media(max-width:520px){.shell{width:calc(100% - 28px)}.alertbar{font-size:13px}.nav{height:68px}.hero{gap:50px}.hero h1{font-size:40px}.hero-actions{align-items:stretch;flex-direction:column}.micro{flex-wrap:wrap}.app{height:360px}.appbody{padding:17px}.float{left:-8px;top:-20px}.ethan{right:-6px}.attention article:nth-child(3){display:none}.problem h2,.how h2,.pricing h2{font-size:35px}.modules{grid-template-columns:1fr}.modules .featured{grid-column:auto}.stats{gap:18px}.price,.plist{padding:32px 25px}.final h2{font-size:34px}} /* Premium editorial pass */ body{background:#fbfcfa}.shell{width:min(1240px,calc(100% - 64px))}.alertbar{height:32px;background:#061a29;letter-spacing:.08em;text-transform:uppercase;font-size:13px}.nav{height:104px}.brandmark{width:39px;height:39px;border-radius:4px}.brand small{letter-spacing:.22em}.hero{min-height:760px;grid-template-columns:.92fr 1.08fr;gap:105px;padding:82px 0 112px}.hero h1{font-size:67px;line-height:1.01;max-width:640px}.lede{max-width:570px;font-size:17.5px}.app{height:480px;border-radius:4px;box-shadow:0 50px 100px #0b283824}.float,.ethan{border-radius:3px}.trust{background:#fff;padding:34px 0}.problem{padding:150px 0}.problem h2,.how h2,.pricing h2,.faq h2{font-size:52px}.compare{margin-top:78px}.before,.after{border-radius:2px;padding:48px}.arrow{border-radius:2px}.how{padding:145px 0;background:#061a29}.steps{gap:1px;background:#29404e;border:1px solid #29404e}.steps article{border:0;border-radius:0;padding:46px;background:#0b2334}.inside{padding:150px 0;gap:130px}.inside h2{font-size:50px}.modules{gap:1px;background:#d6e0df;border:1px solid #d6e0df}.modules article{border:0;border-radius:0;box-shadow:none;padding:30px}.proof{padding:130px 0}.proofgrid{gap:130px}.video{height:330px;border-radius:2px}.pricing{padding:150px 0}.pricecard{max-width:940px;margin-top:72px;border-radius:2px;box-shadow:0 45px 100px #122f3a18}.price,.plist{padding:58px}.faq{padding:135px 0;gap:140px}.final{padding:120px 20px;background:#087f7b}.final h2{font-size:54px;margin:20px}.final p{font-size:17.5px}footer{display:block;background:#061a29;color:#8fa2ad;padding:0}.footer-main{display:grid;grid-template-columns:1.25fr 1fr;gap:140px;padding-top:110px;padding-bottom:90px}.footer-brand{color:#fff}.footer-brand small{color:#8196a1}.footer-statement h2{font:48px/1.08 Georgia;color:#fff;letter-spacing:-.03em;margin:55px 0 22px}.footer-statement h2 em{font-style:normal;color:#65b9ad}.footer-statement p{font-size:16px;color:#9babb4;max-width:360px}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;padding-top:10px}.footer-links div{display:flex;flex-direction:column;align-items:flex-start;gap:15px}.footer-links small{color:#65b9ad;font-size:12.5px;letter-spacing:.16em;margin-bottom:10px}.footer-links a{color:#d4dde1;text-decoration:none;font-size:15.5px}.footer-links a:hover{color:#fff}.footer-word{font:bold clamp(80px,13.5vw,190px)/.78 Arial;color:#0c2a3d;letter-spacing:-.085em;white-space:nowrap;overflow:hidden;padding-bottom:30px}.footer-bottom{border-top:1px solid #173449;display:grid;grid-template-columns:1fr 2fr auto;gap:50px;padding-top:26px;padding-bottom:34px;font-size:12.5px;letter-spacing:.03em}.footer-bottom p{text-align:left;margin:0}.footer-bottom p:nth-child(2){text-align:center}.footer-bottom span{text-align:right;color:#b9e44b;text-transform:uppercase;letter-spacing:.14em} @media(max-width:900px){.shell{width:min(100% - 36px,1240px)}.hero{grid-template-columns:1fr;gap:70px}.hero h1{font-size:54px}.footer-main{grid-template-columns:1fr;gap:70px}.footer-links{max-width:600px}.footer-bottom{grid-template-columns:1fr;gap:12px}.footer-bottom p:nth-child(2),.footer-bottom span{text-align:left}.inside{gap:60px}.proofgrid{gap:60px}} @media(max-width:540px){.hero h1{font-size:43px}.hero{padding-top:55px}.problem h2,.how h2,.pricing h2,.faq h2{font-size:38px}.footer-main{padding-top:75px}.footer-links{grid-template-columns:1fr 1fr;gap:45px}.footer-statement h2{font-size:40px}.footer-word{font-size:24vw}} .human-outcome{display:grid;grid-template-columns:1.08fr .92fr;gap:120px;align-items:center;padding:150px 0 40px}.human-photo{position:relative;height:610px;overflow:hidden;background:#dfe8e4}.human-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,#061a2999)}.human-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) contrast(1.03)}.human-photo>span{position:absolute;z-index:2;left:38px;bottom:34px;color:#fff;font:28px Georgia;letter-spacing:-.02em}.human-copy h2{font:50px/1.08 Georgia;color:var(--navy);letter-spacing:-.035em;margin:24px 0}.human-copy h2 em{font-style:normal;color:var(--teal)}.human-copy>p{font-size:17px;line-height:1.8;color:#61737d;max-width:520px}.human-signals{margin-top:48px;border-top:1px solid #d5dedd}.human-signals span{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid #d5dedd;font-size:15.5px;font-weight:bold;letter-spacing:.02em}.human-signals b{color:var(--teal);font-size:13px;letter-spacing:.12em}.team-photo{height:440px;position:relative;overflow:hidden;background:#0b2334}.team-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,#061a29e8)}.team-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82)}.team-photo>div{position:absolute;z-index:2;left:36px;right:36px;bottom:30px;color:white;display:grid;grid-template-columns:auto 1fr;column-gap:13px}.team-photo>div>span{grid-row:1/3;color:var(--lime);font-size:22px}.team-photo b{font:22px Georgia}.team-photo small{color:#c4d2d7;margin-top:5px} @media(max-width:900px){.human-outcome{grid-template-columns:1fr;gap:60px;padding-top:90px}.human-photo{height:520px}.human-copy{padding-bottom:70px}} @media(max-width:540px){.human-photo{height:420px}.human-photo>span{font-size:22px;left:24px;bottom:24px}.human-copy h2{font-size:38px}.team-photo{height:380px}.team-photo>div{left:24px;right:24px}} /* Focused kit funnels */ .kit-page{--kit-accent:#b8e34b;background:#fbfcfa;color:#102838}.kit-page.sc{--kit-accent:#cba56a}.kit-shell{width:min(1240px,calc(100% - 64px));margin:auto}.kit-top{height:32px;background:#061a29;color:#dce8e8;display:flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.12em;font-size:13px}.kit-top span{color:var(--kit-accent);margin:0 12px}.kit-nav{height:104px;display:flex;align-items:center;justify-content:space-between}.kit-nav>div{display:flex;gap:30px}.kit-nav a{text-decoration:none;color:#405461;font-size:15.5px}.kit-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;background:#087f7b;color:#fff!important;text-decoration:none;border:0;border-radius:3px;padding:18px 24px;font-size:16px;font-weight:bold;box-shadow:0 14px 35px #087f7b24}.kit-button.compact{padding:12px 17px}.kit-hero{min-height:720px;display:grid;grid-template-columns:.92fr 1.08fr;gap:100px;align-items:center;padding:65px 0 100px}.kit-eyebrow,.kit-kicker{text-transform:uppercase;letter-spacing:.15em;font-size:13px;font-weight:bold;color:#087f7b}.kit-eyebrow{display:inline-block;background:#e7f3ef;border:1px solid #c8dfd7;padding:9px 12px;border-radius:2px}.sc .kit-eyebrow{color:#76582e;background:#f4ecdf;border-color:#e6d2b4}.kit-copy h1{font:59px/1.03 Georgia;color:#071b2a;letter-spacing:-.045em;margin:25px 0}.kit-copy>p{font-size:17.5px;line-height:1.7;color:#5b707b;max-width:600px}.kit-buy{display:flex;align-items:center;gap:25px;margin-top:32px}.kit-buy strong,.kit-buy small{display:block}.kit-buy strong{font:20px Georgia}.kit-buy small{font-size:13px;color:#70828a;margin-top:6px}.kit-assurance{display:flex;gap:16px;margin-top:21px;font-size:13px;color:#687a82}.kit-visual{position:relative;min-height:510px;background:#071b2a;padding:47px;display:flex;align-items:center;justify-content:center}.kit-visual:before{content:'';position:absolute;inset:20px;border:1px solid #244054}.doc-stack{width:360px;height:460px;position:relative}.doc-stack>i{position:absolute;width:85%;height:94%;background:#d8e3df;right:-16px;top:16px;transform:rotate(3deg)}.doc-stack>i:nth-child(2){right:-7px;top:8px;background:#eef2ef;transform:rotate(1deg)}.doc-stack article{position:absolute;inset:0;background:#fff;padding:38px;box-shadow:0 30px 60px #0004}.doc-stack header{display:flex;align-items:center;gap:10px}.doc-stack header span{background:#087f7b;color:#fff;padding:7px;font-weight:bold}.doc-stack header small{font-size:12px;letter-spacing:.1em;color:#60727b}.doc-rule{height:3px;background:var(--kit-accent);margin:24px 0}.doc-stack h3{font:26px/1.15 Georgia;margin:0}.doc-stack p{font-size:13px;color:#65808a}.doc-stack ul{padding:20px 0 0;list-style:none}.doc-stack li{border-bottom:1px solid #e2e8e6;padding:11px 0;font-size:13px}.doc-stack li:before{content:'✓';color:#087f7b;margin-right:8px}.doc-stack footer{position:absolute;bottom:25px;font-size:12px;color:#8b989d}.value-card{position:absolute;right:-24px;bottom:28px;background:var(--kit-accent);color:#071b2a;width:190px;padding:23px;box-shadow:0 20px 50px #0003}.value-card small,.value-card span,.value-card b,.value-card strong{display:block}.value-card small{font-size:12px;letter-spacing:.15em}.value-card b{font:23px Georgia;margin:9px 0}.value-card span{font-size:12.5px}.value-card hr{border:0;border-top:1px solid #071b2a33;margin:15px 0}.value-card strong{font:28px Georgia}.kit-proofbar{background:#fff;border-block:1px solid #dce4e4}.kit-proofbar .kit-shell{display:grid;grid-template-columns:repeat(4,1fr)}.kit-proofbar div div{padding:31px 24px;border-right:1px solid #e1e7e6;display:flex;gap:14px;align-items:center}.kit-proofbar div div:first-child{border-left:1px solid #e1e7e6}.kit-proofbar b{font:19px Georgia;color:#087f7b}.kit-proofbar span{font-size:13.5px;line-height:1.35}.kit-problem{display:grid;grid-template-columns:1fr 1fr;gap:110px;padding:140px 0}.kit-problem h2,.catalogue h2,.page-preview h2,.included-section h2,.kit-price h2,.kit-faq h2{font:47px/1.08 Georgia;letter-spacing:-.035em;color:#071b2a}.outcome-grid{border-top:1px solid #d7e0df}.outcome-grid article{display:grid;grid-template-columns:50px 1fr;align-items:center;border-bottom:1px solid #d7e0df;padding:19px 0}.outcome-grid span{color:#087f7b;font-size:13px;font-weight:bold}.outcome-grid p{margin:0;font-size:16px;font-weight:bold}.catalogue{background:#061a29;color:#d9e3e7;padding:130px 0}.catalogue h2{color:#fff;margin:15px 0}.catalogue-head{display:grid;grid-template-columns:1fr .8fr;gap:90px;align-items:end}.catalogue-head p{font-size:16px;color:#9eb0b9;line-height:1.6}.catalogue .kit-kicker{color:var(--kit-accent)}.searchbox{height:62px;background:#fff;display:flex;align-items:center;padding:0 19px;gap:13px}.searchbox span{font-size:25px;color:#087f7b}.searchbox input{border:0;outline:0;flex:1;font-size:16.5px;color:#17313f}.searchbox button{border:0;background:transparent;color:#087f7b;font-weight:bold}.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:45px}.filters button{border:1px solid #38505e;background:transparent;color:#aab9c1;padding:10px 14px;font-size:13px;cursor:pointer}.filters button.active{background:var(--kit-accent);color:#071b2a;border-color:var(--kit-accent)}.results-line{display:flex;justify-content:space-between;border-bottom:1px solid #36505f;margin-top:34px;padding-bottom:13px;font-size:13px;color:#94a8b1}.results-line b{color:#fff}.doc-list{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#29404e;margin-top:1px}.doc-list article{background:#0b2334;min-height:76px;padding:16px 18px;display:flex;align-items:center;gap:14px}.fileicon{width:31px;height:35px;display:grid;place-items:center;background:#18465a;color:#9adbd1;font-size:13.5px;font-weight:bold}.doc-list article div{flex:1}.doc-list b,.doc-list small{display:block}.doc-list b{font-size:15px;color:#edf3f4}.doc-list small{font-size:12.5px;color:#8196a1;margin-top:5px}.doc-list button{background:transparent;border:1px solid #4a6675;color:var(--kit-accent);padding:7px 10px;font-size:12.5px;cursor:pointer}.included{font-size:12.5px;color:#80949e}.no-results{text-align:center;padding:70px}.catalogue-cta{display:flex;align-items:center;justify-content:space-between;margin-top:42px;border-top:1px solid #2c4655;padding-top:30px}.catalogue-cta p{font:20px Georgia}.page-preview{display:grid;grid-template-columns:.8fr 1.2fr;gap:120px;align-items:center;padding:150px 0}.preview-copy>p{font-size:16.5px;line-height:1.7;color:#60737d}.preview-copy ul{padding:0;list-style:none;margin-top:30px}.preview-copy li{border-bottom:1px solid #d9e1df;padding:13px 0;font-size:15px}.preview-copy li:before{content:'✓';color:#087f7b;margin-right:10px}.paper{min-height:650px;background:#fff;box-shadow:0 35px 90px #173d4b1c;padding:70px 75px;position:relative;border:1px solid #e0e6e4}.paper header{display:flex;justify-content:space-between;border-bottom:4px solid var(--kit-accent);padding-bottom:20px;font-size:13.5px}.paper>small{display:block;margin-top:50px;color:#087f7b;font-size:12.5px;letter-spacing:.14em}.paper h3{font:33px Georgia}.paper p{font-size:15px;line-height:1.8;color:#4f626c}.paper-table{display:grid;grid-template-columns:2fr 1fr 1fr;border:1px solid #dce4e2;margin-top:35px}.paper-table>*{padding:12px;border-right:1px solid #dce4e2;border-bottom:1px solid #dce4e2;font-size:12.5px}.paper-table i{height:28px}.paper footer{position:absolute;bottom:35px;font-size:12.5px;color:#9aa5a9}.included-section{background:#f1f3ef;padding:130px 0}.included-section h2{text-align:center}.included-section .kit-kicker{text-align:center}.included-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:60px;border:1px solid #d7dfdc}.included-grid article{padding:36px;border-right:1px solid #d7dfdc;background:#fff}.included-grid article:last-child{border:0}.included-grid span{color:#087f7b;font-size:13px}.included-grid h3{font:21px Georgia}.included-grid p{font-size:15px;line-height:1.6;color:#64757d}.kit-price{display:grid;grid-template-columns:1fr .85fr;gap:130px;align-items:center;padding:145px 0}.kit-price>div>p{color:#60737d;line-height:1.7}.offer-card{background:#071b2a!important;color:#fff;padding:55px;box-shadow:0 35px 80px #102d391e}.offer-card>small{color:var(--kit-accent);letter-spacing:.14em;font-size:12.5px}.offer-card>div{font:65px Georgia;margin:20px 0}.offer-card sup{font-size:20px}.offer-card div span{font:16px Arial;color:#aab8bf}.offer-card ul{list-style:none;padding:0}.offer-card li{font-size:15px;padding:8px 0}.kit-button.wide{width:100%;margin-top:25px}.offer-card>p{text-align:center;color:#8ea1aa;font-size:12.5px}.kit-faq{display:grid;grid-template-columns:.65fr 1fr;gap:120px;padding:130px 0;border-top:1px solid #dce4e4}.kit-faq>div>p{color:#60737d;font-size:15.5px;line-height:1.7}.kit-faq details{border-bottom:1px solid #d8e0df;padding:20px 0}.kit-faq summary{list-style:none;font-size:16px;font-weight:bold;cursor:pointer}.kit-faq summary span{float:right;color:#087f7b;font-size:20px}.kit-faq details p{font-size:15.5px;color:#647780;line-height:1.7}.kit-final{background:#087f7b;color:#fff;padding:105px 0;text-align:center}.kit-final small{color:var(--kit-accent);letter-spacing:.13em}.kit-final h2{font:50px Georgia;margin:20px}.kit-final p{color:#cae5e1}.kit-button.inverse{background:#fff;color:#087f7b!important;margin-top:20px}.kit-footer{background:#061a29;color:#93a5ae;padding-top:100px}.kit-footer>.kit-shell:first-child{display:grid;grid-template-columns:1.3fr .6fr .5fr;gap:100px}.kit-footer .brand{color:#fff}.kit-footer h2{font:44px Georgia;color:#fff;margin:48px 0}.kit-footer h2 em{color:#65b9ad;font-style:normal}.kit-footer>.kit-shell>div:not(:first-child){display:flex;flex-direction:column;gap:15px}.kit-footer div small{color:#65b9ad;letter-spacing:.14em;font-size:12.5px;margin-bottom:10px}.kit-footer a{color:#d1dade;text-decoration:none;font-size:15px}.legal{border-top:1px solid #19374a;margin-top:75px;padding:25px 0 35px;font-size:12.5px;display:flex;justify-content:space-between}.preview-modal{position:fixed;inset:0;background:#02101bcf;z-index:50;display:grid;place-items:center;padding:20px}.preview-modal>div{width:min(680px,100%);min-height:620px;background:#fff;padding:65px;box-shadow:0 40px 100px #0006;position:relative}.preview-modal button{position:absolute;right:20px;top:20px;background:transparent;border:0;color:#087f7b;font-weight:bold}.preview-modal small{color:#087f7b;letter-spacing:.13em}.preview-modal h2{font:38px Georgia;margin:20px 0 45px}.preview-modal p{font-size:16px;line-height:1.8}.modal-note{position:absolute;left:65px;right:65px;bottom:55px;background:#f1f4f1;padding:18px;font-size:13px;color:#64757d} @media(max-width:900px){.kit-shell{width:calc(100% - 36px)}.kit-nav>div{display:none}.kit-hero,.kit-problem,.catalogue-head,.page-preview,.kit-price,.kit-faq{grid-template-columns:1fr;gap:60px}.kit-copy h1{font-size:49px}.kit-visual{margin-inline:15px}.kit-proofbar .kit-shell,.included-grid{grid-template-columns:1fr 1fr}.doc-list{grid-template-columns:1fr}.catalogue-cta{align-items:flex-start;gap:20px;flex-direction:column}.paper{padding:50px}.kit-footer>.kit-shell:first-child{grid-template-columns:1fr 1fr}.kit-footer>.kit-shell:first-child>div:first-child{grid-column:1/3}} @media(max-width:540px){.kit-top{font-size:12px}.kit-nav{height:78px}.kit-nav .kit-button{display:none}.kit-hero{padding-top:45px}.kit-copy h1{font-size:41px}.kit-buy{align-items:stretch;flex-direction:column}.kit-assurance{flex-wrap:wrap}.kit-visual{min-height:450px;padding:28px}.doc-stack{width:280px;height:390px}.doc-stack article{padding:28px}.value-card{right:-8px;width:160px}.kit-proofbar .kit-shell,.included-grid{grid-template-columns:1fr}.kit-proofbar div div{border-left:1px solid #e1e7e6}.kit-problem h2,.catalogue h2,.page-preview h2,.included-section h2,.kit-price h2,.kit-faq h2{font-size:38px}.catalogue{padding:90px 0}.results-line span:last-child{display:none}.paper{padding:36px 28px;min-height:620px}.paper-table{grid-template-columns:1fr}.included-grid article{border-right:0;border-bottom:1px solid #d7dfdc}.offer-card{padding:38px 28px}.kit-footer>.kit-shell:first-child{grid-template-columns:1fr}.kit-footer>.kit-shell:first-child>div:first-child{grid-column:auto}.legal{flex-direction:column;gap:10px}.preview-modal>div{padding:50px 28px}.modal-note{left:28px;right:28px}} /* ===== PART 2: readability & accessibility ===== */ /* ============================================================================ ProviderQMS — accessibility & readability layer Loads AFTER _base.css. The design is cloned as-authored; this layer only raises readability. Nothing here changes layout, spacing or composition. Why a layer and not an edit: the base is a coherent 369-rule system. Editing values inside it risks silent regressions across components that share a token. Overriding at the end is auditable — every change is on this page, with the measured reason beside it. Every ratio below was COMPUTED against the actual surface, not estimated. ============================================================================ */ /* ---- 1. TOKENS: two of the six sat within 0.1 of the WCAG AA floor ---------- measured on --cream #f7f8f4 (the page ground) and #ffffff (card ground): --muted #607383 4.60 / 4.91 -> #546573 5.65 / 6.02 --teal #087f7b 4.54 / 4.85 -> #076f6c 5.63 / 6.00 Same hue, real headroom. A token that passes by 0.04 fails the moment anything sits on a tinted card. */ :root { --muted: #546573; --teal: #076f6c; /* The original teal, retained for LARGE display type and decorative fills on light grounds where the 3:1 large-text floor applies. */ --teal-display: #087f7b; /* --teal on the navy ground is only 3.56 — UI-only, and it fails body text. This is the navy-ground teal at 4.53. They are NOT interchangeable: light ground -> --teal, navy ground -> --teal-on-navy. */ --teal-on-navy: #09928d; /* --lime #b9e44b on cream is 1.38 — it FAILS badly and must never carry text on a light ground. It is a fill. On navy it is 11.72, on ink 10.13. */ --lime-ink: #0b1c2c; /* the only text colour permitted ON a lime fill */ --on-navy: #f7f8f4; /* 16.18 on navy */ --on-navy-dim: #c3cdd6; /* 10.70 on navy — secondary text, still generous */ /* Status colours. These are the only states the product may render. There is deliberately no "compliant"/"passed" token: the system never issues that verdict, and a colour for it would invite one. */ --st-critical: #a3231b; /* 7.00 on cream */ --st-attention: #8a4c05; /* 6.32 on cream */ --st-ontrack: #1c6b4a; /* 6.06 on cream */ } /* ---- 2. BODY TYPE ----------------------------------------------------------- The base sets Arial at browser default. Providers read this on a phone, often one-handed, often at the end of a shift. 17px/1.6 is the floor here. */ body { font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.6; background: var(--cream); -webkit-font-smoothing: antialiased; } p, li { line-height: 1.6; } .lede { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; } /* Running text never exceeds a comfortable measure. */ .lede, .problem > div > p, .inside > div > p, .faq > div > p, .human-copy > p, .preview-copy > p, .catalogue-head p { max-width: 68ch; } h1, h2, h3 { text-wrap: balance; } /* ---- 3. CONTROLS ------------------------------------------------------------ The base sets .button/.kit-button at 14px. A primary CTA is the one thing on the page that must never be hard to read or hard to hit. */ .button, .kit-button { font-size: 16px; min-height: 48px; } .button.small, .kit-button.compact { font-size: 15px; min-height: 44px; } /* WCAG 2.2 AA target size (24x24 minimum); 44px is the comfortable standard. */ .filters button, .searchbox button, .doc-list button, .attention button, .preview-modal button, .nav a, .kit-nav a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .doc-list button, .filters button { padding-inline: 16px; } /* ---- 4. FOCUS --------------------------------------------------------------- The base removes outlines in places without replacing them. A keyboard user then loses their position entirely — and this is a disability-sector product. */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; } .price a:focus-visible, .final a:focus-visible, .kit-final a:focus-visible, footer a:focus-visible, .kit-footer a:focus-visible, .kit-top a:focus-visible { outline-color: var(--lime); /* 11.72 on navy — visible on the dark bands */ } /* Skip link — a 9-section page is a long way to tab through. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: var(--on-navy); padding: 14px 20px; border-radius: 0 0 8px 0; font-weight: 700; } .skip-link:focus { left: 0; } /* ---- 5. TEXT ON DARK GROUNDS ----------------------------------------------- Anything sitting on navy takes the navy-ground tokens. */ .price small, .price p, .final p, .kit-final p, .footer-bottom p, .kit-footer div small, .score small, .score p { color: var(--on-navy-dim); } .attention a, .video b { color: var(--teal-on-navy); } /* Lime carries ink, never white — white on lime is 1.47 and unreadable. */ .check, .lime-fill { color: var(--lime-ink); } /* ---- 6. STATUS PILLS -------------------------------------------------------- The base ships .red/.amber/.blue as colour-only risk markers. Colour alone is not an accessible encoding (WCAG 1.4.1), so each pill carries a text label — and the labels are constrained to the permitted state vocabulary. */ .risk { font-weight: 700; letter-spacing: .02em; } .risk.red { background: var(--st-critical); color: #fff; } .risk.amber { background: var(--st-attention); color: #fff; } .risk.blue { background: var(--st-ontrack); color: #fff; } /* ---- 7. MOTION -------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ---- 8. WIDE CONTENT -------------------------------------------------------- Tables and document lists scroll inside their own box so the page body never scrolls sideways on a phone. */ .paper-table, .doc-list, .stats { overflow-x: auto; } /* ---- 9. SMALL TEXT FLOOR ---------------------------------------------------- Handled upstream instead: every font-size in the cloned CSS was remapped through a compressive curve (see _retype.py) that lifts the 7-12px range to 12-15.5px and leaves the 21px+ display ladder untouched. 102 rules moved; nothing below 12px survives. A per-selector floor HERE would fight that remap and pull text back DOWN, which is what an earlier draft of this file did. */ .pq-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- 10. MEASURED CONTRAST FIXES ------------------------------------------- Every value below was measured in Chromium against the ACTUAL painted background (ancestor-walked), not guessed from the selector name. A static pass got this wrong first: it read .button as "white on cream" and flagged every footer rule, because a selector cannot tell you what is behind it. Format: original -> replacement (measured ratio on its real ground). */ .save, .save span { color: #0b1c2c; } /* #aebbc3 -> ink on lime 11.72 */ .steps article > span { color: #677884; } /* #243c4d -> 3.52 on #0b2334, large type */ .appbody header small { color: #616d72; } /* #86969d -> 5.33 on white */ .modules article:not(.featured) > small { color: #4d5a60; } /* #71838c -> 5.29 on #d6e0df. Scoped with :not(.featured) because .featured sits on NAVY, where the design's own lime already measures 11.72. An unscoped rule here outranked it and made a passing element fail — an accessibility fix creating an accessibility defect. */ .trust p { color: #636e73; } /* #85939a -> 5.24 on white */ .attention article p small { color: #636e72; } /* #839197 -> 5.24 on white */ .brand small { color: #5d6a74; } /* #72828e -> 5.21 on cream */ .float small, .ethan small { color: #606e74; } /* #74858c -> 5.28 on white */ .stats span { color: #5c6a71; } /* #708089 -> 5.24 on cream */ .micro { color: #5a6971; } /* #6c7e87 -> 5.33 on cream */ /* .featured small intentionally NOT overridden — the design sets it to lime on navy, which measures 11.72 and is the strongest option available on that ground. */ /* The .final band is TEAL, not navy. White is the ceiling there at 4.85 — it passes AA and nothing darker or lighter does better on that ground. */ .final p, .final small { color: #ffffff; } /* Two corrections to my own layer above, caught by measuring rather than reasoning. Both applied a navy-ground token to an element that is not on navy — exactly the misuse the HARD RULE beside --teal-on-navy warns about: .attention sits on WHITE -> --teal (6.00), not --teal-on-navy (3.63) .final sits on TEAL -> white, not --on-navy-dim (3.01) */ .attention a { color: var(--teal); } /* The footer brand mark sits on #061a29, so its teal must be the dark-ground step (4.64), not the light-ground one (2.95). */ footer .brand > span > span, .kit-footer .brand > span > span { color: var(--teal-on-navy); } /* ---- 11. SPECIFICITY CORRECTIONS ------------------------------------------- Three fixes above were outranked by more specific base rules, so the measured failure survived. Re-stated at a specificity that actually lands. */ /* .save already sets navy on lime, but `.price div span` (more specific) repaints the inner span #aebbc3 — 1.33 on lime. */ .price .save, .price .save span { color: #0b1c2c; } /* 11.72 on lime */ /* The brand tagline appears twice: on cream in the header, on #061a29 in the footer. One colour cannot serve both grounds. */ footer .brand small, .kit-footer .brand small { color: #808e99; } /* 5.26 on #061a29 */ /* .before paints its own #fafafa ground, so it is measured against that. */ .before, .before li, .before small { color: #5d6c72; } /* 5.22 on #fafafa */ /* A latent bug in the source design, surfaced by measurement: `.featured small` sets lime, but the design's own `.modules article>small` (0,2,1) outranks it (0,1,1), so the featured card's label has always rendered #71838c on navy = 4.38, just under AA. Restated at matching specificity so the design's own intent finally applies. */ .modules .featured > small { color: var(--lime); } /* 11.72 on navy */ /* ---- 12. PHOTO SCRIMS ------------------------------------------------------- Caption text sits on a gradient pseudo-element over a photograph, so its real contrast depends on the image underneath and cannot be computed from CSS — an automated check reads the container colour and reports a false failure. Verified by eye instead (shots/photo-block.png): legible, but the caption crosses mid-tone wood where the scrim is weakest. The scrim is deepened (99 -> cc alpha) and started higher (65% -> 55%) so the caption sits on a consistently dark band regardless of what the photo does behind it. This is the one case where "measure it" is not available and looking at it is the method. */ .human-photo:after { background: linear-gradient(180deg, transparent 55%, #061a29cc 88%, #061a29ee 100%); } .team-photo:after { background: linear-gradient(180deg, transparent 38%, #061a29ee 78%, #061a29f7 100%); } /* is inline by default and was not in the preflight list, so the photo frames collapsed around it once the images became responsive. The frame sizes the picture; the img fills it. */ .human-photo picture, .team-photo picture { display: block; width: 100%; height: 100%; } /* ---- 13. KIT PAGE CONTRAST --------------------------------------------------- Measured on both kit pages. The accent-coloured items are the interesting case: .kit-final sets a TEAL band, and both kit accents sit on it — lime 3.26, brass 2.11. An accent is a brand signal, not a text colour, so on that band the label takes white (4.85, the ceiling on teal) and the accent keeps its job everywhere it is a fill. */ .kit-final p, .kit-final small { color: #ffffff; } /* 4.85 on teal */ .offer-card > p, .offer-card > p a { color: #7f8f97; } /* 5.24 on #071b2a */ .kit-buy small { color: #5e6d73; } /* 5.22 on #fbfcfa */ .doc-stack p { color: #587079; } /* 5.24 on white */ .kit-eyebrow { color: #076f6c; } /* 5.28 on #e7f3ef */ .kit-kicker { color: #07716d; } /* 5.24 on #f1f3ef */ .modal-note { color: #59686f; } /* 5.21 on #f1f4f1 */ .kit-assurance span { color: #5d6d75; } /* 5.22 on #fbfcfa */ /* The SC page overrides .kit-eyebrow to its brass accent; on that page's tinted ground it needs the darker brass rather than the light one. */ .sc .kit-eyebrow { color: #6b5527; } /* brass, darkened for text */ /* Native needs its backdrop styled — the design assumed a div overlay. */ .preview-modal::backdrop { background: rgba(6, 26, 41, .72); } .preview-modal[open] { display: grid; } /* `.kit-price>div>p` (0,1,2) is written for the light left-hand column, but .offer-card is also a div child of .kit-price — so the card's footnote, sitting on #071b2a, inherited the light-ground grey and measured 3.54. Restated at (0,2,1), which outranks it. A plain `.offer-card > p` does not: one class beats two type selectors only when the class count is higher. */ .kit-price > .offer-card > p, .kit-price > .offer-card > p a { color: #7f8f97; } /* 5.24 on #071b2a */ /* The design's `.preview-modal { display:grid }` was written for a div overlay toggled by React state. Ported onto a native it overrides the browser's own `dialog:not([open]) { display:none }`, so the modal rendered in-flow on page load and sat on top of the hero. The closed state has to be restated explicitly. */ .preview-modal:not([open]) { display: none; } .preview-modal[open] { display: grid; } /* ---- 14. PORT BUGS FOUND BY LOOKING AT THE RENDER --------------------------- Neither of these is a contrast or type problem, so no measurement caught them. They were found by reading the screenshot, which is why that step is not optional. */ /* `.value-card span { font-size:12.5px }` (0,1,1) also matches the span that carries the live document count inside , so the number rendered at caption size next to a 23px word: "109 documents" with the 109 tiny. */ .value-card b span { font: inherit; letter-spacing: inherit; display: inline; } /* The real cause of the dark box behind "Editable Word document": the bare `footer` selector paints the site footer's #061a29 ground, and it also matches the nested