@font-face{font-family:"Hedvig Fallback";src:local("Georgia"),local("Times New Roman"),local("DejaVu Serif");size-adjust:93.3%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica"),local("Liberation Sans");size-adjust:106.3%;ascent-override:90%;descent-override:22.5%;line-gap-override:0%}
:root{--ink:#130e30;--slate:#5f5c6e;--canvas:#f9fbf2;--meadow:#eff2e5;--sun:#ffe228;--line:#dfe3d2;--crit:#a8443c;--serif:"Hedvig Letters Serif","Hedvig Fallback",Georgia,serif;--sans:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:16px/1.6 var(--sans)}
a{color:var(--ink)}img,svg{max-width:100%}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--sun);padding:8px 16px;border-radius:1440px;z-index:9}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
main{position:relative;max-width:1200px;margin:0 auto;padding:0 24px 64px}
main.has-hero{overflow:hidden}
.blobs{position:absolute;inset:0 0 auto 0;height:640px;z-index:-1;pointer-events:none}.blobs svg{width:100%;height:100%}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.08;margin:0 0 16px;text-shadow:0 1px 0 rgba(255,255,255,.7),0 2px 0 rgba(19,14,48,.06),0 14px 30px rgba(19,14,48,.10)}
h1{letter-spacing:-.025em}
.hl{background:linear-gradient(transparent 62%,rgba(255,226,40,.75) 62%,rgba(255,226,40,.75) 92%,transparent 92%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
h1{font-size:64px}h2{font-size:48px}h3{font-size:32px}h4{font-size:22px;font-family:var(--serif);font-weight:400;margin:0 0 8px;letter-spacing:-.01em}
p{margin:0 0 16px}.lead{font-size:18px;color:var(--slate);max-width:640px}.muted{color:var(--slate)}.tiny{font-size:14px}.center{text-align:center}
.eyebrow{display:inline-block;font-size:14px;font-weight:600;background:var(--meadow);border-radius:1440px;padding:8px 16px;margin-bottom:24px}
.nav{margin-top:16px;background:var(--meadow);border-radius:1440px;padding:8px 8px 8px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{filter:drop-shadow(0 2px 3px rgba(19,14,48,.18));flex:none}
.wordmark{font:400 23px/1 var(--serif);letter-spacing:-.02em;text-shadow:0 1px 0 #fff,1.5px 1.5px 0 rgba(255,226,40,.9)}.wordmark b{font-weight:400;font-family:var(--sans);font-weight:700;font-size:.82em;letter-spacing:-.01em;margin-left:1px;text-shadow:none}
.navlinks{display:flex;align-items:center;gap:24px}.navlinks a{text-decoration:none;font-weight:500;font-size:16px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:1440px;padding:16px 32px;font:600 16px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;white-space:nowrap}
.pill{transition:transform .15s ease,box-shadow .15s ease}.pill.sun{background:var(--sun);color:var(--ink);box-shadow:0 2px 0 #d9bf12,0 6px 16px -6px rgba(19,14,48,.25)}.pill.dark{background:var(--ink);color:#fff;box-shadow:0 2px 0 #000,0 6px 16px -6px rgba(19,14,48,.35)}a.pill:hover,button.pill:hover{transform:translateY(-1px)}span.pill{cursor:default}.pill.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.navlinks a.pill.dark{color:#fff}.small-pill{padding:12px 24px}
.pill:hover{filter:brightness(.96)}.pill:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.hero{padding:80px 0 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.card{background:var(--meadow);border-radius:24px;padding:32px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 1px 2px rgba(19,14,48,.05),0 10px 28px -12px rgba(19,14,48,.14)}
.card .card,.footer-card{box-shadow:none}
.card.canvas{background:var(--canvas);border:1.5px solid var(--line)}
.scan-form .row{display:flex;gap:8px;background:var(--canvas);border-radius:1440px;padding:8px;border:1.5px solid var(--line)}
.scan-form input[type=text],.scan-form input[type=email],.inline-form input[type=email]{flex:1;min-width:0;border:0;background:transparent;font:16px var(--sans);color:var(--ink);padding:8px 16px;border-radius:1440px}
.scan-form .opt{margin-top:16px;display:grid;gap:8px}
.scan-form .opt input[type=email],.inline-form input[type=email]{background:var(--canvas);border:1.5px solid var(--line);padding:14px 20px}
label.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--slate)}label.check input{margin-top:4px;accent-color:var(--ink)}
.inline-form{display:flex;flex-direction:column;gap:8px;max-width:520px}
.progress{margin-top:16px;display:none}.progress.on{display:block}
.progress ol{margin:8px 0 0;padding-left:20px;color:var(--slate)}.error{color:var(--crit);font-weight:600;margin-top:16px}
.grid{display:grid;gap:24px;grid-template-columns:repeat(3,1fr)}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.four{grid-template-columns:repeat(4,1fr)}
section{margin-top:80px}
.tag{display:inline-block;font-size:14px;font-weight:600;border-radius:1440px;padding:4px 12px;background:var(--canvas);border:1.5px solid var(--ink);margin:0 8px 8px 0}
.tag.critical{background:var(--crit);border-color:var(--crit);color:#fff}.tag.high{background:var(--ink);color:#fff}.tag.soft{border-color:var(--line);color:var(--slate)}
.finding{margin-top:24px}.finding h4{margin-top:8px}
.evidence{margin:8px 0 16px;padding:0;list-style:none}.evidence li{font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--canvas);border-radius:12px;padding:8px 16px;margin-top:8px;word-break:break-all}
.locked{border:1.5px dashed var(--slate);border-radius:24px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.locked span{font-weight:600}
pre.fix{white-space:pre-wrap;word-break:break-word;background:var(--canvas);border-radius:24px;padding:24px;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0 0 8px}
.score{font-family:var(--serif);font-size:64px;line-height:1}.score small{font-size:22px;color:var(--slate)}
.passes{list-style:none;padding:0;margin:0}.passes li{padding:8px 0;border-top:1px solid var(--line)}.passes li:before{content:"✓ ";font-weight:700}
table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;padding:8px;border-top:1px solid var(--line)}
.price{font-family:var(--serif);font-size:48px;line-height:1;margin:8px 0}.price small{font-family:var(--sans);font-size:16px;color:var(--slate)}
.card ul{padding-left:20px;margin:16px 0}.card li{margin:4px 0}
.plan{display:flex;flex-direction:column}.plan .pill{margin-top:auto;align-self:flex-start}
.prose{max-width:760px}.prose h2{font-size:32px;margin-top:48px}.prose li{margin:8px 0}
.cta-band{margin-top:80px;text-align:center}.cta-band .card{padding:64px 32px}
.footer{padding-bottom:48px}.footer-card{background:var(--meadow);border-radius:24px;padding:32px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.footer-card p{max-width:520px;margin-top:16px;font-size:14px}.footer-links{display:flex;flex-direction:column;gap:8px}.footer-links a{text-decoration:none;font-weight:500}
.footer>p{margin-top:16px}
.sample-label{font-size:14px;color:var(--slate);margin-bottom:16px}
.mini-finding{background:var(--canvas);border-radius:16px;padding:16px;margin-top:8px}
.mini-finding strong{display:block;margin-top:4px}
.share{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
code{font:14px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--canvas);padding:2px 8px;border-radius:8px}
@media (max-width:900px){h1{font-size:48px}h2{font-size:32px}.hero{grid-template-columns:1fr;padding-top:64px}.grid,.grid.four{grid-template-columns:1fr 1fr}}
@media (max-width:600px){h1{font-size:36px}h2{font-size:28px}.card{padding:24px}.grid,.grid.two,.grid.four{grid-template-columns:1fr}.navlinks a:not(.pill){display:none}.nav{padding-left:16px}
.scan-form .row{flex-direction:column;border-radius:24px}.scan-form .row .pill{width:100%}.score{font-size:48px}section{margin-top:48px}}
.nav{box-shadow:0 1px 2px rgba(19,14,48,.05),0 8px 24px -14px rgba(19,14,48,.18)}
.marquee-wrap{margin:8px 0 0;text-align:center}
.marquee-label{font-size:14px;font-weight:600;color:var(--slate);margin:0 0 12px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);padding:4px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 48s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.marquee ul{display:flex;list-style:none;margin:0;padding:0}
.marquee li{display:flex;align-items:center;font:400 28px/1.3 var(--serif);letter-spacing:-.01em;white-space:nowrap;padding:0 28px;color:var(--ink)}
.marquee li:after{content:"";width:10px;height:10px;margin-left:56px;background:linear-gradient(var(--sun),var(--sun)) center/100% 3px no-repeat,linear-gradient(var(--sun),var(--sun)) center/3px 100% no-repeat}
.marquee-note{font-size:12px;color:var(--slate);margin:12px 0 0}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes drift1{to{transform:translate(-24px,18px) rotate(4deg)}}@keyframes drift2{to{transform:translate(20px,-14px)}}@keyframes drift3{to{transform:translate(-16px,-20px) rotate(-5deg)}}
.blobs path{transform-box:fill-box;transform-origin:center}
.blobs .b1{animation:drift1 22s ease-in-out infinite alternate}.blobs .b2{animation:drift2 26s ease-in-out infinite alternate}.blobs .b3{animation:drift3 30s ease-in-out infinite alternate}
@supports (animation-timeline:view()){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}
@keyframes rise{from{opacity:.001;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;width:auto}.marquee{-webkit-mask-image:none;mask-image:none}.marquee ul{flex-wrap:wrap;justify-content:center}.marquee ul[aria-hidden]{display:none}.marquee li{font-size:22px;padding:4px 16px}.marquee li:after{margin-left:32px}.blobs path,.reveal{animation:none!important}.pill{transition:none}}
@media (max-width:600px){.marquee li{font-size:22px;padding:0 18px}.marquee li:after{margin-left:36px}.wordmark{font-size:20px}}
/* v3 motion: CSS-first; everything has a static final state for reduced motion */
@property --n{syntax:"<integer>";inherits:false;initial-value:0}
a.pill.sun:hover,button.pill.sun:hover{transform:translateY(-2px);box-shadow:0 3px 0 #d9bf12,0 12px 24px -8px rgba(19,14,48,.35)}
.demo{min-height:520px}
.demo-url{border:1.5px solid var(--ink);border-radius:999px;padding:10px 18px;font:500 15px/1.4 var(--sans,Inter,sans-serif);background:#fff;margin-bottom:16px;overflow:hidden;white-space:nowrap}
.demo-type{display:inline-block;overflow:hidden;vertical-align:bottom;border-right:2px solid var(--ink);width:29ch;animation:type 12s steps(29,end) infinite,caret 1s step-end infinite}
.demo-line,.demo-score{animation:demo-in 12s ease infinite;animation-delay:calc(var(--d,0)*.35s)}
@keyframes type{0%{width:0}22%,100%{width:29ch}}
@keyframes caret{50%{border-color:transparent}}
@keyframes demo-in{0%,24%{opacity:0;transform:translateY(8px)}30%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
.dial{--p:calc(var(--n)*1%);width:148px;height:148px;border-radius:50%;display:grid;place-content:center;text-align:center;background:radial-gradient(closest-side,#fff 78%,transparent 79%),conic-gradient(var(--ink) var(--p),#e9e6f3 0);counter-reset:n var(--n);--n:var(--s);animation:count 1.4s cubic-bezier(.2,.7,.2,1) both}
.dial-num:after{content:counter(n);font-family:var(--serif);font-size:52px;line-height:1}
.dial small{font-size:16px;color:var(--slate)}
@keyframes count{from{--n:0}}
.finding{animation:slide-in .5s ease both;animation-delay:calc(.25s + var(--i,0)*.12s)}
@keyframes slide-in{from{opacity:0;transform:translateX(-16px)}}
.checklist{list-style:none;padding-left:0!important}
.checklist li{position:relative;padding-left:30px;margin-top:6px}
.checklist li:before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;border:2px solid var(--slate);box-sizing:border-box}
.progress.on .checklist li:not(.last):before{animation:tick 0s linear forwards;animation-delay:var(--t)}
.progress.on .checklist li:not(.last){animation:done 0s linear forwards;animation-delay:var(--t)}
.checklist li.last:before{border-top-color:transparent;animation:spin .9s linear infinite}
@keyframes tick{to{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%23fff' stroke-width='2' fill='none'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--ink)}}
@keyframes done{to{color:var(--ink)}}
@keyframes spin{to{transform:rotate(360deg)}}
.blur-prompt{margin-top:12px;padding:12px 16px;border-radius:12px;background:#fff;font:13px/1.5 ui-monospace,monospace;filter:blur(4px);user-select:none;pointer-events:none}
.what-you-get .mini-finding .locked{margin-top:8px;padding:10px 16px}
.fixpack-callout .score{margin:8px 0 16px}.ticks{padding-left:20px;margin:0 0 24px}.ticks li{margin-top:6px}
@media (prefers-reduced-motion:reduce){.demo-type,.demo-line,.demo-score,.dial,.finding,.checklist li,.checklist li:before{animation:none!important}.demo-type{border-right:0;width:auto}.progress.on .checklist li.last:before{border-top-color:var(--slate)}a.pill.sun:hover,button.pill.sun:hover{transform:none}}
@media (max-width:600px){.demo{min-height:0}.dial{width:120px;height:120px}.dial-num:after{font-size:42px}}