/* ========================================================================== SOFTREVIEWLAB — DESIGN TOKENS Palette "Ink & Signal". Light theme, committed: every surface and text colour is painted explicitly, so the page holds on any host background. -------------------------------------------------------------------------- Neutrals are blued (hue-biased toward --primary), not pure grey. Category accents are the only saturated colour outside --primary. Type: Plus Jakarta Sans (display/UI) · Inter (body) · Source Serif 4 (verdicts) ========================================================================== */ :root{ color-scheme: light; /* Core */ --ink:#0A1020; --ink-soft:#48546E; --paper:#FFFFFF; --paper-alt:#F5F7FB; --line:#E2E7F0; --primary:#2B4BF2; --primary-dark:#1C34B8; --verdict:#10B981; --caution:#F59E0B; /* Derived */ --ink-muted:#6B7691; --primary-tint:#EEF1FE; --verdict-tint:#E7F7F1; --caution-tint:#FDF3E2; --on-ink:#E8ECF6; --on-ink-muted:#9AA5C0; --ink-line:#212B44; /* Category accents */ --cat-sales:#2B4BF2; --cat-marketing:#FF6B4A; --cat-ai:#7C5CFC; --cat-cms:#0FB5A5; --accent:var(--primary); /* Type */ --font-display:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif; --font-body:"Inter","Segoe UI",Helvetica,Arial,sans-serif; --font-serif:"Source Serif 4",Georgia,"Times New Roman",serif; /* Scale */ --step--1:0.8125rem; --step-0:1.0625rem; --step-1:1.1875rem; --step-2:clamp(1.35rem,1.2rem + .6vw,1.6rem); --step-3:clamp(1.6rem,1.35rem + 1.1vw,2.15rem); --step-4:clamp(2rem,1.55rem + 2vw,3.05rem); /* Layout */ --wrap:1200px; --measure:68ch; --pad-section:clamp(56px,7vw,96px); --gutter:clamp(18px,4vw,32px); --r-card:12px; --r-btn:10px; --shadow-rest:0 1px 2px rgba(10,16,32,.05); --shadow-lift:0 12px 32px rgba(10,16,32,.10); --header-h:72px; } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink-soft); font-family:var(--font-body); font-size:var(--step-0); line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.is-locked{overflow:hidden} h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;line-height:1.18;letter-spacing:-.02em;text-wrap:balance} h1{font-weight:800;font-size:var(--step-4)} h2{font-weight:700;font-size:var(--step-3)} h3{font-weight:700;font-size:var(--step-2);letter-spacing:-.015em} h4{font-weight:700;font-size:var(--step-1);letter-spacing:-.01em} p{margin:0} a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-dark)} img{max-width:100%;display:block} ul,ol{margin:0;padding:0} :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px} .skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-btn);font-weight:600;transition:top .15s} .skip:focus{top:12px;color:#fff} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---------- Layout primitives ---------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .band{padding-block:var(--pad-section)} .band--alt{background:var(--paper-alt)} .band--tight{padding-block:clamp(40px,5vw,64px)} .stack{display:flex;flex-direction:column} .lede{max-width:var(--measure);font-size:var(--step-1);color:var(--ink-soft)} .eyebrow{ font-family:var(--font-display);font-size:var(--step--1);font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 14px } .section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(32px,4vw,48px);max-width:var(--measure)} .section-head--row{max-width:none;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font-display);font-weight:700;font-size:var(--step--1); letter-spacing:.005em;border-radius:var(--r-btn);border:1px solid transparent; padding:13px 20px;cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .16s; text-align:center;line-height:1.2; } .btn--primary{background:var(--primary);color:#fff;border-color:var(--primary)} .btn--primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:#fff} .btn--onink{background:#fff;color:var(--ink);border-color:#fff} .btn--onink:hover{background:var(--primary);color:#fff;border-color:var(--primary)} .btn:active{transform:translateY(1px)} .tlink{ display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display); font-weight:700;font-size:var(--step--1);color:var(--primary) } .tlink svg{transition:transform .18s} .tlink:hover svg{transform:translateX(3px)} .btn-row{display:flex;flex-wrap:wrap;gap:12px} /* ---------- Badges, chips, scores ---------- */ .badge{ display:inline-flex;align-items:center;gap:6px;border-radius:999px; font-family:var(--font-display);font-size:11px;font-weight:700; letter-spacing:.09em;text-transform:uppercase;padding:5px 11px; background:var(--primary-tint);color:var(--primary) } .badge[data-cat="sales"]{background:#EDF0FE;color:#1C34B8} .badge[data-cat="marketing"]{background:#FFEFEB;color:#C63E1F} .badge[data-cat="ai"]{background:#F1EDFF;color:#5B3CD6} .badge[data-cat="cms"]{background:#E3F7F4;color:#078377} .chip-static{ display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line); border-radius:999px;padding:5px 12px;font-size:var(--step--1);color:var(--ink-soft); background:var(--paper);white-space:nowrap } .score{display:flex;align-items:baseline;gap:2px;font-family:var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)} .score b{font-weight:800;font-size:1.5rem;letter-spacing:-.03em;line-height:1} .score span{font-size:.75rem;font-weight:600;color:var(--ink-muted)} /* ---------- Media wells (Unsplash photo sits on a designed ground) ---------- */ .media{ position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden; background:linear-gradient(135deg,#1B2440 0%,#2B4BF2 100%); } .media::after{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1px); background-size:14px 14px;opacity:.5 } .media[data-cat="marketing"]{background:linear-gradient(135deg,#2A1A22 0%,#FF6B4A 100%)} .media[data-cat="ai"]{background:linear-gradient(135deg,#1C1733 0%,#7C5CFC 100%)} .media[data-cat="cms"]{background:linear-gradient(135deg,#0C2B2A 0%,#0FB5A5 100%)} .media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover} .media img.is-failed{display:none} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:100;background:var(--paper); border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,background .2s } .site-header.is-stuck{border-bottom-color:var(--line);box-shadow:0 1px 14px rgba(10,16,32,.06);background:rgba(255,255,255,.88);backdrop-filter:blur(10px)} .header-in{display:flex;align-items:center;gap:20px;min-height:var(--header-h)} .logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:1.125rem;letter-spacing:-.03em;color:var(--ink)} .logo:hover{color:var(--ink)} .logo .mark{flex:none} .logo em{font-style:normal;color:var(--primary)} .nav{margin-left:auto;display:flex;align-items:center;gap:4px} .nav a{ position:relative;font-family:var(--font-display);font-weight:600;font-size:var(--step--1); color:var(--ink-soft);padding:9px 13px;border-radius:8px } .nav a::after{ content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px; background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .18s } .nav a:hover{color:var(--ink)} .nav a:hover::after{transform:scaleX(1)} .nav a[aria-current="page"]{color:var(--ink)} .nav a[aria-current="page"]::after{transform:scaleX(1)} .header-cta{margin-left:12px} .burger{ display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line); border-radius:var(--r-btn);background:var(--paper);cursor:pointer;align-items:center;justify-content:center;color:var(--ink) } .mobile-menu{ display:none;position:fixed;inset:var(--header-h) 0 0;z-index:99;background:var(--paper); padding:28px var(--gutter) 40px;overflow-y:auto } .mobile-menu.is-open{display:block} .mobile-menu a{ display:flex;align-items:center;justify-content:space-between;padding:18px 2px; font-family:var(--font-display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em; color:var(--ink);border-bottom:1px solid var(--line) } .mobile-menu .btn{margin-top:26px;width:100%} @media (max-width:900px){ .nav,.header-cta{display:none} .burger{display:inline-flex} } /* ---------- Hero ---------- */ .hero{padding-block:clamp(48px,6vw,88px) clamp(48px,6vw,84px);background:var(--paper);position:relative;overflow:hidden} .hero::before{ content:"";position:absolute;top:-160px;right:-120px;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(43,75,242,.10) 0%,rgba(43,75,242,0) 70%);pointer-events:none } .hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center} .hero-copy{display:flex;flex-direction:column;gap:22px;max-width:36ch} .hero-copy p.lede{max-width:44ch} .trustline{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:var(--step--1);color:var(--ink-muted);margin-top:2px} .trustline span{display:inline-flex;align-items:center;gap:7px} .dot{width:5px;height:5px;border-radius:50%;background:var(--verdict);flex:none} @media (max-width:880px){.hero-grid{grid-template-columns:1fr}.hero-copy{max-width:none}} /* Hero mock: a review card, drawn not photographed */ .mock{ background:var(--paper);border:1px solid var(--line);border-radius:16px; box-shadow:0 24px 60px rgba(10,16,32,.10);overflow:hidden;max-width:480px;margin-inline:auto;width:100% } .mock-top{height:3px;background:var(--cat-sales)} .mock-body{padding:22px} .mock-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .mock-verdict{font-family:var(--font-serif);font-style:italic;font-size:1.0625rem;color:var(--ink);margin-top:14px;line-height:1.5} .mock-bars{display:flex;flex-direction:column;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)} .bar-row{display:grid;grid-template-columns:118px 1fr 34px;align-items:center;gap:12px;font-size:var(--step--1)} .bar{height:7px;border-radius:999px;background:var(--paper-alt);overflow:hidden} .bar i{display:block;height:100%;border-radius:999px;background:var(--primary)} .bar-row b{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);text-align:right;font-size:var(--step--1)} .mock-foot{display:flex;align-items:center;gap:10px;padding:14px 22px;background:var(--paper-alt);border-top:1px solid var(--line);font-size:var(--step--1);color:var(--ink-muted)} /* ---------- Trust strip ---------- */ .strip{border-block:1px solid var(--line);background:var(--paper-alt)} .strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-block:28px} .strip-item{display:flex;flex-direction:column;gap:4px;padding-inline:clamp(8px,2vw,24px);border-left:1px solid var(--line)} .strip-item:first-child{border-left:0;padding-left:0} .strip-item b{font-family:var(--font-display);font-weight:800;font-size:1.65rem;color:var(--ink);letter-spacing:-.03em;font-variant-numeric:tabular-nums} .strip-item span{font-size:var(--step--1);color:var(--ink-muted);line-height:1.45} @media (max-width:760px){ .strip-grid{grid-template-columns:1fr 1fr;gap:22px 0} .strip-item:nth-child(odd){border-left:0;padding-left:0} } /* ---------- Grids ---------- */ .grid{display:grid;gap:22px} .grid--4{grid-template-columns:repeat(4,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} @media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}} @media (max-width:680px){.grid--4,.grid--3,.grid--2{grid-template-columns:1fr}} /* ---------- Category cards ---------- */ .catcard{ position:relative;display:flex;flex-direction:column;gap:10px;background:var(--paper); border:1px solid var(--line);border-radius:var(--r-card);padding:26px 22px 22px; box-shadow:var(--shadow-rest);transition:transform .18s,box-shadow .18s;overflow:hidden } .catcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent)} .catcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .catcard h3{margin-top:4px} .catcard .count{margin-top:auto;padding-top:16px;font-size:var(--step--1);color:var(--ink-muted);font-variant-numeric:tabular-nums} .catcard[data-cat="sales"]{--accent:var(--cat-sales)} .catcard[data-cat="marketing"]{--accent:var(--cat-marketing)} .catcard[data-cat="ai"]{--accent:var(--cat-ai)} .catcard[data-cat="cms"]{--accent:var(--cat-cms)} .catcard .ico{color:var(--accent)} /* ---------- Benefits ---------- */ .benefit{display:flex;flex-direction:column;gap:10px} .benefit .ico{width:42px;height:42px;border-radius:10px;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center;margin-bottom:4px} /* ---------- Review cards ---------- */ .rcard{ position:relative;display:flex;flex-direction:column;background:var(--paper); border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden; box-shadow:var(--shadow-rest);transition:transform .18s,box-shadow .18s } .rcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:2;background:var(--accent)} .rcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} .rcard[data-cat="sales"]{--accent:var(--cat-sales)} .rcard[data-cat="marketing"]{--accent:var(--cat-marketing)} .rcard[data-cat="ai"]{--accent:var(--cat-ai)} .rcard[data-cat="cms"]{--accent:var(--cat-cms)} .rcard-body{display:flex;flex-direction:column;gap:12px;padding:20px;flex:1} .rcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .rcard h3,.person h3{font-size:var(--step-1)} .rcard h3{margin-top:12px} .verdict{font-family:var(--font-serif);font-style:italic;font-size:1.0625rem;line-height:1.5;color:var(--ink)} .specs{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:4px} .rcard-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--line);background:var(--paper-alt)} /* ---------- Comparison links ---------- */ .vs-list{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;list-style:none} .vs-list li{border-bottom:1px solid var(--line)} .vs-list a{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:16px 2px;color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:var(--step-1);letter-spacing:-.015em} .vs-list a:hover{color:var(--primary)} .vs-list small{font-family:var(--font-body);font-weight:400;font-size:var(--step--1);color:var(--ink-muted);letter-spacing:0} @media (max-width:760px){.vs-list{grid-template-columns:1fr}} /* ---------- Steps ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;list-style:none;counter-reset:s} .steps--5{grid-template-columns:repeat(5,1fr)} .steps li{counter-increment:s;display:flex;flex-direction:column;gap:9px;padding-top:18px;border-top:2px solid var(--line);position:relative} .steps li::before{ content:counter(s,decimal-leading-zero);position:absolute;top:-14px;left:0; background:var(--paper);padding-right:10px;font-family:var(--font-display);font-weight:800; font-size:var(--step--1);letter-spacing:.08em;color:var(--primary);font-variant-numeric:tabular-nums } .band--alt .steps li::before{background:var(--paper-alt)} .steps h4{font-size:var(--step-1)} @media (max-width:1000px){.steps,.steps--5{grid-template-columns:1fr 1fr}} @media (max-width:560px){.steps,.steps--5{grid-template-columns:1fr}} /* ---------- Testimonials ---------- */ .quote{display:flex;flex-direction:column;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px;box-shadow:var(--shadow-rest)} .quote blockquote{margin:0;font-family:var(--font-serif);font-style:italic;font-size:1.1875rem;line-height:1.55;color:var(--ink)} .byline{display:flex;align-items:center;gap:12px;margin-top:auto} .byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--paper-alt)} .byline b{display:block;font-family:var(--font-display);font-size:var(--step--1);color:var(--ink)} .byline span{font-size:var(--step--1);color:var(--ink-muted)} /* ---------- Split blocks (about preview, methodology) ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .split--narrow{grid-template-columns:.85fr 1.15fr} @media (max-width:880px){.split,.split--narrow{grid-template-columns:1fr}} .framed{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-rest)} /* ---------- Callouts ---------- */ .callout{border-left:3px solid var(--primary);background:var(--primary-tint);padding:20px 22px;border-radius:0 var(--r-card) var(--r-card) 0;display:flex;flex-direction:column;gap:8px} .callout--verdict{border-left-color:var(--verdict);background:var(--verdict-tint)} .callout--caution{border-left-color:var(--caution);background:var(--caution-tint)} .callout h4{font-size:var(--step-0)} .callout p{font-size:var(--step--1);color:var(--ink-soft)} /* ---------- Newsletter band ---------- */ .cta-band{background:var(--ink);color:var(--on-ink)} .cta-band h2{color:#fff} .cta-band p{color:var(--on-ink-muted)} .cta-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,56px);align-items:center} @media (max-width:880px){.cta-inner{grid-template-columns:1fr}} .subscribe{display:flex;gap:10px;flex-wrap:wrap} .subscribe input{ flex:1 1 220px;min-width:0;padding:14px 16px;border-radius:var(--r-btn); border:1px solid var(--ink-line);background:#141C31;color:#fff;font:inherit;font-size:var(--step--1) } .subscribe input::placeholder{color:#7B87A6} .subscribe input:focus-visible{outline:2px solid #fff;outline-offset:2px} .fineprint{font-size:var(--step--1);color:var(--on-ink-muted);margin-top:12px} .sub-ok{display:none;font-family:var(--font-display);font-weight:700;color:#fff;background:#16223C;border:1px solid var(--ink-line);border-radius:var(--r-card);padding:16px 18px} .sub-ok.is-on{display:block} /* ---------- Footer ---------- */ .site-footer{background:var(--ink);color:var(--on-ink-muted);padding-block:clamp(48px,6vw,72px) 0;border-top:1px solid var(--ink-line)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px} @media (max-width:880px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}} @media (max-width:520px){.foot-grid{grid-template-columns:1fr}} .site-footer .logo{color:#fff} .site-footer .logo:hover{color:#fff} .foot-about{display:flex;flex-direction:column;gap:16px;max-width:34ch} .foot-about p{font-size:var(--step--1);line-height:1.6} .foot-col h4{color:#fff;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px} .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .foot-col a{color:var(--on-ink-muted);font-size:var(--step--1)} .foot-col a:hover{color:#fff} .socials{display:flex;gap:10px} .socials a{width:38px;height:38px;border:1px solid var(--ink-line);border-radius:10px;display:grid;place-items:center;color:var(--on-ink-muted)} .socials a:hover{color:#fff;border-color:#4A587A;background:#141C31} .foot-bottom{ margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--ink-line);padding-block:22px; display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:var(--step--1) } /* ---------- Page headers ---------- */ .pagehead{background:var(--paper-alt);border-bottom:1px solid var(--line);padding-block:clamp(40px,5vw,68px)} .crumbs{display:flex;gap:8px;align-items:center;font-size:var(--step--1);color:var(--ink-muted);margin-bottom:14px;list-style:none;flex-wrap:wrap} .crumbs li{display:flex;gap:8px;align-items:center} .crumbs li+li::before{content:"/";color:var(--line)} /* ---------- Filter bar ---------- */ .filters{ position:relative;z-index:1;background:var(--paper); border-bottom:1px solid var(--line);padding-block:14px } .filter-row{display:flex;flex-wrap:wrap;gap:12px 10px;align-items:flex-end} .chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-bottom:1px} .chip{ font-family:var(--font-display);font-weight:700;font-size:var(--step--1); border:1px solid var(--line);background:var(--paper);color:var(--ink-soft); border-radius:999px;padding:8px 15px;cursor:pointer;transition:background .15s,color .15s,border-color .15s } .chip:hover{border-color:var(--ink-muted);color:var(--ink)} .chip[aria-pressed="true"]{background:var(--accent,var(--primary));border-color:var(--accent,var(--primary));color:#fff} .chip[data-cat="sales"]{--accent:var(--cat-sales)} .chip[data-cat="marketing"]{--accent:var(--cat-marketing)} .chip[data-cat="ai"]{--accent:var(--cat-ai)} .chip[data-cat="cms"]{--accent:var(--cat-cms)} .field{display:flex;flex-direction:column;gap:6px} .field label{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)} select,input[type="text"],input[type="email"],input[type="tel"],input[type="search"],textarea{ font:inherit;font-size:var(--step--1);color:var(--ink);background:var(--paper); border:1px solid var(--line);border-radius:var(--r-card);padding:11px 13px;width:100% } select{appearance:none;padding-right:36px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2348546E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;cursor:pointer} .search-wrap{position:relative;flex:1 1 200px;min-width:160px} .search-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-muted);pointer-events:none} .search-wrap input{padding-left:38px} .filter-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:var(--step--1);color:var(--ink-muted)} .linkbtn{background:none;border:0;padding:0;color:var(--primary);font:inherit;font-size:var(--step--1);font-weight:600;cursor:pointer;text-decoration:underline} .empty{display:none;text-align:center;padding:64px 20px;border:1px dashed var(--line);border-radius:var(--r-card);background:var(--paper-alt)} .empty.is-on{display:block} .empty h3{margin-bottom:10px} /* ---------- Tables ---------- */ .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);-webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%;min-width:760px;font-size:var(--step--1)} caption{text-align:left;padding:16px 18px;color:var(--ink-muted);font-size:var(--step--1);border-bottom:1px solid var(--line)} th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} thead th{ font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-muted);background:var(--paper-alt);white-space:nowrap } tbody tr:last-child td{border-bottom:0} th[scope="row"]{ position:sticky;left:0;background:var(--paper);font-family:var(--font-display); font-weight:700;color:var(--ink);border-right:1px solid var(--line);white-space:nowrap } thead th:first-child{position:sticky;left:0;z-index:1;background:var(--paper-alt);border-right:1px solid var(--line)} td.num{font-variant-numeric:tabular-nums;font-family:var(--font-display);font-weight:700;color:var(--ink)} /* ---------- Accordion ---------- */ .faq{display:flex;flex-direction:column;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer;padding:20px 44px 20px 2px;position:relative; font-family:var(--font-display);font-weight:700;font-size:var(--step-1);color:var(--ink);letter-spacing:-.015em } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:10px;top:26px;width:11px;height:11px; border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted); transform:rotate(45deg);transition:transform .2s } .faq details[open] summary::after{transform:rotate(-135deg);top:30px} .faq summary:hover{color:var(--primary)} .faq .answer{padding:0 44px 22px 2px;max-width:var(--measure)} /* ---------- Category deep dives ---------- */ .deep{border-top:1px solid var(--line);padding-block:clamp(36px,4vw,56px)} .deep:first-of-type{border-top:0;padding-top:0} .deep h2{color:var(--accent)} .deep[data-cat="sales"]{--accent:var(--cat-sales)} .deep[data-cat="marketing"]{--accent:var(--cat-marketing)} .deep[data-cat="ai"]{--accent:var(--cat-ai)} .deep[data-cat="cms"]{--accent:var(--cat-cms)} .deep-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);margin-top:24px} @media (max-width:880px){.deep-grid{grid-template-columns:1fr}} .crit{list-style:none;display:flex;flex-direction:column;gap:12px} .crit li{display:flex;gap:11px;align-items:flex-start;font-size:var(--step--1)} .crit svg{flex:none;color:var(--accent);margin-top:3px} .pricebox{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;background:var(--paper-alt)} .pricebox b{font-family:var(--font-display);font-size:1.35rem;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums} /* ---------- Rubric ---------- */ .rubric{display:flex;flex-direction:column;gap:14px;list-style:none} .rubric li{display:grid;grid-template-columns:160px 1fr 48px;gap:14px;align-items:center;font-size:var(--step--1)} .rubric b{font-family:var(--font-display);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)} @media (max-width:520px){.rubric li{grid-template-columns:110px 1fr 42px;gap:10px}} /* ---------- Team ---------- */ .person{display:flex;flex-direction:column;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:22px;box-shadow:var(--shadow-rest)} .person img{width:68px;height:68px;border-radius:50%;object-fit:cover;background:var(--paper-alt)} .person .role{font-family:var(--font-display);font-size:var(--step--1);font-weight:700;color:var(--primary)} /* ---------- Contact ---------- */ .contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:start} @media (max-width:880px){.contact-grid{grid-template-columns:1fr}} .form{display:flex;flex-direction:column;gap:18px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-rest)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:620px){.form-row{grid-template-columns:1fr}} .form .field label{font-size:var(--step--1);letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink)} .req{color:var(--cat-marketing)} .hint{font-size:var(--step--1);color:var(--ink-muted)} .err{display:none;font-size:var(--step--1);color:#C63E1F;font-weight:500} .field.is-invalid .err{display:block} .field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:#C63E1F} textarea{min-height:140px;resize:vertical} .form-ok{display:none;flex-direction:column;gap:12px;align-items:flex-start;background:var(--verdict-tint);border:1px solid #BCE8D8;border-radius:var(--r-card);padding:clamp(24px,3vw,36px)} .form-ok.is-on{display:flex} .form.is-off{display:none} .info-list{list-style:none;display:flex;flex-direction:column;gap:18px} .info-list li{display:flex;gap:13px;align-items:flex-start} .info-list svg{flex:none;color:var(--primary);margin-top:3px} .info-list b{display:block;font-family:var(--font-display);color:var(--ink);font-size:var(--step--1)} .map{ position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line); background: linear-gradient(0deg,rgba(43,75,242,.05),rgba(43,75,242,.05)), repeating-linear-gradient(0deg,#EDF1F8 0 1px,transparent 1px 44px), repeating-linear-gradient(90deg,#EDF1F8 0 1px,transparent 1px 44px), var(--paper-alt) } .map-road{position:absolute;background:#DDE4F0} .map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);color:var(--primary)} .map-label{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 15px;font-size:var(--step--1);font-family:var(--font-display);font-weight:700;color:var(--ink);white-space:nowrap} /* ---------- Prose ---------- */ .prose{max-width:var(--measure);display:flex;flex-direction:column;gap:16px} .prose h3{margin-top:12px} .prose ul{padding-left:20px;display:flex;flex-direction:column;gap:8px} .disclosure{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);background:var(--paper-alt);border-radius:var(--r-card);padding:18px 20px} .disclosure svg{flex:none;color:var(--ink-muted);margin-top:3px} .disclosure p{font-size:var(--step--1)} /* ---------- Utilities (replace ad-hoc inline styles) ---------- */ [hidden]{display:none!important} .gap-12{gap:12px}.gap-14{gap:14px}.gap-16{gap:16px}.gap-18{gap:18px}.gap-20{gap:20px}.gap-28{gap:28px} .mt-10{margin-top:10px}.mt-12{margin-top:12px}.mt-14{margin-top:14px}.mt-18{margin-top:18px}.mt-32{margin-top:32px} .mb-28{margin-bottom:28px} .align-start{align-items:start} .self-start{align-self:flex-start} .self-center{align-self:center} .center-row{justify-content:center} .h-sm{font-size:var(--step-2)} .strong-ink{color:var(--ink)} .note{font-size:var(--step--1);color:var(--ink-muted)} .measure-wide{max-width:860px} .media--tall{aspect-ratio:4/3} .socials--light a{color:var(--ink-soft);border-color:var(--line)} .socials--light a:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-tint)} [id]{scroll-margin-top:calc(var(--header-h) + 24px)} /* ---------- Review drawer ---------- */ .drawer-backdrop{position:fixed;inset:0;z-index:150;background:rgba(10,16,32,.55);opacity:0;transition:opacity .2s} .drawer-backdrop.is-open{opacity:1} .drawer{ position:fixed;top:0;right:0;bottom:0;z-index:151;width:min(560px,100%); background:var(--paper);border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(10,16,32,.18); display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s ease } .drawer.is-open{transform:translateX(0)} .drawer-head{ display:flex;align-items:flex-start;gap:16px;padding:22px 24px 18px; border-bottom:1px solid var(--line);background:var(--paper);position:relative } .drawer-head::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--accent,var(--primary))} .drawer[data-cat="sales"]{--accent:var(--cat-sales)} .drawer[data-cat="marketing"]{--accent:var(--cat-marketing)} .drawer[data-cat="ai"]{--accent:var(--cat-ai)} .drawer[data-cat="cms"]{--accent:var(--cat-cms)} .drawer-close{ flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-btn); background:var(--paper);color:var(--ink);cursor:pointer;display:grid;place-items:center;margin-left:auto } .drawer-close:hover{background:var(--paper-alt)} .drawer-body{padding:24px;overflow-y:auto;display:flex;flex-direction:column;gap:24px;flex:1;min-height:0} .drawer-body>*{flex:0 0 auto} .drawer-foot{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:16px 24px;border-top:1px solid var(--line);background:var(--paper-alt)} .drawer .callout h4{color:var(--ink);font-size:var(--step-0);letter-spacing:.09em} .drawer-bars{display:flex;flex-direction:column;gap:12px} .drawer h4{font-size:var(--step--1);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:12px} .proscons{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media (max-width:520px){.proscons{grid-template-columns:1fr}} .pc-list{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:var(--step--1)} .pc-list li{display:flex;gap:9px;align-items:flex-start} .pc-list svg{flex:none;margin-top:3px} .pc-list--pro svg{color:var(--verdict)} .pc-list--con svg{color:var(--caution)} .factgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden} .factgrid div{background:var(--paper);padding:14px 16px;display:flex;flex-direction:column;gap:3px} .factgrid dt{font-size:11px;font-weight:700;font-family:var(--font-display);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)} .factgrid dd{margin:0;font-family:var(--font-display);font-weight:700;color:var(--ink);font-size:var(--step-0)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ---------- WordPress additions ---------- */ .nav ul,.mobile-menu ul{list-style:none;margin:0;padding:0} .nav ul{display:flex;align-items:center;gap:4px} .nav .current-menu-item>a,.nav .current_page_item>a{color:var(--ink)} .nav .current-menu-item>a::after,.nav .current_page_item>a::after{transform:scaleX(1)} .mobile-menu ul{display:flex;flex-direction:column} .admin-bar .site-header{top:32px} @media (max-width:782px){.admin-bar .site-header{top:46px}} .alignwide{max-width:var(--wrap)} .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* single review page */ .review-hero{background:var(--paper-alt);border-bottom:1px solid var(--line);padding-block:clamp(36px,5vw,60px)} .review-hero .score b{font-size:2.4rem} .review-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap} .review-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(28px,4vw,56px);align-items:start} @media (max-width:900px){.review-layout{grid-template-columns:1fr}} .review-side{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:20px} @media (max-width:900px){.review-side{position:static}} .review-main{display:flex;flex-direction:column;gap:28px} .review-main .factgrid{grid-template-columns:1fr 1fr} .srl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .subscribe.is-off{display:none} /* Full-bleed footer background (overrides Hello Elementor's boxed .site-footer) */ body .site-footer:not(.dynamic-footer){max-width:100%;width:100%;margin-inline:0;padding-inline:0} /* ---------- Re-assert form + button styling over Hello Elementor reset.css ---------- reset.css is enqueued AFTER this file and restyles inputs, selects and buttons (grey #666 borders, 3px radius, 1rem side padding, crimson button hover). These body-prefixed rules restore the SoftReviewLab design system. ---------- */ body select,body input[type="text"],body input[type="email"],body input[type="tel"],body input[type="url"],body input[type="number"],body input[type="password"],body input[type="search"],body textarea{ font:inherit;font-size:var(--step--1);line-height:1.5;color:var(--ink);background:var(--paper); border:1px solid var(--line);border-radius:var(--r-card);padding:11px 13px;width:100%;transition:border-color .15s } body select{display:block;appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer} body .search-wrap input[type="search"]{padding-left:38px} body input[type="search"]::-webkit-search-decoration,body input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none} body .subscribe input[type="email"]{padding:14px 16px;border-radius:var(--r-btn);border:1px solid var(--ink-line);background:#141C31;color:#fff} body .field.is-invalid input,body .field.is-invalid select,body .field.is-invalid textarea{border-color:#C63E1F} body .chip:hover,body .linkbtn:hover,body .burger:hover{background-color:transparent} body .chip:hover{border-color:var(--ink-muted);color:var(--ink);background:var(--paper)} body .chip[aria-pressed="true"],body .chip[aria-pressed="true"]:hover{background:var(--accent,var(--primary));border-color:var(--accent,var(--primary));color:#fff} body .linkbtn:hover{color:var(--primary);text-decoration:underline} body .burger:hover{color:var(--ink);background:var(--paper)} body a:focus-visible,body button:focus-visible,body input:focus-visible,body select:focus-visible,body textarea:focus-visible,body [tabindex]:not([tabindex="-1"]):focus-visible{outline:2px solid var(--primary);outline-offset:2px;box-shadow:none} body .subscribe input:focus-visible{outline:2px solid #fff;outline-offset:2px;box-shadow:none} /* reset.css also forces display:inline-block on every