:root { --ink:#14231e; --muted:#60706a; --cream:#f7f5ee; --paper:#fffdf8; --green:#176b4d; --green-dark:#0e4d37; --mint:#dceee5; --line:#dfe5df; --amber:#c9822b; --shadow:0 24px 70px rgba(28,52,43,.11); font-family:'Segoe UI',Arial,sans-serif; color:var(--ink); background:var(--paper); color-scheme:light; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:var(--paper); font-size:16px; line-height:1.55; }
a { color:inherit; }
button,input,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.skip-link { position:fixed; z-index:100; left:16px; top:-80px; background:#fff; padding:12px 16px; border-radius:8px; box-shadow:var(--shadow); }
.skip-link:focus { top:16px; }
.disclosure-bar { background:#143d30; color:#e8f4ee; text-align:center; padding:8px 20px; font-size:.82rem; }
.disclosure-bar a { font-weight:700; text-underline-offset:3px; }
.site-header { width:min(1180px,calc(100% - 40px)); height:84px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:-.035em; }
.brand > span:last-child > span { color:var(--green); }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:12px 12px 12px 4px; background:var(--green); color:#fff; font-size:.72rem; letter-spacing:-.03em; }
.main-nav { display:flex; align-items:center; gap:32px; margin-left:auto; }
.main-nav a { color:#43544e; text-decoration:none; font-size:.92rem; font-weight:600; }
.main-nav a:hover { color:var(--green); }
.nav-cta { border:1px solid var(--green); border-radius:999px; padding:10px 18px; color:var(--green); text-decoration:none; font-weight:700; font-size:.9rem; }
.hero { min-height:640px; padding:72px max(24px,calc((100vw - 1180px)/2)) 88px; background:linear-gradient(115deg,#f4f1e8 0%,#faf9f4 58%,#edf4ef 100%); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(390px,.8fr); gap:86px; align-items:center; border-top:1px solid #ebe8df; }
.eyebrow { margin:0 0 13px; color:var(--green); text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:.76rem; }
.hero h1,.section-heading h2,.results-heading h2,.trust-copy h2,.category-strip h2 { font-family:Georgia,'Times New Roman',serif; letter-spacing:-.045em; line-height:1.03; }
.hero h1 { max-width:720px; margin:0; font-size:clamp(3.3rem,6vw,6rem); }
.hero h1 em { color:var(--green); font-style:normal; }
.hero-lede { max-width:630px; margin:27px 0 32px; color:#53645e; font-size:1.2rem; line-height:1.65; }
.hero-actions,.trust-points,.form-actions,.card-actions,.trust-links { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:16px; border:0; border-radius:9px; padding:13px 20px; text-decoration:none; font-weight:800; cursor:pointer; transition:transform .18s,box-shadow .18s,background .18s; }
.button:hover { transform:translateY(-1px); }
.button:focus-visible,.nav-cta:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(23,107,77,.25); outline-offset:3px; }
.button.primary { color:#fff; background:var(--green); box-shadow:0 10px 24px rgba(23,107,77,.18); }
.button.primary:hover { background:var(--green-dark); }
.button.secondary { color:var(--ink); background:#fff; border:1px solid var(--line); }
.button:disabled { opacity:.6; cursor:wait; transform:none; }
.text-link { color:var(--green); font-weight:700; text-underline-offset:4px; }
.trust-points { margin-top:34px; color:#52645d; font-size:.9rem; gap:24px; }
.trust-points span::first-letter { color:var(--green); }
.hero-proof { position:relative; background:#fff; border:1px solid #e5e4db; border-radius:20px; padding:25px; box-shadow:var(--shadow); transform:rotate(1.2deg); }
.hero-proof::before { content:''; position:absolute; inset:12px -12px -12px 12px; border:1px solid #cfded4; border-radius:20px; z-index:-1; background:#edf4ef; }
.paper-kicker { padding-bottom:18px; margin-bottom:8px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.mini-result { display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:12px; padding:17px 4px; border-bottom:1px solid #edf0ed; }
.mini-result.featured { background:#f1f7f3; margin:8px -12px 0; padding:17px 12px; border-radius:11px; border:1px solid #d8e9df; }
.mini-rank { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#e8eee9; font-weight:800; }
.featured .mini-rank { color:#fff; background:var(--green); }
.mini-result div { display:grid; }
.mini-result small { color:var(--green); font-size:.63rem; font-weight:800; letter-spacing:.1em; }
.mini-result strong { font-size:.94rem; }
.mini-result div span { color:var(--muted); font-size:.77rem; }
.mini-result b { color:var(--green); }
.proof-note { display:flex; gap:9px; margin:18px 0 0; color:var(--muted); font-size:.76rem; }
.category-strip { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:84px 0; }
.category-strip > div:first-child { display:flex; align-items:end; justify-content:space-between; gap:30px; }
.category-strip h2 { max-width:560px; margin:0; font-size:clamp(2rem,4vw,3.25rem); }
.category-links { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }
.category-links a { display:grid; grid-template-columns:46px 1fr; column-gap:13px; align-items:center; min-height:100px; padding:19px; border:1px solid var(--line); border-radius:13px; text-decoration:none; background:#fff; transition:border .18s,transform .18s,box-shadow .18s; }
.category-links a:hover { border-color:#9bbfac; transform:translateY(-2px); box-shadow:0 12px 32px rgba(28,52,43,.08); }
.category-icon { grid-row:1/3; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--mint); color:var(--green); font-weight:900; }
.category-links strong { align-self:end; line-height:1.2; }
.category-links small { align-self:start; color:var(--muted); }
.matcher-section { padding:90px max(24px,calc((100vw - 1020px)/2)); background:#f4f2eb; }
.section-heading { max-width:700px; margin:0 auto 36px; text-align:center; }
.section-heading h2 { margin:0 0 18px; font-size:clamp(2.3rem,5vw,4rem); }
.section-heading > p:last-child { color:var(--muted); font-size:1.06rem; }
.matcher-card { max-width:920px; margin:auto; padding:35px 45px 40px; border:1px solid #e0ded5; border-radius:18px; background:#fff; box-shadow:0 20px 60px rgba(40,50,45,.08); }
.progress-meta { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:.82rem; font-weight:700; }
.progress { height:5px; margin:11px 0 34px; border-radius:99px; background:#e9ede9; overflow:hidden; }
.progress span { display:block; height:100%; background:var(--green); border-radius:99px; transition:width .25s; }
.question-step { display:none; }
.question-step.is-active { display:block; animation:fade .2s ease; }
@keyframes fade { from { opacity:0; transform:translateY(4px); } }
fieldset { min-width:0; margin:0; padding:0; border:0; }
legend { width:100%; padding:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.18; font-weight:800; letter-spacing:-.035em; }
.question-help { margin:8px 0 22px; color:var(--muted); }
.answer-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.answer-grid label { position:relative; cursor:pointer; }
.answer-grid input { position:absolute; opacity:0; pointer-events:none; }
.answer-grid label > span { min-height:86px; display:grid; align-content:center; gap:2px; padding:17px 18px 17px 52px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.answer-grid label > span::before { content:''; position:absolute; left:18px; top:50%; width:20px; height:20px; transform:translateY(-50%); border:2px solid #aab7b0; border-radius:6px; }
.answer-grid input:checked + span { border-color:var(--green); background:#f1f8f4; box-shadow:inset 0 0 0 1px var(--green); }
.answer-grid input:checked + span::before { content:'✓'; display:grid; place-items:center; color:#fff; background:var(--green); border-color:var(--green); font-size:.75rem; font-weight:900; }
.answer-grid b { font-size:1rem; }
.answer-grid small { color:var(--muted); }
.form-row { display:grid; grid-template-columns:1.3fr .7fr 1fr; gap:14px; margin-top:25px; }
.form-row.two { grid-template-columns:1fr 1fr; }
.field { display:grid; gap:8px; color:#3f514a; font-weight:700; font-size:.88rem; }
.field input,.field select { width:100%; min-width:0; height:52px; padding:0 14px; color:var(--ink); border:1px solid #cad4ce; border-radius:9px; background:#fff; }
.ready-note { display:flex; align-items:center; gap:14px; margin-top:25px; padding:18px; border-radius:10px; background:#f1f7f3; }
.ready-note > span { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-weight:900; }
.ready-note div { display:grid; }
.ready-note small { color:var(--muted); }
.form-error { min-height:24px; color:#9d2e2e; margin:14px 0 2px; font-weight:600; }
.form-actions { justify-content:flex-end; padding-top:6px; }
.results-section { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:92px 0; }
.results-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:35px; }
.results-heading h2 { margin:0; font-size:clamp(2.4rem,5vw,4rem); }
.results-heading p:last-child { margin-bottom:0; color:var(--muted); }
.featured-results { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.product-card { position:relative; display:flex; flex-direction:column; padding:30px; border:1px solid var(--line); border-radius:17px; background:#fff; box-shadow:0 12px 34px rgba(30,50,42,.05); overflow:hidden; }
.product-card.top-card { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.82fr); column-gap:42px; border:2px solid var(--green); padding:38px; background:linear-gradient(115deg,#fff 0%,#fff 65%,#f0f7f3 100%); box-shadow:0 22px 55px rgba(23,107,77,.14); }
.winner-ribbon { position:absolute; top:0; left:0; padding:8px 18px; border-radius:0 0 10px 0; color:#fff; background:var(--green); text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; font-weight:900; }
.top-card .card-top { grid-column:1/-1; margin-top:12px; }
.top-card .badges,.top-card .tagline { grid-column:1; }
.top-card .why { grid-column:1; grid-row:4/7; }
.top-card .product-facts { grid-column:2; grid-row:2/6; margin:4px 0 22px; align-self:start; }
.top-card .card-actions { grid-column:2; grid-row:6; }
.card-top { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.product-identity { display:flex; align-items:center; gap:13px; }
.product-monogram { width:52px; height:52px; display:grid; place-items:center; border-radius:14px; background:#e8f1ec; border:1px solid #cfded5; color:var(--green); font-weight:900; letter-spacing:-.04em; box-shadow:inset 0 -8px 20px rgba(23,107,77,.04); }
.product-make .product-monogram { background:#5b2b82; border-color:#5b2b82; color:#fff; }
.product-monday .product-monogram { background:#ffcc33; border-color:#efbc1d; color:#2d2555; }
.product-getresponse .product-monogram { background:#7856ff; border-color:#7856ff; color:#fff; }
.product-shopify .product-monogram { background:#95bf47; border-color:#7ba238; color:#17310a; }
.product-pipedrive .product-monogram { background:#1f2937; border-color:#1f2937; color:#fff; }
.product-hubspot .product-monogram { background:#ff7a59; border-color:#ff7a59; color:#fff; }
.product-rank { margin:0; color:var(--muted); font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.11em; }
.product-card h3 { margin:2px 0 0; font:800 1.55rem/1.2 'Segoe UI',Arial,sans-serif; letter-spacing:-.035em; }
.top-card h3 { font-size:2rem; }
.fit-score { display:grid; text-align:right; }
.fit-score strong { color:var(--green); font:800 1.7rem/1 'Segoe UI',Arial,sans-serif; }
.fit-score span { max-width:92px; color:var(--muted); font-size:.74rem; line-height:1.15; }
.badges { min-height:31px; display:flex; gap:7px; flex-wrap:wrap; margin:20px 0 12px; }
.result-badge { padding:6px 9px; border-radius:999px; font-size:.7rem; font-weight:800; }
.result-badge.overall { background:var(--green); color:#fff; }
.result-badge.budget { background:#fff1dc; color:#8b5415; }
.result-badge.simple { background:#e3f1ea; color:#176b4d; }
.result-badge.advanced { background:#ece8f6; color:#58457d; }
.tagline { min-height:50px; margin:0 0 19px; color:#4e6059; font-size:1rem; line-height:1.6; }
.why { padding:20px; border-radius:12px; background:#f4f7f4; border:1px solid #e5ebe7; }
.why h4 { margin:0 0 11px; font-size:.95rem; }
.why ul { display:grid; gap:8px; margin:0; padding:0; list-style:none; color:#3e5149; font-size:.94rem; line-height:1.5; }
.why li { position:relative; padding-left:20px; }
.why li::before { content:'✓'; position:absolute; left:0; color:var(--green); font-weight:900; }
.product-facts { display:grid; grid-template-columns:1fr 1fr; gap:0; margin:20px 0; border-top:1px solid var(--line); }
.product-facts div { padding:12px 4px; border-bottom:1px solid var(--line); }
.product-facts div:nth-child(odd) { padding-right:16px; }
.product-facts dt { color:var(--muted); font-size:.71rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.product-facts dd { margin:3px 0 0; font-size:.94rem; line-height:1.4; font-weight:650; }
.card-actions { margin-top:auto; justify-content:space-between; }
.link-mode { color:var(--muted); font-size:.72rem; }
.compare-section { margin-top:70px; padding:34px; border-radius:18px; background:#f5f3ec; }
.compare-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:25px; }
.compare-heading h3 { margin:0; font:800 2rem/1.1 Georgia,'Times New Roman',serif; letter-spacing:-.04em; }
.compare-heading > p { max-width:480px; margin:0; color:var(--muted); font-size:.88rem; }
.compare-table-wrap { overflow:auto; border:1px solid #dddcd4; border-radius:12px; background:#fff; }
.compare-table-wrap table { width:100%; min-width:720px; border-collapse:collapse; }
.compare-table-wrap th,.compare-table-wrap td { padding:15px 18px; text-align:left; border-bottom:1px solid #e7e9e6; }
.compare-table-wrap thead th { font-size:1rem; background:#fbfaf6; }
.compare-table-wrap tbody th { color:var(--muted); font-size:.8rem; width:18%; }
.compare-table-wrap tbody td { font-size:.88rem; }
.table-rank { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:8px; border-radius:50%; background:var(--mint); color:var(--green); font-size:.7rem; }
.results-disclosure { margin:24px auto 0; max-width:850px; color:var(--muted); text-align:center; font-size:.82rem; }
.trust-section { padding:100px max(24px,calc((100vw - 1180px)/2)); background:#143d30; color:#f4fbf7; display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:center; }
.trust-copy .eyebrow { color:#a8dcc3; }
.trust-copy h2 { margin:0 0 24px; font-size:clamp(2.5rem,4vw,4rem); }
.trust-copy > p:not(.eyebrow) { color:#c3d8ce; }
.trust-links { margin-top:28px; }
.trust-links a { color:#fff; font-weight:700; text-underline-offset:4px; }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.trust-grid article { min-height:250px; padding:24px; border:1px solid rgba(255,255,255,.15); border-radius:14px; background:rgba(255,255,255,.045); }
.trust-grid span { color:#a8dcc3; font-weight:800; }
.trust-grid h3 { margin:55px 0 12px; font:800 1.1rem/1.3 'Segoe UI',Arial,sans-serif; }
.trust-grid p { margin:0; color:#bfd3ca; font-size:.87rem; }
footer { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:55px 0; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:start; }
.footer-brand p,.footer-note { color:var(--muted); font-size:.82rem; }
footer nav { display:flex; gap:25px; flex-wrap:wrap; }
footer nav a { color:#43544e; font-size:.84rem; }
.footer-note { grid-column:1/-1; padding-top:25px; border-top:1px solid var(--line); }
.legal-page { background:linear-gradient(180deg,#f3f1e9 0,#fffdf8 430px); }
.legal-header { width:min(900px,calc(100% - 40px)); height:82px; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.legal-back { color:var(--green); font-weight:700; text-underline-offset:4px; }
.legal-shell { width:min(800px,calc(100% - 40px)); margin:40px auto 90px; padding:55px 64px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:var(--shadow); }
.legal-shell .eyebrow { margin-bottom:16px; }
.legal-shell h1 { margin:0 0 14px; font:800 clamp(2.7rem,7vw,4.8rem)/1 Georgia,'Times New Roman',serif; letter-spacing:-.05em; }
.legal-meta { color:var(--muted); font-size:.84rem; }
.legal-intro { margin:28px 0 34px; padding:20px 22px; border-left:4px solid var(--green); background:#f1f7f3; font-size:1.07rem; }
.legal-shell h2 { margin:34px 0 9px; font-size:1.25rem; }
.legal-shell p,.legal-shell li { color:#43544e; }
.legal-nav { display:flex; flex-wrap:wrap; gap:12px 22px; margin-top:45px; padding-top:25px; border-top:1px solid var(--line); }
.legal-nav a { color:var(--green); font-weight:700; font-size:.86rem; }
[hidden] { display:none !important; }
@media (max-width:980px) { .hero { grid-template-columns:1fr; min-height:auto; padding-top:60px; gap:50px; } .hero-copy { text-align:center; } .hero-lede { margin-left:auto; margin-right:auto; } .hero-actions,.trust-points { justify-content:center; } .hero-proof { width:min(560px,100%); margin:auto; transform:none; } .category-links { grid-template-columns:1fr 1fr; } .featured-results { grid-template-columns:1fr; } .product-card.top-card { grid-column:auto; display:flex; padding:32px; } .top-card .card-top,.top-card .badges,.top-card .tagline,.top-card .why,.top-card .product-facts,.top-card .card-actions { grid-column:auto; grid-row:auto; } .top-card .card-top { margin-top:14px; } .trust-section { grid-template-columns:1fr; gap:45px; } .trust-grid article { min-height:200px; } }
@media (max-width:720px) { .disclosure-bar { font-size:.74rem; } .site-header { width:min(100% - 28px,1180px); height:72px; } .main-nav { display:none; } .nav-cta { padding:9px 13px; font-size:.8rem; } .hero { padding:48px 18px 68px; } .hero h1 { font-size:clamp(2.8rem,15vw,4.2rem); } .hero-lede { font-size:1.03rem; } .trust-points { gap:10px 18px; font-size:.8rem; } .category-strip { width:min(100% - 28px,1180px); padding:64px 0; } .category-links { grid-template-columns:1fr; } .matcher-section { padding:64px 14px; } .matcher-card { padding:25px 17px 28px; } .progress-meta span:last-child { display:none; } .answer-grid,.form-row,.form-row.two { grid-template-columns:1fr; } .answer-grid label > span { min-height:78px; } .form-actions { justify-content:stretch; } .form-actions .button { flex:1; } .results-section { width:min(100% - 28px,1180px); padding:68px 0; } .results-heading,.compare-heading { align-items:start; flex-direction:column; } .product-card { padding:21px; } .product-facts { grid-template-columns:1fr; } .product-facts div:nth-child(odd) { padding-right:4px; } .card-actions { align-items:stretch; flex-direction:column; } .card-actions .button { width:100%; } .compare-section { margin-top:45px; padding:20px 13px; } .trust-section { padding:70px 18px; } .trust-grid { grid-template-columns:1fr; } .trust-grid article { min-height:0; } .trust-grid h3 { margin:25px 0 8px; } footer { width:min(100% - 28px,1180px); grid-template-columns:1fr; } footer nav { gap:13px 20px; } .legal-shell { width:min(100% - 24px,800px); padding:35px 23px; } }
@media (max-width:390px) { .nav-cta { display:none; } .hero-proof { padding:17px; } .mini-result { grid-template-columns:34px 1fr; } .mini-result b { display:none; } .product-monogram { width:42px; height:42px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }