/* Service Business 101 Type spec measured off Apple Newsroom, Linear, Vercel and Works in Progress. Per-trade theming follows The Guardian's documented rule: colour is the ONLY variable. Type scale, column, rhythm and radius never move. */ :root{ color-scheme: light dark; /* neutrals — one text colour, ~17:1 contrast, like every site measured */ --bg:#FFFFFF; --bg-2:#F7F9FC; --line:#E6EAF0; --ink:#1A2233; --ink-2:#5A6577; --ink-3:#8A94A6; /* the one variable — overridden per trade on */ --go:#2563EB; --go-soft:#EFF5FF; --stop:#C2410C; --stop-soft:#FDEEE4; --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji"; /* rhythm: paragraph gap = exactly one line-height (Apple's rule) */ --lh:1.6; --gap:1.15em; --col:820px; --r:8px; /* one radius token, like Vercel's 6px-on-61-elements */ --ease:cubic-bezier(.2,.8,.3,1); } /* ---- per-trade accent. Colour only. Nothing else changes. ---- */ [data-trade="house-cleaning"] { --go:#0A7EA4; --go-soft:#E7F4F9; } [data-trade="lawn-care"] { --go:#3F7D20; --go-soft:#EDF5E8; } [data-trade="landscaping"] { --go:#2F6B3C; --go-soft:#EAF3EC; } [data-trade="handyman"] { --go:#9A5B1C; --go-soft:#FAF0E4; } [data-trade="hvac"] { --go:#1E5F9E; --go-soft:#E9F1F9; } [data-trade="plumbing"] { --go:#1C6E8C; --go-soft:#E8F2F6; } [data-trade="electrical"] { --go:#9A6B00; --go-soft:#FBF3DF; } [data-trade="pressure-washing"] { --go:#0E7490; --go-soft:#E6F4F7; } [data-trade="carpet-cleaning"] { --go:#7A4E9E; --go-soft:#F3ECF9; } [data-trade="roofing"] { --go:#4A5568; --go-soft:#EFF1F4; } [data-trade="tree-service"] { --go:#2D6A4F; --go-soft:#E9F3EE; } [data-trade="pest-control"] { --go:#8A5A2B; --go-soft:#F7EFE6; } [data-trade="window-cleaning"] { --go:#1F6F8B; --go-soft:#E8F2F6; } [data-trade="junk-removal"] { --go:#8C4B2F; --go-soft:#F8EDE8; } [data-trade="snow-removal"] { --go:#2F6DA4; --go-soft:#E9F1F8; } [data-trade="chimney-sweep"] { --go:#8F4A22; --go-soft:#FAEFE7; } [data-trade="dumpster-rental"] { --go:#4C5BA8; --go-soft:#ECEEF9; } [data-trade="septic-pumping"] { --go:#5E6B2F; --go-soft:#F1F3E6; } [data-trade="appliance-repair"] { --go:#0F766E; --go-soft:#E6F3F1; } [data-trade="flooring"] { --go:#8A5326; --go-soft:#F8F0E7; } @media (prefers-color-scheme:dark){ :root{ --bg:#101011; --bg-2:#17171A; --line:#292A2E; --ink:#EDEDEF; --ink-2:#A6A6AC; --ink-3:#77777D; --go:#3ECF8E; --go-soft:#132A20; --stop:#FF8A6B; --stop-soft:#2A1712; } [data-trade="house-cleaning"] { --go:#4FC3E8; --go-soft:#0F2630; } [data-trade="lawn-care"] { --go:#8BD35E; --go-soft:#16250F; } [data-trade="landscaping"] { --go:#6FC38A; --go-soft:#12241A; } [data-trade="handyman"] { --go:#E3A45C; --go-soft:#2A1D0F; } [data-trade="hvac"] { --go:#6FB2F0; --go-soft:#101F2E; } [data-trade="plumbing"] { --go:#63BBD8; --go-soft:#0F2129; } [data-trade="electrical"] { --go:#E8C34E; --go-soft:#28210B; } [data-trade="pressure-washing"] { --go:#5CC6DE; --go-soft:#10242A; } [data-trade="carpet-cleaning"] { --go:#B892E0; --go-soft:#1E162B; } [data-trade="roofing"] { --go:#9AA7BC; --go-soft:#1B1F26; } [data-trade="tree-service"] { --go:#6BC79B; --go-soft:#11241B; } [data-trade="pest-control"] { --go:#D3A16A; --go-soft:#261B10; } [data-trade="window-cleaning"] { --go:#6EC0DA; --go-soft:#0F2229; } [data-trade="junk-removal"] { --go:#DE9877; --go-soft:#2A1710; } [data-trade="snow-removal"] { --go:#79B4EA; --go-soft:#12202E; } [data-trade="chimney-sweep"] { --go:#E09A69; --go-soft:#2A1B0F; } [data-trade="dumpster-rental"] { --go:#98A3E8; --go-soft:#191C2E; } [data-trade="septic-pumping"] { --go:#B0C168; --go-soft:#20240F; } [data-trade="appliance-repair"] { --go:#4FC7B8; --go-soft:#0E2523; } [data-trade="flooring"] { --go:#C99A55; --go-soft:#251A0F; } } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:18px; line-height:var(--lh); -webkit-font-smoothing:antialiased; letter-spacing:-0.011em; } @media (min-width:760px){ body{ font-size:20px; letter-spacing:0; } } img{max-width:100%;height:auto;display:block} /* ---- layout: one column, no sidebar. None of the four sites measured has one on mobile. ---- */ .wrap{max-width:var(--col);margin:0 auto;padding:0 24px} .wide{max-width:1220px;margin:0 auto;padding:0 24px} /* ---- type ---- */ h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.022em;line-height:1.15;text-wrap:balance} h1{font-size:clamp(38px,7.2vw,60px);line-height:1.08;letter-spacing:-0.028em} h2{font-size:clamp(28px,4.4vw,40px);margin:2.4em 0 .6em} h3{font-size:clamp(21px,2.6vw,26px);margin:1.8em 0 .3em} p{margin:0 0 var(--gap)} ul,ol{margin:0 0 var(--gap);padding-left:1.3em} li{margin-bottom:.5em} a{color:var(--go);text-decoration-thickness:2px;text-underline-offset:3px} a:focus-visible,button:focus-visible{outline:2px solid var(--go);outline-offset:3px;border-radius:4px} strong,b{font-weight:700;color:var(--ink)} .lead{font-size:1.22em;color:var(--ink-2);font-weight:450;margin-bottom:1.6em} .eyebrow{font-family:var(--mono);font-size:.72em;letter-spacing:.09em;text-transform:uppercase;color:var(--go);font-weight:600;margin:0 0 .5em} .small{font-size:.82em;color:var(--ink-3)} .fine{font-size:.8em;color:var(--ink-3);line-height:1.6} /* ---- header ---- */ header.top{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20} header.top .wide{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:70px} .brand{font-size:20px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);text-decoration:none} .brand span{color:var(--go)} .topnav{display:flex;gap:20px} .topnav a{font-size:16px;font-weight:700;color:var(--ink-2);text-decoration:none} .topnav a:hover{color:var(--go)} @media(max-width:680px){.topnav a:not(.keep){display:none}} /* No reading progress bar. 32 randomized experiments say constant progress indicators don't reduce abandonment, and slow-signalling ones increase it. */ /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--go);color:#fff; font:inherit;font-size:1.02em;font-weight:700;padding:17px 30px;min-height:58px;border:0;border-radius:var(--r); text-decoration:none;cursor:pointer;transition:filter .12s var(--ease),transform .12s var(--ease)} .btn:hover{filter:brightness(1.08)} .btn:active{transform:scale(.98)} .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:0 2px 8px -4px rgba(26,34,51,.14)} .btn.ghost:hover{border-color:var(--go);color:var(--go)} /* ---- article ---- */ article{padding:28px 0 16px} .crumbs{font-size:.8em;font-weight:600;color:var(--ink-3);margin-bottom:1.2em;letter-spacing:.01em} .crumbs a{color:var(--ink-3);text-decoration:none} .meta b{color:var(--ink-2)} /* the answer, up top — no card, just a rule and the accent (Apple separates with rhythm, not boxes) */ .answer{border-left:6px solid var(--go);padding-left:26px;margin:0 0 2em} .answer .big{font-size:1.5em;font-weight:700;letter-spacing:-0.024em;line-height:1.2;margin-bottom:.4em} .answer p:last-child{margin-bottom:0} /* real example */ .example{background:var(--go-soft);padding:26px 28px;font-weight:450;border-radius:var(--r);margin:2em 0} .example p:last-child{margin-bottom:0} .warn{background:var(--stop-soft);padding:26px 28px;font-weight:450;border-radius:var(--r);margin:2em 0} .warn p:last-child{margin-bottom:0} .warn b{color:var(--stop)} /* checklist */ .check{list-style:none;padding:0;margin:1.6em 0} .check li{position:relative;padding:.85em 0 .85em 2em;border-bottom:1px solid var(--line);margin:0;font-weight:500} .check li:first-child{border-top:1px solid var(--line)} .check li::before{content:"✓";position:absolute;left:0;top:.8em;color:#fff;background:var(--go);width:1.35em;height:1.35em;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:.8em;font-weight:800} /* tables — full bleed to the gutter on mobile, like Apple's figures */ .scroll{overflow-x:auto;margin:1.8em -24px;padding:0 24px;-webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%;min-width:460px;font-size:.88em} caption{text-align:left;font-size:.82em;color:var(--ink-3);padding-bottom:.7em} th,td{text-align:left;padding:.7em .8em;border-bottom:1px solid var(--line)} th{font-weight:700;background:var(--bg-2);white-space:nowrap} td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} tbody tr:last-child td{border-bottom:0} /* FAQ */ .faq{margin:1.6em 0} .faq details{border-bottom:1px solid var(--line)} .faq details:first-of-type{border-top:1px solid var(--line)} .faq summary{cursor:pointer;list-style:none;padding:1.1em 2em 1.1em 0;position:relative; font-weight:800;font-size:1.06em;min-height:52px;display:flex;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:.2em;font-weight:400;color:var(--go);font-size:1.4em} .faq details[open] summary::after{content:"–"} .faq .a{padding:0 0 1em;color:var(--ink-2)} .faq .a p:last-child{margin-bottom:0} /* next reads */ .next{margin:2.6em 0 1em;border-top:1px solid var(--line)} .next a{display:block;padding:1.3em 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink); font-weight:700;letter-spacing:-0.018em} .next a:hover{color:var(--go)} .next a span{display:block;font-size:.85em;font-weight:400;color:var(--ink-2);margin-top:.15em;letter-spacing:0} /* share — sits after the valuable moment, not stuck to the screen */ .share{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--line); color:var(--ink-2);font:inherit;font-size:.9em;font-weight:600;padding:12px 22px;min-height:48px; border-radius:999px;cursor:pointer;transition:border-color .12s var(--ease)} .share:hover{border-color:var(--go);color:var(--go)} /* trade index */ .industries{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:0 26px;margin:1.2em 0;max-width:1000px} .industry{display:block;padding:.85em 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)} .industry:hover .name{color:var(--go)} .industry .name{font-size:.98em;font-weight:700;letter-spacing:-0.02em;display:flex;align-items:center;gap:.5em} .industry .name i{font-family:var(--emoji);font-style:normal} .industry .rate{font-family:var(--mono);font-size:.76em;color:var(--ink-3);margin-top:.1em;display:block} .industry .arts{display:none} footer{border-top:1px solid var(--line);margin-top:3em;padding:2em 0 3.4em} footer a{color:var(--ink-2);font-size:.85em} @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ============================================================ v2 COMPONENTS — rhythm, stats, steps, cards, columns. The page should never be one endless white scroll. ============================================================ */ /* full-width bands so the page has sections instead of a wall */ .band{padding:56px 0;margin:0} .band.tint{background:var(--go-soft)} .band.dark{background:var(--ink);color:#fff} .band.dark h2,.band.dark h3{color:#fff} .band.dark p{color:rgba(255,255,255,.78)} .band.grey{background:var(--bg-2)} .band + .band{border-top:0} .band .inner{max-width:var(--col);margin:0 auto;padding:0 24px} .band .innerwide{max-width:1220px;margin:0 auto;padding:0 24px} /* hero with the trade art */ .hero-art{position:relative;background:var(--go-soft);padding:0;overflow:hidden} .hero-art svg{width:100%;height:auto;display:block;max-height:260px;object-fit:cover} .hero-head{max-width:var(--col);margin:0 auto;padding:34px 24px 0} .hero-head h1{margin-bottom:.4em} .hero-head .kicker{font-family:var(--mono);font-size:.72em;letter-spacing:.1em;text-transform:uppercase; color:var(--go);font-weight:700;margin-bottom:.8em} /* THE STAT BAND — numbers as the design, not prose */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0; border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0;background:var(--bg-2)} .stat{padding:26px 22px;border-right:1px solid var(--line)} .stat:last-child{border-right:0} .stat .n{font-size:clamp(30px,4.6vw,44px);font-weight:800;letter-spacing:-0.04em;line-height:1; font-variant-numeric:tabular-nums;display:block} .stat .u{font-size:.78em;color:var(--ink-3);margin-top:.5em;display:block;line-height:1.35} .stat.hot .n{color:var(--go)} @media(max-width:620px){.stat{border-right:0;border-bottom:1px solid var(--line);padding:20px 22px} .stat:last-child{border-bottom:0}} /* numbered steps — visible progression */ .steps{counter-reset:st;margin:1.6em 0} .step{counter-increment:st;position:relative;padding:0 0 30px 62px} .step:last-child{padding-bottom:0} .step::before{content:counter(st);position:absolute;left:0;top:-2px;width:42px;height:42px; border-radius:50%;background:var(--go);color:#fff;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:1.05em} .step::after{content:"";position:absolute;left:20px;top:46px;bottom:8px;width:2px;background:var(--line)} .step:last-child::after{display:none} .step h3{margin:0 0 .3em} .step p{margin-bottom:.6em} /* card grid — real columns */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:1.6em 0} .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px} .band.tint .card{background:#fff} .card .big{font-family:var(--mono);font-size:1.7em;font-weight:700;color:var(--go); letter-spacing:-0.03em;display:block;margin-bottom:.35em;font-variant-numeric:tabular-nums} .card h3{font-size:1.02em;margin:0 0 .3em} .card p{font-size:.88em;color:var(--ink-2);margin:0} @media (prefers-color-scheme:dark){.card,.band.tint .card{background:var(--bg-2)}} /* pull number — a single figure as a design element */ .pull{border-left:4px solid var(--go);padding:6px 0 6px 24px;margin:1.8em 0} .pull .n{font-size:clamp(38px,7vw,64px);font-weight:800;letter-spacing:-0.045em;line-height:.95; display:block;font-variant-numeric:tabular-nums} .pull p{margin:.5em 0 0;font-size:1.02em;color:var(--ink-2)} /* CTA panel */ .cta{background:var(--ink);color:#fff;border-radius:20px;padding:34px 32px;margin:2em 0} .cta h3{color:#fff;font-size:clamp(23px,3.2vw,30px);margin:0 0 .4em} .cta p{color:rgba(255,255,255,.75);margin:0 0 1.2em} .cta .row{display:flex;gap:12px;flex-wrap:wrap} .cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.35)} .cta .btn.ghost:hover{border-color:#fff;color:#fff} /* next-reads as a 3-column card grid with art */ .reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:1.6em 0} .read{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--line); border-radius:16px;overflow:hidden;transition:transform .14s var(--ease),border-color .14s var(--ease)} .read:hover{transform:translateY(-3px);border-color:var(--go)} .read svg{width:100%;height:110px;display:block} .read .body{padding:18px 20px} .read .t{font-weight:700;letter-spacing:-0.02em;display:block;margin-bottom:.25em;line-height:1.25} .read .d{font-size:.85em;color:var(--ink-2);display:block} /* inline emphasised figure inside prose */ .fig{font-family:var(--mono);font-weight:700;color:var(--go);font-variant-numeric:tabular-nums; white-space:nowrap} /* ============================================================ TOOLS — the actual product. Free web versions of the features the $200/month software sells. ============================================================ */ .toolgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;margin:1.8em 0} .tool-card{ display:flex;flex-direction:column;text-decoration:none;color:var(--ink); border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff; transition:transform .14s var(--ease),box-shadow .14s var(--ease)} .tool-card:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--go)} .tool-card .top{background:var(--go);color:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px} .tool-card .top .ico{font-family:var(--emoji);font-size:26px;line-height:1} .tool-card .top .tag{font-family:var(--mono);font-size:.66em;font-weight:700;letter-spacing:.08em; text-transform:uppercase;background:rgba(255,255,255,.22);padding:5px 9px;border-radius:999px} .tool-card .body{padding:20px;flex:1;display:flex;flex-direction:column} .tool-card h3{font-size:1.15em;margin:0 0 .3em;line-height:1.2} .tool-card p{font-size:.86em;color:var(--ink-2);margin:0 0 1em;flex:1} .tool-card .go{font-weight:800;font-size:.9em;color:var(--go)} .tool-card.soon{opacity:.62} .tool-card.soon .top{background:var(--ink-3)} .tool-card.soon:hover{transform:none;box-shadow:none} @media (prefers-color-scheme:dark){.tool-card{background:var(--bg-2)}} /* the pitch band — what these tools replace */ .versus{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--ink);border-radius:18px;overflow:hidden;margin:1.8em 0} .versus > div{padding:26px 24px} .versus .them{background:var(--bg-2)} .versus .us{background:var(--go);color:#fff} .versus h3{margin:0 0 .5em;font-size:1.05em} .versus .us h3{color:#fff} .versus .price{font-size:2em;font-weight:800;letter-spacing:-0.04em;display:block;margin-bottom:.2em;font-variant-numeric:tabular-nums} .versus ul{margin:.6em 0 0;padding-left:1.1em;font-size:.88em} .versus li{margin-bottom:.35em} .versus .us p,.versus .us li{color:rgba(255,255,255,.9)} @media(max-width:620px){.versus{grid-template-columns:1fr}} /* section heading with a rule */ .rulehead{display:flex;align-items:baseline;gap:16px;margin:0 0 .8em} .rulehead h2{margin:0;white-space:nowrap} .rulehead .line{flex:1;height:1px;background:var(--line)} .rulehead .count{font-family:var(--mono);font-size:.8em;font-weight:700;color:var(--go)} /* ============================================================ TOOL PAGES — the tool is the page. It sits at the top, above any words. Words are optional; the tool is not. ============================================================ */ .toolwrap{max-width:900px;margin:0 auto;padding:0 24px} .toolhead{padding:34px 0 22px} .toolhead h1{font-size:clamp(32px,5.6vw,46px);margin-bottom:.3em} .toolhead p{font-size:1.08em;color:var(--ink-2);max-width:46ch;margin:0} .panel{border:1px solid var(--line);box-shadow:0 4px 20px -8px rgba(26,34,51,.12);border-radius:20px;overflow:hidden;margin:0 0 30px;background:#fff} @media (prefers-color-scheme:dark){.panel{background:var(--bg-2)}} .panel .phead{background:var(--ink);color:#fff;padding:15px 24px;font-weight:800;font-size:1.02em; display:flex;align-items:center;justify-content:space-between;gap:12px} .panel .phead .ico{font-family:var(--emoji);font-size:22px} .panel .pbody{padding:26px 24px} .field{margin-bottom:18px} .field label{display:block;font-size:.82em;font-weight:800;letter-spacing:.02em;margin-bottom:6px;color:var(--ink)} .field .hint{font-size:.78em;color:var(--ink-3);font-weight:500;margin-top:5px;display:block} .field input,.field select,.field textarea{ width:100%;font:inherit;font-size:1.05em;font-weight:600;padding:15px 16px; border:2px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);min-height:56px} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--go);background:var(--go-soft)} .field textarea{min-height:110px;resize:vertical;font-weight:500} .f2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .f3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0 16px} /* the result — always big, always the point */ .result{background:var(--go);color:#fff;padding:30px 24px;text-align:center} .result .n{font-size:clamp(44px,10vw,74px);font-weight:800;letter-spacing:-0.045em;line-height:1; display:block;font-variant-numeric:tabular-nums} .result .cap{font-size:.9em;opacity:.85;margin-top:.55em;display:block;font-weight:600} .result.bad{background:var(--stop)} .result .sub{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:20px; padding-top:18px;border-top:1px solid rgba(255,255,255,.28)} .result .sub div{text-align:center} .result .sub .v{font-size:1.35em;font-weight:800;display:block;font-variant-numeric:tabular-nums} .result .sub .k{font-size:.74em;opacity:.8;font-weight:600} .breakdown{margin:0} .breakdown .r{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums;font-size:.95em} .breakdown .r:last-child{border-bottom:0} .breakdown .r.tot{font-weight:800;border-top:2px solid var(--ink);border-bottom:0;font-size:1.05em;padding-top:15px} .breakdown .r span:first-child{color:var(--ink-2)} .breakdown .r.neg span:last-child{color:var(--stop)} .verdict{padding:20px 24px;font-weight:600;border-top:2px solid var(--ink)} .verdict.good{background:var(--go-soft)} .verdict.warn{background:var(--stop-soft)} /* list-style tools (customers, mileage, schedule) */ .rows{border-top:2px solid var(--ink)} .rowitem{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center; padding:14px 0;border-bottom:1px solid var(--line)} .rowitem .main{min-width:0} .rowitem .main b{display:block;font-size:1.02em} .rowitem .main small{color:var(--ink-3);font-size:.82em} .rowitem .amt{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .rowitem .del{background:none;border:0;color:var(--ink-3);font-size:1.3em;cursor:pointer;padding:6px 4px;line-height:1} .rowitem .del:hover{color:var(--stop)} .empty{padding:34px 4px;text-align:center;color:var(--ink-3);font-weight:600} .toolnav{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px} .toolnav a{font-size:.85em;font-weight:700;text-decoration:none;color:var(--ink-2); border:2px solid var(--line);border-radius:999px;padding:8px 15px} .toolnav a:hover,.toolnav a[aria-current]{border-color:var(--go);color:var(--go)} .outro{border-top:3px solid var(--ink);margin-top:38px;padding-top:26px} /* ---- real footer ---- */ footer{border-top:1px solid var(--line);margin-top:56px;padding:44px 0 56px;background:var(--bg-2)} .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px;margin-bottom:32px} .fgrid h4{font-size:.78em;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--ink);margin:0 0 12px;font-family:var(--mono)} .fgrid a{display:block;padding:5px 0;font-size:.92em;font-weight:600;color:var(--ink-2);text-decoration:none} .fgrid a:hover{color:var(--go)} .fcta{background:var(--ink);color:#fff;border-radius:16px;padding:26px 24px;margin-bottom:30px; display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .fcta div{flex:1;min-width:240px} .fcta b{display:block;font-size:1.2em;margin-bottom:.25em} .fcta p{color:rgba(255,255,255,.75);margin:0;font-size:.92em} /* ============================================================ NAV — one header, dropdowns, mobile drawer. Built by build.py. ============================================================ */ .navtoggle{display:none;background:none;border:2px solid var(--ink);border-radius:10px; font-size:20px;line-height:1;padding:8px 12px;cursor:pointer;color:var(--ink)} .topnav{display:flex;align-items:center;gap:4px} .topnav > a,.dropbtn{ font:inherit;font-size:.82em;font-weight:700;color:var(--ink);text-decoration:none; background:none;border:0;cursor:pointer;padding:10px 13px;border-radius:9px;white-space:nowrap; display:inline-flex;align-items:center;gap:5px} .topnav > a:hover,.dropbtn:hover{background:var(--go-soft);color:var(--go)} .drop{position:relative} .dropmenu{ display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:80; background:var(--bg);border:2px solid var(--ink);border-radius:16px;padding:10px; min-width:290px;box-shadow:0 14px 34px rgba(0,0,0,.14)} .drop.open .dropmenu{display:block} .dropmenu.wide2{column-count:2;column-gap:6px;min-width:470px} .dropmenu a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px; font-size:.88em;font-weight:650;color:var(--ink);text-decoration:none;break-inside:avoid} .dropmenu a:hover{background:var(--go-soft);color:var(--go)} .dropmenu a i{font-family:var(--emoji);font-style:normal;font-size:17px;flex:none} .dropmenu a.all{margin-top:6px;border-top:2px solid var(--line);border-radius:0 0 9px 9px; color:var(--go);font-weight:800} @media(max-width:900px){ .navtoggle{display:block} header.top .wide{flex-wrap:wrap} .topnav{display:none;flex-direction:column;align-items:stretch;width:100%; gap:0;padding:10px 0 16px;border-top:2px solid var(--line);margin-top:12px} .topnav.open{display:flex} .topnav > a,.dropbtn{width:100%;justify-content:space-between;font-size:1em;padding:14px 6px; border-bottom:1px solid var(--line);border-radius:0} .dropmenu,.dropmenu.wide2{position:static;display:none;border:0;box-shadow:none;padding:4px 0 10px; min-width:0;column-count:1;background:var(--bg-2);border-radius:10px} .drop.open .dropmenu{display:block} .dropmenu a{font-size:.95em;padding:11px 14px} } /* tool cards — literal titles, no status tags */ .tool-card .top{justify-content:flex-start} .tool-card .top .tag{display:none} .tool-card.soon{opacity:1} .tool-card.soon .top{background:var(--go)} .tool-card.soon:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--go)} /* narrower tool column — short labels don't need a wide box */ .toolwrap.narrowtool{max-width:620px} /* the embed slot */ .embedslot{border:2px dashed var(--line);border-radius:14px;padding:38px 22px;text-align:center; color:var(--ink-3);background:var(--bg-2)} .embedslot b{display:block;font-size:1.05em;color:var(--ink-2);margin-bottom:.3em} .embedslot span{font-size:.85em} /* ---- email capture, attached to the footer, overflowing into content ---- */ .signup{max-width:1220px;margin:0 auto;padding:0 24px;position:relative;top:60px;z-index:5} .signup .inner2{background:var(--ink);color:#fff;border-radius:22px;padding:34px 34px; display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center; box-shadow:0 18px 40px -18px rgba(20,26,36,.5)} .signup h3{color:#fff;font-size:clamp(23px,3vw,30px);margin:0 0 .3em;letter-spacing:-0.03em} .signup p{color:rgba(255,255,255,.72);margin:0;font-size:.94em} .signup form{display:flex;gap:10px;flex-wrap:wrap} .signup input{flex:1;min-width:190px;font:inherit;font-size:1em;font-weight:600;padding:15px 17px; border:2px solid transparent;border-radius:12px;background:#fff;color:var(--ink);min-height:56px} .signup input:focus{outline:0;border-color:var(--go)} .signup .btn{background:var(--go);min-height:56px;padding:15px 26px} .signup .np{font-size:.78em;color:rgba(255,255,255,.55);margin-top:10px;flex-basis:100%} footer{padding-top:96px} @media(max-width:760px){.signup .inner2{grid-template-columns:1fr;padding:26px 22px}} /* colour fields so it stops reading like a document */ .band.tint{background:var(--go-soft)} .band.dark{background:var(--ink)} .stat.hot .n{color:var(--go)} /* ============================================================ HUB CARDS — soft icon circle, white card, gentle shadow. Each category owns a colour. ============================================================ */ .hubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin:2em 0} .hub{ display:flex;flex-direction:column;align-items:flex-start;text-align:left; background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 26px 24px; text-decoration:none;color:var(--ink); box-shadow:0 6px 24px -12px rgba(26,34,51,.16); transition:transform .16s var(--ease),box-shadow .16s var(--ease)} .hub:hover{transform:translateY(-5px);box-shadow:0 16px 36px -14px rgba(26,34,51,.24)} .hub .head{display:flex;align-items:center;gap:15px;margin-bottom:14px} .hub .circle{ width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--emoji);font-size:26px;line-height:1;flex:none} .hub h3{font-size:1.16em;margin:0;letter-spacing:-0.022em;line-height:1.2} .hub p{font-size:.9em;color:var(--ink-2);margin:0 0 1.3em;line-height:1.5;flex:1} .hub .go{font-weight:700;font-size:.92em;display:inline-flex;align-items:center;gap:7px} .hub.c1 .circle{background:#E8F0FE} .hub.c1 .go{color:#2563EB} .hub.c2 .circle{background:#E6F6EE} .hub.c2 .go{color:#0E9F6E} .hub.c3 .circle{background:#FEF3E2} .hub.c3 .go{color:#E08700} .hub.c4 .circle{background:#F0EBFE} .hub.c4 .go{color:#7C4DE0} /* nav CTA button */ .topnav .navcta{background:var(--go);color:#fff;border-radius:10px;padding:11px 22px;font-weight:700} .topnav .navcta:hover{background:#1D4ED8;color:#fff} /* softer tool cards */ .tool-card{box-shadow:0 4px 18px -10px rgba(26,34,51,.14)} .tool-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -12px rgba(26,34,51,.22)} .tool-card .top{background:var(--bg-2);color:var(--ink);padding:20px 20px 0;border:0} .tool-card .top .ico{font-size:30px;background:var(--go-soft);width:56px;height:56px;border-radius:14px; display:flex;align-items:center;justify-content:center} .tool-card .go{color:var(--go)} /* hero band with soft gradient instead of flat white */ .softhero{background:linear-gradient(180deg,#F7FAFF 0%,#FFFFFF 100%);padding:52px 0 8px}