/* Free website check (check.html, 17 Oct 2026). Same paper, ink, lime and coral as the home page, without its 47 KB
   stylesheet, so the page Google tests for speed stays light. */
@font-face{font-family:Anton;src:url('assets/fonts/anton-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('assets/fonts/dm-serif-display-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('assets/fonts/dm-sans-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
:root{--bg:#eee9dc;--paper:#f6f4ea;--ink:#171719;--muted:#5b5654;--line:#17171940;--lime:#d4ed5c;--purple:#6e35cd;--coral:#ff795d;--red:#b3261e;--amber:#8a5300;--green:#1d6b35;--pad:clamp(20px,4vw,64px);--sans:'DM Sans',Arial,sans-serif;--serif:'DM Serif Display',Georgia,serif;--display:Anton,'Arial Narrow',Impact,sans-serif;--grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:10;background-image:var(--grain);opacity:.075}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.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}
.skip-link{position:fixed;left:18px;top:12px;z-index:20;padding:12px 18px;background:var(--lime);color:var(--ink);transform:translateY(-150%)}
.skip-link:focus{transform:none}
.hp{display:none}
[hidden]{display:none !important}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.opt{font-family:var(--sans);font-size:.55em;color:var(--muted);letter-spacing:0;white-space:nowrap}

/* Header and footer */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1400px;margin:0 auto;padding:20px var(--pad)}
.brand{display:inline-flex;align-items:center;min-height:44px}
.brand-logo{display:block;position:relative;width:174px;aspect-ratio:1755/287;background:var(--ink);-webkit-mask:url('assets/tom-keddie-logo-480.webp') center/contain no-repeat;mask:url('assets/tom-keddie-logo-480.webp') center/contain no-repeat;-webkit-mask-image:image-set(url('assets/tom-keddie-logo-480.webp') 1x,url('assets/tom-keddie-logo-960.webp') 2x);mask-image:image-set(url('assets/tom-keddie-logo-480.webp') 1x,url('assets/tom-keddie-logo-960.webp') 2x)}
.brand-logo::after{content:'';position:absolute;left:83.1%;top:0;width:4.3%;height:25%;background:#b5f928}
.top-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.top-link:hover{color:var(--purple)}
.ico{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px;max-width:1400px;margin:0 auto;padding:18px var(--pad) 28px;font-size:13px;color:var(--muted)}
.foot a{display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--ink)}
main{max-width:1400px;margin:0 auto;padding:0 var(--pad)}

/* Intro: heading, then the form, then what you get. Desktop puts the form on the right. */
.intro{display:grid;grid-template-areas:"copy" "card" "gets";gap:32px;padding:20px 0 72px}
.intro-copy{grid-area:copy;container-type:inline-size;min-width:0}
.card{grid-area:card;min-width:0}
.gets{grid-area:gets}
.intro h1{margin-top:18px;font-weight:400}
.h-word{display:block;font-family:var(--display);font-size:min(15.2cqw,140px);line-height:.95;letter-spacing:-.005em;white-space:nowrap}
.h-word .dot{color:var(--coral)}
.h-strip{display:inline-block;margin-top:12px;padding:4px 16px 8px 12px;background:var(--lime);font-family:var(--serif);font-size:min(7.6cqw,58px);line-height:1.15;letter-spacing:-.02em;transform:rotate(-1.4deg);transform-origin:left center}
.lede{margin-top:26px;font-size:clamp(18px,1.7vw,21px);line-height:1.55;max-width:32em}
.gets{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gets li{display:flex;gap:12px;align-items:flex-start;font-weight:600;line-height:1.45}
.gets li::before{content:'';flex:none;width:22px;height:22px;margin-top:1px;border:2px solid var(--ink);background:var(--lime) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' fill='none' stroke='%23171719' stroke-width='2.4'/></svg>") center/14px no-repeat}
@media(min-width:1080px){
  .intro{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"copy card" "gets card";grid-template-rows:auto 1fr;column-gap:clamp(48px,5vw,88px);row-gap:36px;padding-top:44px;align-items:start}
}

/* The question card */
.card{background:var(--paper);border:2px solid var(--ink);padding:clamp(22px,3vw,36px)}
.qf-count{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.qf-count:empty{display:none}
.qf-step{border:0;margin:0;padding:0;min-width:0}
form.qf:not(.qf-js) .qf-step+.qf-step{margin-top:28px}
.qf-step legend{font:400 clamp(26px,2.4vw,34px)/1.15 var(--serif);letter-spacing:-.01em;padding:0;margin:0 0 16px}
.field{display:grid;gap:7px;min-width:0;margin:0 0 16px}
.field label{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.field label .opt{font-size:12px;text-transform:none;letter-spacing:0}
.field input{font:inherit;font-size:17px;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:0;padding:14px;width:100%;min-width:0;appearance:none;-webkit-appearance:none}
.field input::placeholder{color:#77716c}
.field input:focus-visible{outline:3px solid var(--purple);outline-offset:2px}
.hint{font-size:15px;color:var(--muted);margin:-4px 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.chips label{position:relative;display:block}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:block;font-size:15px;line-height:1.3;padding:10px 14px;border:2px solid var(--ink);background:#fff;cursor:pointer}
.chips input:checked+span{background:var(--ink);color:var(--paper)}
.chips input:focus-visible+span{outline:3px solid var(--purple);outline-offset:2px}
.qf-nav,.qf-end{display:flex;align-items:center;gap:12px;margin-top:4px}
.qf-nav .btn,.qf-end>.btn{flex:1}
.back{flex:none;min-height:44px;padding:10px 4px;background:none;border:0;font:700 16px/1 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.form-note{font-size:14px;color:var(--muted);margin-top:16px}

/* Buttons: the home page's torn paint button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:56px;padding:16px 26px;border:0;background:var(--coral);color:#141414;font:400 21px/1 var(--serif);text-decoration:none;cursor:pointer;clip-path:polygon(2% 15%,4% 8%,11% 3%,18% 5%,28% 0,43% 5%,63% 3%,80% 5%,94% 9%,98% 17%,97% 25%,100% 42%,98% 50%,99% 71%,96% 85%,88% 95%,68% 96%,53% 100%,37% 96%,17% 98%,6% 93%,2% 84%,0 66%,2% 51%,0 36%);transition:transform .2s,background .2s}
.btn:hover{background:#ff9a7e;transform:translateY(-2px)}
.btn svg{width:26px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#3a2a5c}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}

/* While it runs, the card shows what is being checked */
.checking-site{margin-top:8px;font:400 clamp(28px,2.6vw,38px)/1.15 var(--serif);overflow-wrap:anywhere}
.checking-about{margin-top:6px;color:var(--muted)}
.checking-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}

/* Results */
.results{border-top:2px solid var(--ink);padding:40px 0 72px}
.results:focus-within h2:focus{outline:none}
.results-head h2{margin-top:10px;font:400 clamp(34px,4.6vw,66px)/1.05 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere}
.results-head h2:focus{outline:none}
.score-row{display:grid;gap:32px;margin-top:30px}
@media(min-width:860px){.score-row{grid-template-columns:minmax(0,1fr) 250px;align-items:start}}
.score-card{background:var(--paper);border:2px solid var(--ink);padding:clamp(22px,3vw,36px);min-width:0}
.score{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.score-num{font:400 clamp(92px,11vw,150px)/.9 var(--serif);letter-spacing:-.03em}
.score-of{font:400 28px/1 var(--serif);color:var(--muted)}
.band{display:inline-block;margin-top:14px;padding:6px 12px;font-size:13px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#fff}
.band.red{background:var(--red)}.band.amber{background:var(--amber)}.band.green{background:var(--green)}
.score-line{margin-top:18px;font:400 clamp(21px,2vw,26px)/1.3 var(--serif);max-width:30em}
.score-small{margin-top:12px;font-size:15px;color:var(--muted);max-width:40em}
.run-own{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:8px;font-weight:700;text-underline-offset:3px}
.score-wait{font:400 clamp(24px,2.4vw,32px)/1.25 var(--serif)}
.bar{position:relative;height:6px;margin-top:20px;background:#17171920;overflow:hidden}
.bar::after{content:'';position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--ink);animation:bar 1.6s ease-in-out infinite}
@keyframes bar{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.phone-shot{margin:0;justify-self:center;width:min(250px,72vw)}
.phone{border:9px solid var(--ink);border-radius:30px;overflow:hidden;background:#fff}
.phone img{width:100%}
.phone-shot figcaption{margin-top:10px;font-size:14px;color:var(--muted);text-align:center}
.film{margin-top:36px}
.frames{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px;max-width:760px}
.frames li{display:grid;gap:6px;font-size:13px;color:var(--muted);text-align:center;min-width:0}
.frames img{width:100%;border:1px solid var(--ink);background:#fff}
.fixes{margin-top:56px}
.sub{font:400 clamp(30px,3.2vw,44px)/1.1 var(--serif);letter-spacing:-.01em}
.wait{margin-top:16px;color:var(--muted)}
.fix-list{list-style:none;margin:20px 0 0;padding:0;border-top:2px solid var(--ink);counter-reset:fix;max-width:900px}
.fix-list:empty{display:none}
.fix{counter-increment:fix;display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.fix::before{content:counter(fix);grid-row:1 / span 3;width:52px;height:52px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--lime);font:400 28px/1 var(--display)}
.fix h4{margin:2px 0 0;font:700 19px/1.35 var(--sans)}
.fix p{margin-top:6px}
.fix .why{color:var(--muted)}
.fix .how{font-weight:600}
.note{margin-top:16px;font-size:15px;color:var(--muted);max-width:44em}
.passed-wrap{margin-top:30px}
.passed{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.passed li{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid var(--ink);background:var(--paper);font-size:15px;font-weight:600;line-height:1.3}
.passed li::before{content:'';flex:none;width:12px;height:12px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8.5l4 4 8-9' fill='none' stroke='%231d6b35' stroke-width='3'/></svg>") center/contain no-repeat}
.honest{margin-top:28px;font-size:15px;color:var(--muted);max-width:44em}

/* The free demo offer */
.offer{display:grid;gap:28px;margin-top:56px;padding:clamp(24px,4vw,56px);background:var(--ink);color:var(--paper)}
@media(min-width:960px){.offer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:start}}
.offer h3{font:400 clamp(36px,4vw,58px)/1.05 var(--serif);letter-spacing:-.02em}
.offer-copy p{margin-top:14px;font-size:18px;max-width:30em}
.offer-terms{font-weight:700}
.offer-price{font-size:15px !important;color:#cfcabd}
.offer .field label{color:var(--paper)}
.offer .field label .opt{color:#cfcabd}
.offer .field input{border-color:var(--paper)}
.offer .field input:focus-visible{outline-color:var(--lime)}
.offer .btn{width:100%;margin-top:4px}
.offer .form-note{color:#cfcabd}
.offer :focus-visible{outline-color:var(--lime)}
.demo-status{margin-top:14px;font-weight:700}
.demo-status:empty{display:none}
.demo.sent .field,.demo.sent .btn,.demo.sent .form-note{display:none}
.demo.sent .demo-status{margin-top:0;font:400 clamp(26px,2.6vw,36px)/1.25 var(--serif)}
.again-row{margin-top:24px}

/* Questions */
.faq{border-top:2px solid var(--ink);padding:56px 0 80px}
.faq h2{font:400 clamp(36px,4vw,58px)/1.05 var(--serif);letter-spacing:-.02em}
.faq-list{display:grid;margin-top:24px;border-top:1px solid var(--line)}
@media(min-width:900px){.faq-list{grid-template-columns:1fr 1fr;column-gap:56px}}
.faq-item{padding:22px 0;border-bottom:1px solid var(--line)}
.faq-item h3{font:700 19px/1.35 var(--sans)}
.faq-item p{margin-top:8px;color:var(--muted)}

@media(max-width:600px){.brand-logo{width:150px}.top{padding-top:16px;padding-bottom:16px}.btn{font-size:19px;padding:15px 20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.bar::after{animation:none;left:35%}.btn,.btn:hover{transition:none;transform:none}}