/* ============================================================ SMMSUMO v6 — design system Loaded ONLY by the redesigned pages (index.php, page.php) via v6_header.php. Those pages do NOT load Bootstrap, which is why these selectors can stay short: there is nothing to collide with. If you ever add this stylesheet to a Bootstrap page, scope it first — .btn, .card, .nav, .badge and .h2 all clash. PALETTE: A (Sumo Orange) is the live default below. B and C are kept as overrides — set to preview one. ============================================================ */ :root{ --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'DM Mono',ui-monospace,monospace; --r:14px; --r-lg:20px; --r-sm:10px; --wrap:1200px; --gutter:24px; --sec:104px; --shadow:0 24px 60px -32px rgba(10,12,20,.38), 0 6px 18px -12px rgba(10,12,20,.16); --shadow-sm:0 6px 18px -12px rgba(10,12,20,.28); /* --- A · SUMO ORANGE (live) --- */ --accent:#ff4d00; --accent-2:#ff8a3d; --on-accent:#fff; --accent-soft:rgba(255,77,0,.10); --accent-line:rgba(255,77,0,.28); --ink:#101116; --ink-2:#191b22; --on-ink:#ffffff; --on-ink-mut:#a7abb6; --paper:#f7f7f5; --white:#ffffff; --copy:#15171c; --muted:#656974; --line:rgba(16,17,22,.11); --line-dark:rgba(255,255,255,.13); --accent-grad:linear-gradient(135deg,#ff4d00,#ff8a3d); --hero-bg:#eef1f6; } /* --- A · SUMO ORANGE — explicit, for parity with the alternates --- */ html[data-palette="a"]{ --accent:#ff4d00; --accent-2:#ff8a3d; --on-accent:#fff; --accent-soft:rgba(255,77,0,.10); --accent-line:rgba(255,77,0,.28); --ink:#101116; --ink-2:#191b22; --on-ink:#ffffff; --on-ink-mut:#a7abb6; --paper:#f7f7f5; --white:#ffffff; --copy:#15171c; --muted:#656974; --line:rgba(16,17,22,.11); --line-dark:rgba(255,255,255,.13); --accent-grad:linear-gradient(135deg,#ff4d00,#ff8a3d); --hero-bg:#eef1f6; } /* --- B · MIDNIGHT SIGNAL — premium/technical, growth-green --- */ html[data-palette="b"]{ --accent:#00c983; --accent-2:#6d5cff; --on-accent:#03150e; --accent-soft:rgba(0,201,131,.12); --accent-line:rgba(0,201,131,.32); --ink:#0b0d12; --ink-2:#12151d; --on-ink:#ffffff; --on-ink-mut:#9aa1b2; --paper:#f3f5f8; --white:#ffffff; --copy:#0e1118; --muted:#616a7d; --line:rgba(11,13,18,.11); --line-dark:rgba(255,255,255,.12); --accent-grad:linear-gradient(135deg,#00c983,#6d5cff); --hero-bg:#eaf1f4; } /* --- C · STUDIO GRADIENT — continuity with today's brand --- */ html[data-palette="c"]{ --accent:#dc2743; --accent-2:#bc1888; --on-accent:#fff; --accent-soft:rgba(220,39,67,.10); --accent-line:rgba(220,39,67,.26); --ink:#17111a; --ink-2:#221925; --on-ink:#ffffff; --on-ink-mut:#b3a8b6; --paper:#faf6f7; --white:#ffffff; --copy:#1a1418; --muted:#6c6270; --line:rgba(23,17,26,.11); --line-dark:rgba(255,255,255,.13); --accent-grad:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); --hero-bg:#f6eff2; } /* ============================================================ 2. BASE ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth} /* ---- Branded scrollbars ---- Styling the scrollbar also opts out of Windows 11's auto-hiding "overlay" scrollbars, so the page scrollbar stays visible on desktop. WebKit/Blink: the ::-webkit-scrollbar pseudos. Do NOT set scrollbar-color / scrollbar-width on html for Blink — Chrome 121+ ignores every ::-webkit-scrollbar rule on an element that has them, and scrollbar-color inherits to all elements. So the standard properties are applied only where ::-webkit-scrollbar is unsupported (Firefox). The viewport bar is styled on html AND body because body's overflow-x:hidden propagates to the viewport, and Blink then takes the viewport scrollbar's style from body. */ ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(16,17,22,.22);border-radius:99px;border:2px solid transparent;background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background-color:var(--accent)} ::-webkit-scrollbar-corner{background:transparent} html::-webkit-scrollbar,body::-webkit-scrollbar{width:14px;height:14px} html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:var(--paper);box-shadow:inset 1px 0 0 var(--line)} html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--accent),var(--accent-2));background-clip:padding-box; border:4px solid transparent;border-radius:99px;min-height:56px} html::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover{border-width:3px; background:linear-gradient(180deg,#e84500,var(--accent));background-clip:padding-box} html::-webkit-scrollbar-thumb:active,body::-webkit-scrollbar-thumb:active{border-width:3px;background:var(--accent);background-clip:padding-box} @supports not selector(::-webkit-scrollbar){ html{scrollbar-color:var(--accent) var(--paper)} *:not(html){scrollbar-width:thin;scrollbar-color:rgba(16,17,22,.28) transparent} } body{ margin:0; background:var(--white); color:var(--copy); font:15px/1.6 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{margin:0;letter-spacing:-.035em;line-height:1.08;font-weight:800} p{margin:0} button{font:inherit} .wrap{width:min(var(--wrap),calc(100% - (var(--gutter) * 2)));margin-inline:auto} .section{padding:var(--sec) 0} .paper{background:var(--paper)} .dark{background:var(--ink);color:var(--on-ink)} .dark p,.dark .lede{color:var(--on-ink-mut)} .h2{font-size:clamp(31px,4.1vw,52px)} .h3{font-size:clamp(23px,2.4vw,30px)} .lede{font-size:17px;color:var(--muted);line-height:1.62} .mono{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase} .btn{ display:inline-flex;align-items:center;gap:9px;justify-content:center; padding:13px 22px;border-radius:var(--r-sm);border:1px solid transparent; font-weight:700;font-size:14.5px;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s; white-space:nowrap; } .btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 10px 26px -14px var(--accent)} .btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px var(--accent)} .btn.ghost{background:transparent;color:inherit;border-color:var(--line)} .dark .btn.ghost{border-color:var(--line-dark)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent)} .btn.light{background:var(--white);color:var(--copy)} .btn.sm{padding:9px 15px;font-size:13.5px} .pill{ display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px; background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:12px; border:1px solid var(--accent-line); } .head{max-width:680px} .head .h2{margin:0 0 16px} .splithead{display:grid;grid-template-columns:1fr .68fr;gap:56px;align-items:end;margin-bottom:54px} .splithead .h2{margin:0} /* ============================================================ 3. ANNOUNCE BAR + HEADER ============================================================ */ .announce{position:relative;overflow:hidden;font-size:13px;color:#fff; background:linear-gradient(90deg,#15101d 0%,#1e1233 46%,#2b101f 100%); border-bottom:1px solid rgba(255,255,255,.07)} /* slow accent shimmer sweeping across the bar so it catches the eye without shouting */ .announce::before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(115deg,transparent 34%,rgba(255,138,61,.16) 48%,rgba(188,24,136,.16) 56%,transparent 70%); transform:translateX(-55%);animation:anShine 7s ease-in-out infinite} @keyframes anShine{0%,100%{transform:translateX(-55%)}50%{transform:translateX(55%)}} @media(prefers-reduced-motion:reduce){.announce::before{animation:none}} .announce .wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:center; gap:13px;padding:9px 12px;flex-wrap:wrap} .announce .tag{display:inline-flex;align-items:center;gap:6px; font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff; background:linear-gradient(135deg,var(--accent),#e6683c);padding:5px 10px;border-radius:999px; box-shadow:0 2px 12px rgba(255,138,61,.4)} .announce .tag i{font-size:10px} .announce .an-txt{color:rgba(255,255,255,.92)} .announce .an-txt strong{color:#ffb98a;font-weight:800} .announce .an-code{display:inline-flex;align-items:center;gap:8px;cursor:pointer; font:700 12.5px/1 var(--mono);letter-spacing:.1em;color:#fff; background:rgba(255,255,255,.05);border:1px dashed rgba(255,178,122,.6);border-radius:8px; padding:7px 12px;transition:.18s} .announce .an-code i{font-size:11px;color:#ffb98a;transition:.18s} .announce .an-code:hover{background:rgba(255,138,61,.16);border-color:#ffb98a;box-shadow:0 0 0 3px rgba(255,138,61,.13)} .announce .an-code.copied{background:linear-gradient(135deg,var(--accent),#e6683c);border-style:solid;border-color:transparent} .announce .an-code.copied i{color:#fff} .announce .x{margin-left:2px;background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;font-size:16px;line-height:1;transition:.15s} .announce .x:hover{color:#fff} @media(max-width:560px){.announce .an-txt{display:none}} header{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid transparent;transition:.2s} header.stuck{border-bottom-color:var(--line);background:color-mix(in srgb,var(--white) 88%,transparent);backdrop-filter:blur(16px)} .navrow{display:flex;align-items:center;gap:18px;height:70px} .brand{display:flex;align-items:center;flex:none} .brand img{height:34px;width:auto} .nav{display:flex;align-items:center;gap:2px;margin-left:12px} .nav > *{position:relative} .navlink{ display:flex;align-items:center;gap:6px;padding:9px 13px;border-radius:9px; font-weight:600;font-size:14px;color:var(--copy);cursor:pointer;background:none;border:0; } .navlink:hover{background:var(--paper);color:var(--accent)} .navlink i.caret{font-size:9px;opacity:.55} .mega{ position:absolute;top:calc(100% + 10px);left:-10px;width:min(760px,84vw); background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow);padding:22px;opacity:0;visibility:hidden;transform:translateY(-6px); transition:.18s;display:grid;grid-template-columns:repeat(4,1fr);gap:6px 18px; } .has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:none} .mega h5{grid-column:1/-1;margin:0 0 4px;font:500 10px/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .mega a{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:9px;font-size:13.5px;font-weight:600} .mega a:hover{background:var(--paper);color:var(--accent)} .mega a i{width:17px;text-align:center;opacity:.65;font-size:13px} .mega .all{grid-column:1/-1;margin-top:8px;padding-top:14px;border-top:1px solid var(--line); display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)} .mega .all a{color:var(--accent);padding:0} .navactions{margin-left:auto;display:flex;align-items:center;gap:8px} .langbtn{ display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line); border-radius:9px;background:none;cursor:pointer;font-weight:700;font-size:12.5px; } .langbtn:hover{border-color:var(--accent);color:var(--accent)} .langbtn .caret{font-size:9px;opacity:.55} .langmenu{ position:absolute;right:0;top:calc(100% + 8px);background:var(--white);border:1px solid var(--line); border-radius:var(--r);box-shadow:var(--shadow);padding:7px;min-width:210px; opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:70; } .langwrap{position:relative} .langwrap.open .langmenu,.langwrap:hover .langmenu,.langwrap:focus-within .langmenu{opacity:1;visibility:visible;transform:none} .langmenu a{ display:flex;width:100%;align-items:center;gap:10px;padding:8px 10px; border-radius:8px;cursor:pointer;font-size:13.5px;text-align:left;color:var(--copy); } .langmenu a:hover{background:var(--paper);color:var(--accent)} .langmenu a .code{font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--muted); border:1px solid var(--line);padding:4px 6px;border-radius:5px;min-width:30px;text-align:center} .langmenu a[aria-current="page"]{color:var(--accent);font-weight:700} .langmenu a[aria-current="page"] .code{border-color:var(--accent);color:var(--accent)} .langmenu .note{font-size:11px;color:var(--muted);padding:9px 10px 4px;border-top:1px solid var(--line);margin-top:6px;line-height:1.45} .hamb{display:none;background:none;border:1px solid var(--line);border-radius:9px;padding:9px 11px;cursor:pointer;color:var(--copy)} .hamb[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)} /* ---- mobile drawer (#v6Drawer, opened by #v6Hamb in v6.js) ---- */ .drawer-bg{position:fixed;inset:0;z-index:90;background:rgba(10,12,20,.5);backdrop-filter:blur(2px); opacity:0;transition:opacity .22s} .drawer-bg.on{opacity:1} .drawer{position:fixed;top:0;right:0;bottom:0;z-index:91;width:min(360px,88vw);background:var(--white); display:flex;flex-direction:column;box-shadow:-24px 0 60px -30px rgba(10,12,20,.5); transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);visibility:hidden} .drawer.open{transform:none;visibility:visible} .drawer-top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)} .drawer-top .brand img{height:30px} .drawer-x{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:none;font-size:17px; cursor:pointer;color:var(--copy)} .drawer-x:hover{border-color:var(--accent);color:var(--accent)} .drawer-nav{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 10px} .drawer-nav > a,.drawer-plat > summary{display:flex;align-items:center;gap:13px;padding:15px 10px;border-radius:11px; font-weight:700;font-size:15.5px;color:var(--copy)} .drawer-nav > a:hover,.drawer-plat > summary:hover{background:var(--paper);color:var(--accent)} .drawer-nav > a > i:first-child,.drawer-plat > summary > i{width:20px;text-align:center;color:var(--accent);font-size:15px} .drawer-nav .go{margin-left:auto;font-size:11px;opacity:.4} .drawer-plat{border:0;padding:0} .drawer-plat > summary{justify-content:flex-start} .drawer-plat > summary .n{margin-left:auto;margin-right:8px;font:500 11px/1 var(--mono);color:var(--muted); background:var(--paper);padding:5px 8px;border-radius:99px} .drawer-plat[open] > summary{color:var(--accent)} .drawer-plats{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 6px 12px} .drawer-plats a{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:10px; font-size:13.5px;font-weight:600} .drawer-plats a:hover{border-color:var(--accent);color:var(--accent)} .drawer-plats a i{width:16px;text-align:center;opacity:.7} html.drawer-open,html.drawer-open body{overflow:hidden} @media(min-width:821px){.drawer,.drawer-bg{display:none}} @media(prefers-reduced-motion:reduce){.drawer,.drawer-bg{transition:none}} /* ============================================================ 4. HERO — centred, social-doodle wallpaper, service picker card ============================================================ */ .hero{position:relative;overflow:hidden;padding:58px 0 78px;background:var(--hero-bg)} /* The wallpaper is one tiling SVG, so it covers any hero height for free — static elements would leave gaps when the hero grows on a phone. Two refinements over a plain scatter: a LARGER tile (520px) so it reads as texture rather than pattern, and a radial mask that clears the middle so the card sits on calm ground instead of fighting the doodles. */ .hero::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.7; background-size:520px 520px; -webkit-mask-image:radial-gradient(ellipse 58% 52% at 50% 46%,transparent 38%,#000 78%); mask-image:radial-gradient(ellipse 58% 52% at 50% 46%,transparent 38%,#000 78%); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520' fill='none' stroke='%23aebdd2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(30 42) rotate(-12) scale(1.35)'%3E%3Cpath d='M12 21s-7.5-4.7-9.6-9A5.6 5.6 0 0 1 12 6.6 5.6 5.6 0 0 1 21.6 12c-2.1 4.3-9.6 9-9.6 9z'/%3E%3C/g%3E%3Cg transform='translate(182 22) rotate(8) scale(1.2)'%3E%3Cpath d='M4 5h16v11H9l-5 4V5z'/%3E%3C/g%3E%3Cg transform='translate(330 68) rotate(-6) scale(1.3)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8l6 4-6 4V8z'/%3E%3C/g%3E%3Cg transform='translate(452 28) rotate(14) scale(1.2)'%3E%3Cpath d='M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z'/%3E%3C/g%3E%3Cg transform='translate(70 172) rotate(10) scale(1.25)'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/g%3E%3Cg transform='translate(240 158) rotate(-14) scale(1.35)'%3E%3Cpath d='M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z'/%3E%3C/g%3E%3Cg transform='translate(400 186) rotate(6) scale(1.2)'%3E%3Cpath d='M12 21s-7.5-4.7-9.6-9A5.6 5.6 0 0 1 12 6.6 5.6 5.6 0 0 1 21.6 12c-2.1 4.3-9.6 9-9.6 9z'/%3E%3C/g%3E%3Cg transform='translate(26 296) rotate(-8) scale(1.3)'%3E%3Cpath d='M4 5h16v11H9l-5 4V5z'/%3E%3C/g%3E%3Cg transform='translate(172 312) rotate(12) scale(1.2)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8l6 4-6 4V8z'/%3E%3C/g%3E%3Cg transform='translate(326 290) rotate(-10) scale(1.25)'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/g%3E%3Cg transform='translate(462 304) rotate(8) scale(1.3)'%3E%3Cpath d='M4 5h16v11H9l-5 4V5z'/%3E%3C/g%3E%3Cg transform='translate(92 424) rotate(-6) scale(1.3)'%3E%3Cpath d='M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z'/%3E%3C/g%3E%3Cg transform='translate(244 442) rotate(10) scale(1.25)'%3E%3Cpath d='M12 21s-7.5-4.7-9.6-9A5.6 5.6 0 0 1 12 6.6 5.6 5.6 0 0 1 21.6 12c-2.1 4.3-9.6 9-9.6 9z'/%3E%3C/g%3E%3Cg transform='translate(372 410) rotate(-12) scale(1.2)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8l6 4-6 4V8z'/%3E%3C/g%3E%3Cg transform='translate(470 456) rotate(6) scale(1.25)'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/g%3E%3C/svg%3E"); } /* one warm bloom under the card, so the white object sits in light */ .hero::after{ content:"";position:absolute;width:1080px;height:640px;left:50%;top:62%; transform:translate(-50%,-50%);pointer-events:none; background:radial-gradient(ellipse,var(--accent-soft),transparent 64%); } .hero .wrap{position:relative;z-index:2} .hero-c{text-align:center;max-width:1000px;margin-inline:auto} /* Large, confident type: the headline is the loudest thing on the page. */ .hero h1{font-size:clamp(35px,5.2vw,64px);letter-spacing:-.052em;line-height:1.04; margin:20px 0 0;text-wrap:balance} /* "Social Media" carries the colour the platform wordmarks used to. Ramp starts past the pale end — #f9ce34 is near-invisible on light. */ .hero h1 .sm-t{white-space:nowrap; background:linear-gradient(90deg,#f77737 0%,#ee2a7b 46%,#6228d7 100%); -webkit-background-clip:text;background-clip:text;color:transparent} /* the payoff phrase, underscored the way a person underlines it by hand */ .hero h1 u{text-decoration:none;position:relative;white-space:nowrap} .hero h1 u::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:.075em; border-radius:99px;background:var(--accent)} .hero .sub{margin:24px auto 0;max-width:640px;font-size:18px;color:var(--copy);font-weight:600;line-height:1.55} .hero .sub span{display:block;color:var(--muted);font-weight:500;margin-top:4px;font-size:16.5px} /* ---- service picker card ---- */ .picker{ max-width:900px;margin:40px auto 0;border-radius:22px;overflow:hidden;text-align:left; background:var(--white);border:1px solid var(--line); /* a deeper, softer stack than the site default — this is the page's hero object */ box-shadow:0 2px 4px -2px rgba(12,13,18,.10),0 12px 28px -14px rgba(12,13,18,.18), 0 44px 88px -44px rgba(12,13,18,.42); } /* ---- platform tab rail: all 22, scrollable, arrow + keyboard driven ---- */ .ptabs-wrap{position:relative;background:var(--ink)} .ptabs{display:flex;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none; scroll-padding-inline:48px} .ptabs::-webkit-scrollbar{display:none} /* No min-width: content sizes each tab. A fixed width clipped the rating line on the shorter names and looked like a rendering fault. */ .ptab{ flex:0 0 auto;display:flex;align-items:center;gap:11px; padding:15px 20px 14px;border:0;cursor:pointer;background:transparent; text-align:left;transition:background .18s,color .18s;position:relative; } /* the active tab lifts out of the rail as a white shelf */ .ptab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent} .ptab:hover{background:rgba(255,255,255,.06)} .ptab:focus-visible{outline:2px solid var(--accent);outline-offset:-3px} .ptab .m{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; font-size:15px;color:#fff;flex:none;background:rgba(255,255,255,.1)} .ptab .m.ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b 48%,#6228d7)} .ptab .m.tt{background:#0c0c0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)} .ptab .m.yt{background:#ff0000}.ptab .m.fb{background:#1877f2} .ptab .m.xx{background:#0c0c0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)} .ptab .m.sp{background:#1ed760;color:#06331b}.ptab .m.rd{background:#ff4500} .ptab .m.li{background:#0a66c2}.ptab .m.th{background:#0c0c0c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)} .ptab .m.qa{background:#b92b27}.ptab .m.pi{background:#e60023} .ptab .m.tg{background:#2aabee}.ptab .m.wa{background:#25d366;color:#06331b} .ptab .m.dc{background:#5865f2}.ptab .m.gg{background:#fff;color:#4285f4} .ptab .m.ap{background:#fc3c44}.ptab .m.sc{background:#ff5500} .ptab .m.am{background:#ffa200;color:#3a2400}.ptab .m.of{background:#00aff0} .ptab .m.fa{background:#1e88e5}.ptab .m.kk{background:#53fc18;color:#0a2a02} .ptab .m.an{background:#3ddc84;color:#06331b} .ptab .lbl{flex:none} .ptab b{display:block;font-size:13.5px;color:#fff;letter-spacing:-.015em;white-space:nowrap} /* plain text, not a boxed chip — the box read as an empty field at this size */ .ptab .sc{display:block;margin-top:3px;font:500 10.5px/1 var(--mono);color:var(--on-ink-mut);white-space:nowrap} .ptab .sc i{color:var(--accent);font-size:9px;margin-right:3px} .ptab[aria-selected="true"]{background:var(--white)} .ptab[aria-selected="true"] b{color:var(--copy)} .ptab[aria-selected="true"] .sc{color:var(--muted)} .ptab[aria-selected="true"]::after{background:var(--accent)} /* arrows sit over the rail on a scrim so tabs slide under them */ .ptab-nav{ position:absolute;top:0;bottom:0;width:46px;border:0;cursor:pointer;z-index:3; color:#fff;font-size:13px;display:grid;place-items:center;transition:opacity .18s; } .ptab-nav.prev{left:0;background:linear-gradient(to right,var(--ink) 58%,transparent)} .ptab-nav.next{right:0;background:linear-gradient(to left,var(--ink) 58%,transparent)} .ptab-nav:hover{color:var(--accent)} .ptab-nav:focus-visible{outline:2px solid var(--accent);outline-offset:-4px} .ptab-nav[disabled]{opacity:0;pointer-events:none} /* No padding on the rail: at scroll 0 the prev arrow is hidden, so padding would leave a dark band beside the white active tab. The arrows overlay the edges instead, and scroll-padding keeps keyboard focus clear of them. */ .pbody{padding:24px 26px 6px} .phead{display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:8px} .phead b{font-size:17px;letter-spacing:-.025em} .phead span{font-size:13.5px;color:var(--muted)} .prows{display:grid;grid-template-columns:1fr 1fr;gap:0 30px} .prow{display:flex;align-items:center;gap:14px;padding:17px 0;border-top:1px solid var(--line);transition:.15s} .prows .prow:nth-child(1),.prows .prow:nth-child(2){border-top:0} .prow:hover{padding-left:5px} .prow .ic{width:32px;height:32px;display:grid;place-items:center;color:var(--muted);font-size:16px;flex:none} .prow .t{flex:1;min-width:0} .prow .t b{display:block;font-size:16.5px;letter-spacing:-.025em} .prow .t span{font-size:13px;color:var(--muted)} .prow .pr{font-size:13.5px;font-weight:800;color:var(--accent);white-space:nowrap} .prow .go{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center; font-size:11px;color:var(--muted);flex:none;transition:.15s} .prow:hover .go{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} /* the country strip is the part of this card that is ours, not the category's */ .pmarkets{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:15px 26px; border-top:1px solid var(--line);background:var(--paper)} .pmarkets .lbl{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .pmarkets a{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:99px; background:var(--white);border:1px solid var(--line);font-size:12.5px;font-weight:600;transition:.15s} .pmarkets a:hover{border-color:var(--accent);color:var(--accent)} .pmarkets a b{color:var(--accent)} .pmarkets .more{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--accent); border:0;background:none;padding-inline:0} .pquote{display:flex;align-items:center;gap:14px;padding:15px 26px;border-top:1px solid var(--line);flex-wrap:wrap} .pstars{display:flex;gap:3px;flex:none} .pstars i{width:20px;height:20px;border-radius:4px;background:var(--accent);color:var(--on-accent); display:grid;place-items:center;font-size:9px} .pquote q{font-size:13.5px;font-weight:600;quotes:'"' '"';flex:1 1 200px;min-width:0} .pq-right{display:flex;align-items:center;gap:14px;margin-left:auto;flex-wrap:wrap} .pquote .by{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)} .pquote .by .av{width:25px;height:25px;border-radius:50%;background:var(--accent-soft);color:var(--accent); display:grid;place-items:center;font-weight:800;font-size:10px} .pquote .dots{display:flex;gap:5px;flex:none} .pquote .dots i{width:6px;height:6px;border-radius:50%;background:var(--line);cursor:pointer} .pquote .dots i.on{background:var(--accent)} .pquote .read{font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap} .ppay{display:flex;align-items:center;justify-content:center;gap:18px;padding:13px 26px; border-top:1px solid var(--line);background:var(--paper);font-size:12.5px;color:var(--muted);flex-wrap:wrap} .ppay b{font-weight:700;color:var(--copy);display:inline-flex;align-items:center;gap:7px} .ppay .sep{width:1px;height:14px;background:var(--line)} /* Two-letter country code, NOT a flag emoji: Windows renders regional indicator pairs as bare letters, so an emoji flag is a broken glyph on the majority of our desktop traffic. */ .cc{display:inline-grid;place-items:center;min-width:22px;height:16px;padding:0 4px; border-radius:3px;background:var(--copy);color:var(--white); font:600 9.5px/1 var(--mono);letter-spacing:.04em;flex:none} .cc.ww{background:var(--accent);color:var(--on-accent)} .dark .cc,.otable .cc{background:rgba(255,255,255,.14);color:var(--on-ink)} .dark .cc.ww{background:var(--accent);color:var(--on-accent)} .trustrow{display:flex;gap:28px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:30px} .trustrow div{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)} .trustrow div i{color:var(--accent);font-size:12px} .trustrow div b{color:var(--copy);font-weight:700} .dark .trustrow div{color:var(--on-ink-mut)} .dark .trustrow div b{color:#fff} /* ============================================================ 5a. TRUSTED BY + LOGO MARQUEE ============================================================ */ .trust{padding:54px 0 36px;background:var(--paper);overflow:hidden} .trust-h{text-align:center;font-size:clamp(17px,2.1vw,23px);font-weight:700; letter-spacing:-.025em;margin-bottom:28px} .trust-h b{color:var(--accent);font-weight:800} .marquee{position:relative;overflow:hidden; /* feather both ends so logos enter and leave instead of being chopped */ -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)} .marquee-track{display:flex;width:max-content;animation:marq 38s linear infinite} .marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused} .marquee-set{display:flex;align-items:center;flex:none} .marquee img{height:26px;width:auto;max-width:132px;margin:0 32px;object-fit:contain; filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s} .marquee img:hover{filter:none;opacity:1} @keyframes marq{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ /* no motion, but the logos must still all be reachable */ .marquee-track{animation:none} .marquee{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:none;mask-image:none} .marquee .marquee-set[aria-hidden]{display:none} } /* ============================================================ 5b. RECENT SUCCESS STORIES ============================================================ */ .storygrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:8px} .story{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;transition:.2s} .story:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-line)} .story-media{display:block;aspect-ratio:16/10;background:var(--paper);overflow:hidden} .story-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s} .story:hover .story-media img{transform:scale(1.04)} /* Two of these assets are wordmarks, not photographs. Cropping a logo to fill a 16:10 box cuts its edges off — contain it and give it air. */ .story-media.logo{background:var(--white);border-bottom:1px solid var(--line)} .story-media.logo img{object-fit:contain;padding:20px 24px} .story:hover .story-media.logo img{transform:scale(1.03)} /* no stock photo for the one case study that has none — initials instead */ .story-media.initials{display:grid;place-items:center;background:var(--accent-grad)} .story-media.initials span{font-size:38px;font-weight:800;letter-spacing:-.04em;color:#fff} .story-body{display:flex;flex-direction:column;gap:3px;padding:17px 18px 18px;flex:1} .story-eyebrow{font-size:12px;font-weight:600;color:var(--accent)} .story-body > b{font-size:16.5px;letter-spacing:-.025em;margin-top:6px} .story-sub{font-size:12.5px;color:var(--muted)} .story-stats{display:flex;gap:16px;margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);flex-wrap:wrap} .story-stats > span{display:flex;flex-direction:column;gap:2px;min-width:0} .story-stats b{font-size:17px;letter-spacing:-.035em;color:var(--accent);white-space:nowrap} .story-stats small{font-size:10.5px;color:var(--muted);line-height:1.3} .story-go{margin-top:auto;padding-top:14px;font-size:12.5px;font-weight:700;color:var(--copy); display:flex;align-items:center;gap:7px} .story-go i{font-size:10px;transition:transform .2s} .story:hover .story-go{color:var(--accent)} .story:hover .story-go i{transform:translateX(3px)} /* ============================================================ 5. STATS BAND (static — no count-ups, nothing renders as 0) ============================================================ */ /* hero is dark too, so the band needs a hairline or the two merge */ .stats{background:var(--ink);color:var(--on-ink);border-top:1px solid var(--line-dark)} .statrow{display:grid;grid-template-columns:repeat(5,1fr)} .stat{padding:34px 24px;border-left:1px solid var(--line-dark)} .stat:first-child{border-left:0;padding-left:0} .stat b{display:block;font-size:31px;letter-spacing:-.045em;line-height:1} .stat b.on{color:var(--accent)} .stat span{display:block;margin-top:7px;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:var(--on-ink-mut)} /* ============================================================ 6. ANSWER BLOCK (AI indexability — one extractable definition) ============================================================ */ .answer .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start} .answer .def{font-size:19.5px;line-height:1.62;color:var(--copy)} .answer .def strong{font-weight:800} .answer .facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:26px} .answer .facts div{background:var(--white);padding:16px 18px} .answer .facts dt{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .answer .facts dd{margin:7px 0 0;font-size:15px;font-weight:700} .jumps{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--line);margin-top:4px} .jumps a{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600; display:flex;justify-content:space-between;align-items:center;color:var(--muted);transition:.15s} .jumps a::after{content:"\f061";font:900 10px/1 "Font Awesome 6 Free";opacity:.35} .jumps a:hover{color:var(--accent);padding-left:6px} .jumps a:hover::after{opacity:1} /* ============================================================ 7. MARKETPLACE ============================================================ */ .tabs{display:flex;gap:5px;flex-wrap:wrap;padding:5px;background:var(--paper); border:1px solid var(--line);border-radius:var(--r)} .tabs button{ border:0;background:transparent;padding:9px 14px;border-radius:9px;cursor:pointer; font-weight:700;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;transition:.15s; } .tabs button i{font-size:13px} .tabs button[aria-selected="true"]{background:var(--white);color:var(--copy);box-shadow:var(--shadow-sm)} .tabs button:hover{color:var(--copy)} .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px} /* ---- service directory (/all-services, /platform) ---- */ .dir-head .crumbs{font-size:13px;color:var(--muted);margin-bottom:14px} .dir-head .crumbs a{color:var(--muted);text-decoration:none} .dir-head .crumbs a:hover{color:var(--accent)} .dir-head .h1{font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-.04em;margin-bottom:14px} .dir-jump{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px} .dir-jump a{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line); border-radius:999px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;background:var(--white); transition:border-color .15s,color .15s} .dir-jump a:hover{border-color:var(--accent);color:var(--accent)} .dir-jump a small{color:var(--muted);font-weight:700} .dir-group{padding-top:22px;padding-bottom:22px;scroll-margin-top:90px} .dir-group .splithead{margin-bottom:26px;align-items:center} .dir-all{white-space:nowrap;font-weight:700;font-size:14px;color:var(--accent);text-decoration:none} .dir-all:hover{text-decoration:underline} /* ---- generic helpers reused by the tool + reviews pages ---- */ .h1{font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-.04em;margin-bottom:14px} .section.alt{background:var(--paper)} .wrap.narrow{max-width:780px} /* ---- free tools hub ---- */ .toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px} .toolcard{display:flex;align-items:center;gap:14px;padding:18px 18px;background:var(--white); border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:inherit; transition:border-color .15s,box-shadow .15s,transform .15s} .toolcard:hover{border-color:var(--accent);box-shadow:0 12px 30px -18px rgba(12,13,18,.3);transform:translateY(-2px)} .toolcard .ti{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center; justify-content:center;background:var(--accent-soft);color:var(--accent);font-size:19px} .toolcard .tt{display:flex;flex-direction:column;gap:3px;min-width:0} .toolcard .tt b{font-size:15px;letter-spacing:-.01em} .toolcard .tt span{font-size:12.5px;color:var(--muted);line-height:1.4} .toolcard .tgo{margin-left:auto;color:var(--line);transition:color .15s} .toolcard:hover .tgo{color:var(--accent)} .valgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px} .val{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px} .val i{font-size:22px;color:var(--accent);margin-bottom:12px;display:block} .val b{display:block;font-size:15.5px;letter-spacing:-.01em;margin-bottom:5px} .val p{font-size:13px;color:var(--muted);line-height:1.5} .ctaband{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:34px 38px} .ctaband .h2{color:#fff} .ctaband .lede{color:rgba(255,255,255,.72)} .faqlist{margin-top:24px} @media(max-width:900px){.toolgrid{grid-template-columns:repeat(2,1fr)}.valgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.toolgrid,.valgrid{grid-template-columns:1fr}} /* ---- legacy tool apps wrapped in v6 chrome (body class v6-tool): nudge their primary buttons/links to the v6 accent so they sit inside the v6 look. The tool's own style.css still owns layout; this only recolors accents. ---- */ .v6-tool .btn-submit,.v6-tool button[type="submit"],.v6-tool .submit-btn, .v6-tool .btn-primary,.v6-tool .btn-dark,.v6-tool .btn-check,.v6-tool .cta-button, .v6-tool .cta-card__btn,.v6-tool .analyzer-action .btn,.v6-tool .download-btn,.v6-tool .search-btn{ background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important; background-image:none!important} .v6-tool .btn-submit:hover,.v6-tool button[type="submit"]:hover,.v6-tool .cta-card__btn:hover{filter:brightness(.95)} .v6-tool a:not(.btn):not([class*="nav"]):not([class*="foot"]):not(.cta-card__btn){color:var(--accent)} /* swap the Instagram gradient (833ab4→fd1d1d→fcb045) for the v6 accent so the tool bodies read as one design with the rest of the site */ .v6-tool .tool-header__icon,.v6-tool .tool-icon,.v6-tool .hero-icon,.v6-tool .earning-item__slider-bar{ background:linear-gradient(135deg,#ff7a3c,var(--accent))!important} .v6-tool .seo-badge,.v6-tool .badge-feature{ background:var(--accent-soft)!important;color:var(--accent)!important;border-color:transparent!important; -webkit-text-fill-color:var(--accent)!important;background-image:none!important} /* the promo carousel's gradient icon/title → solid accent */ .v6-tool .cta-card__icon{background:none!important;-webkit-text-fill-color:var(--accent)!important;color:var(--accent)!important} /* give the viewer/downloader tools a v6 card around their bare tool area so they read as polished as the calculator tools */ .v6-tool .analyzer-wrapper,.v6-tool .downloader-wrapper,.v6-tool .tool-wrapper{ background:var(--white);border:1px solid var(--line);border-radius:18px; padding:30px 28px!important;max-width:600px!important; box-shadow:0 2px 4px -2px rgba(12,13,18,.08),0 18px 44px -30px rgba(12,13,18,.3)} /* feature row on the viewer/downloader tools: turn the borderless Bootstrap cards into real v6 cards with an accent icon */ .v6-tool .feature-card{background:var(--white)!important;border:1px solid var(--line)!important; border-radius:var(--r-lg)!important;padding:26px 22px!important;text-align:center; box-shadow:0 2px 4px -2px rgba(12,13,18,.06)} .v6-tool .feature-icon{color:var(--accent)!important} .v6-tool .feature-card h6{font-size:15.5px;letter-spacing:-.01em} /* tabs → v6: active tab in the accent colour with an accent underline */ .v6-tool .analyzer-tabs .nav-link.active,.v6-tool .nav-tabs .nav-link.active, .v6-tool .nav-pills .nav-link.active{color:var(--accent)!important;border-bottom-color:var(--accent)!important; background:none!important} .v6-tool .analyzer-tabs .nav-link,.v6-tool .nav-tabs .nav-link{color:var(--ink-3)} /* a v6 hero icon we can drop above any tool title */ .v6-tool .v6-toolicon{width:64px;height:64px;border-radius:16px;display:inline-flex;align-items:center; justify-content:center;color:#fff;font-size:26px;margin-bottom:16px; background:linear-gradient(135deg,#ff7a3c,var(--accent));box-shadow:0 12px 26px -12px rgba(255,77,0,.6)} .svc{ background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:19px; display:flex;flex-direction:column;gap:12px;transition:.2s;position:relative; } .svc:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-line)} .svc .thumb{width:44px;height:44px;border-radius:12px;object-fit:cover;background:var(--paper);border:1px solid var(--line)} .svc h3{font-size:16px;letter-spacing:-.02em} .svc .meta{display:flex;gap:13px;font-size:11.5px;color:var(--muted);flex-wrap:wrap} .svc .meta i{margin-right:4px;opacity:.6} .svc .foot{margin-top:auto;padding-top:13px;border-top:1px solid var(--line); display:flex;align-items:flex-end;justify-content:space-between;gap:10px} .svc .price{font-size:22px;font-weight:800;letter-spacing:-.04em;line-height:1} .svc .price small{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0} .svc .arrow{width:33px;height:33px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center; font-size:12px;color:var(--muted);transition:.18s;flex:none} .svc:hover .arrow{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .svc .tierpill{position:absolute;top:15px;right:15px;font:500 9.5px/1 var(--mono);letter-spacing:.09em; text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-line); padding:5px 8px;border-radius:99px} .morebar{margin-top:26px;display:flex;justify-content:space-between;align-items:center;gap:16px; padding:18px 22px;border:1px dashed var(--line);border-radius:var(--r);flex-wrap:wrap} .morebar p{font-size:14px;color:var(--muted)} /* ============================================================ 9. HOW IT WORKS ============================================================ */ .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px;position:relative} .flow::before{content:"";position:absolute;top:26px;left:7%;right:7%;height:1px;background:var(--line)} .step{position:relative} .step .n{width:53px;height:53px;border-radius:15px;background:var(--white);border:1px solid var(--line); display:grid;place-items:center;font-weight:800;font-size:17px;position:relative;z-index:2;color:var(--accent)} .step h3{font-size:17px;margin:17px 0 8px} .step p{font-size:14px;color:var(--muted);max-width:250px} /* ============================================================ 10. WHY / GUARANTEES ============================================================ */ .why{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px} .wcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--white); display:flex;flex-direction:column;gap:11px;transition:.2s} .wcard:hover{border-color:var(--accent-line);box-shadow:var(--shadow-sm)} .wcard .ic{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent); display:grid;place-items:center;font-size:16px;border:1px solid var(--accent-line)} .wcard h3{font-size:17px} .wcard p{font-size:14px;color:var(--muted)} /* ============================================================ 11. DASHBOARD / TRACKING ============================================================ */ .control{position:relative;overflow:hidden} .control::before{content:"";position:absolute;width:880px;height:520px;left:50%;top:62%; transform:translate(-50%,-50%);background:radial-gradient(ellipse,var(--accent-soft),transparent 66%)} .control .wrap{position:relative} .panel{margin-top:46px;border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden; background:var(--ink-2);box-shadow:var(--shadow)} .panel .bar{display:flex;align-items:center;gap:8px;padding:13px 17px;border-bottom:1px solid var(--line-dark)} .panel .bar i{width:10px;height:10px;border-radius:50%;background:var(--line-dark)} .panel .bar span{margin-left:10px;font:500 11px/1 var(--mono);color:var(--on-ink-mut)} .panel .body{display:grid;grid-template-columns:186px 1fr} .panel .side{border-right:1px solid var(--line-dark);padding:17px 13px} .panel .side a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:13px; color:var(--on-ink-mut)} .panel .side a.on{background:var(--accent-soft);color:var(--accent);font-weight:700} .panel .side a i{width:15px;text-align:center;font-size:12px} .panel .main{padding:22px;min-width:0} /* the order table has a real min-content width; let IT scroll rather than letting it push the whole page sideways on a phone */ .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .otable{min-width:430px} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px} .kpi{border:1px solid var(--line-dark);border-radius:var(--r);padding:14px 16px} .kpi span{font:500 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--on-ink-mut)} .kpi b{display:block;margin-top:9px;font-size:22px;letter-spacing:-.04em;color:var(--on-ink)} .kpi b.on{color:var(--accent)} .otable{width:100%;border-collapse:collapse;font-size:13px} .otable th{text-align:left;font:500 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase; color:var(--on-ink-mut);padding:0 0 11px;border-bottom:1px solid var(--line-dark);font-weight:500} .otable td{padding:12px 0;border-bottom:1px solid var(--line-dark);color:var(--on-ink)} .otable td.mut{color:var(--on-ink-mut)} .badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:4px 9px;border-radius:99px} .badge.ok{background:var(--accent-soft);color:var(--accent)} .badge.run{background:rgba(255,255,255,.07);color:var(--on-ink-mut)} .cfeat{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px} .cfeat span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line-dark); border-radius:999px;font-size:13px;color:var(--on-ink-mut)} .cfeat span i{color:var(--accent);font-size:12px} /* ============================================================ 12a. SHOPPERCHECKED — independent, third-party proof ============================================================ */ /* renamed from .sc — it collided with .ptab .sc (the tab rating line) and painted a light box behind it on every inactive tab. */ .scband{background:var(--paper)} .schead{display:flex;align-items:center;gap:26px;flex-wrap:wrap; padding:22px 26px;background:var(--white);border:1px solid var(--line); border-radius:var(--r-lg);box-shadow:var(--shadow-sm);margin-bottom:26px} .schead .logo{display:flex;align-items:center;gap:11px;padding-right:26px;border-right:1px solid var(--line)} .schead .logo img{height:30px;width:auto} .schead .logo b{font-size:15px;letter-spacing:-.02em} .schead .logo span{display:block;font-size:11px;color:var(--muted);font-weight:500} .schead .score{display:flex;align-items:center;gap:13px} .schead .score b{font-size:34px;letter-spacing:-.05em;line-height:1} .schead .score .stars{color:var(--accent);font-size:14px;letter-spacing:2px} .schead .score small{display:block;font-size:12px;color:var(--muted);margin-top:3px} .schead .go{margin-left:auto} .scgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sccard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px; display:flex;flex-direction:column;gap:13px} .sccard .stars{color:var(--accent);font-size:13px;letter-spacing:2px} .sccard p{font-size:15px;line-height:1.6;font-weight:500} .sccard .who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)} .sccard .av{width:36px;height:36px;border-radius:50%;background:var(--accent-grad);color:#fff; display:grid;place-items:center;font-weight:800;font-size:13px;flex:none} .sccard .who b{font-size:13.5px;display:block} .sccard .who span{font-size:11.5px;color:var(--muted)} .sccard .gain{font:600 11.5px/1 var(--mono);color:var(--accent);letter-spacing:.04em} /* ============================================================ 12b. PLATFORM REVIEWS — our own order reviews ============================================================ */ .evid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start} .ratingbox{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin:24px 0; display:flex;align-items:center;gap:20px} .ratingbox b{font-size:45px;letter-spacing:-.06em;line-height:1} .ratingbox .stars{color:var(--accent);font-size:15px;letter-spacing:2px} .ratingbox small{display:block;color:var(--muted);font-size:12.5px;margin-top:5px} .rdist{display:flex;flex-direction:column;gap:6px;flex:1} .rdist div{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--muted)} .rdist .bar{flex:1;height:6px;border-radius:99px;background:var(--paper);overflow:hidden} .rdist .bar i{display:block;height:100%;background:var(--accent);border-radius:99px} .revgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .rev{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:19px; display:flex;flex-direction:column;gap:11px} .rev .stars{color:var(--accent);font-size:12px;letter-spacing:2px} .rev p{font-size:14px;line-height:1.6} .rev .who{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)} .rev .av{width:33px;height:33px;border-radius:50%;background:var(--accent-soft);color:var(--accent); display:grid;place-items:center;font-weight:800;font-size:12.5px;flex:none} .rev .who b{font-size:13px;display:block} .rev .who span{font-size:11.5px;color:var(--muted)} /* ============================================================ 13. SUBSCRIPTIONS ============================================================ */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px;align-items:start} .plan{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:var(--white); display:flex;flex-direction:column;gap:14px} .plan.hot{border-color:var(--accent);box-shadow:0 20px 50px -30px var(--accent);position:relative} .plan.hot::after{content:"Most chosen";position:absolute;top:-11px;left:26px;background:var(--accent); color:var(--on-accent);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:5px 11px;border-radius:99px} .plan h3{font-size:18px} .plan .cost{display:flex;align-items:baseline;gap:6px} .plan .cost b{font-size:38px;letter-spacing:-.05em} .plan .cost span{color:var(--muted);font-size:13px} .plan ul{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:9px} .plan li{display:flex;gap:10px;font-size:13.5px;color:var(--muted);align-items:flex-start} .plan li i{color:var(--accent);font-size:11px;margin-top:5px;flex:none} /* ============================================================ 14. FREE TOOLS ============================================================ */ .tools{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px} .tool{display:flex;align-items:center;gap:12px;padding:15px 17px;border:1px solid var(--line); border-radius:var(--r);background:var(--white);transition:.18s;font-size:13.5px;font-weight:600} .tool:hover{border-color:var(--accent-line);color:var(--accent);transform:translateY(-2px)} .tool i{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent); display:grid;place-items:center;font-size:13px;flex:none} /* ============================================================ 15. FAQ ============================================================ */ .helpgrid{display:grid;grid-template-columns:.72fr 1.28fr;gap:60px;align-items:start} .faq{border-top:1px solid var(--line)} details{border-bottom:1px solid var(--line);padding:17px 0} summary{list-style:none;cursor:pointer;font-size:15.5px;font-weight:700;display:flex; justify-content:space-between;gap:18px;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:"\f067";font:900 11px/1 "Font Awesome 6 Free";color:var(--accent); transition:.2s;flex:none} details[open] summary::after{content:"\f068"} details p{margin-top:12px;color:var(--muted);font-size:14.5px;max-width:74ch} .paybox{margin-top:30px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--white)} .paybox .mono{color:var(--muted);display:block;margin-bottom:12px} .paybox .m{display:flex;gap:9px;flex-wrap:wrap} .paybox .m span{padding:8px 13px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;font-weight:600} /* ============================================================ 16. FINAL CTA + FOOTER ============================================================ */ /* .final supplies its own vertical rhythm — don't stack --sec on top of it */ .final{position:relative;overflow:hidden;text-align:center;padding:0} .final::before{content:"";position:absolute;width:760px;height:760px;left:50%;top:52%; transform:translate(-50%,-50%);background:radial-gradient(circle,var(--accent-soft),transparent 62%)} .final .wrap{position:relative;padding:112px 0} .final h2{font-size:clamp(38px,5.6vw,72px);letter-spacing:-.055em} .final h2 em{font-style:normal;color:var(--accent)} .final p{margin:20px auto 0;max-width:520px} .final .row{display:flex;gap:12px;justify-content:center;margin-top:30px;flex-wrap:wrap} footer{background:var(--ink);color:var(--on-ink-mut);padding:70px 0 28px;font-size:13.5px} .fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px 28px} .fgrid h5{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--on-ink); margin:0 0 15px} .fgrid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px} .fgrid a:hover{color:var(--accent)} .fbrand{font-weight:800;font-size:21px;color:var(--on-ink);letter-spacing:-.05em;margin-bottom:13px} .fbrand b{color:var(--accent)} .fabout{max-width:290px;line-height:1.65;font-size:13px} .flangs{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px} .flangs a{border:1px solid var(--line-dark);padding:4px 9px;border-radius:7px;font:500 11px/1 var(--mono)} .flangs a:hover{border-color:var(--accent);color:var(--accent)} .fbot{margin-top:46px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex; justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px} /* ============================================================ 18. RESPONSIVE ============================================================ */ @media(max-width:1080px){ :root{--sec:82px} .evid,.helpgrid,.answer .wrap,.splithead{grid-template-columns:1fr;gap:38px} .splithead{align-items:start} .grid,.tools,.scgrid,.storygrid{grid-template-columns:1fr 1fr} .scgrid > :nth-child(3){grid-column:1/-1} .statrow{grid-template-columns:repeat(3,1fr);row-gap:0} .stat:nth-child(4){border-left:0;padding-left:0} .why,.plans{grid-template-columns:1fr} .flow{grid-template-columns:1fr 1fr;gap:28px} .flow::before{display:none} .fgrid{grid-template-columns:1fr 1fr 1fr} .panel .body{grid-template-columns:1fr} .panel .side{display:flex;gap:4px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line-dark)} .panel .side a{white-space:nowrap} .kpis{grid-template-columns:1fr 1fr} } @media(max-width:820px){ .nav,.navactions .only-desktop{display:none} .hamb{display:block} } @media(max-width:620px){ :root{--sec:64px;--gutter:17px} /* header: brand + language picker + burger. Sign in / Get started moved to the footer, which freed the room — so the picker stays visible on phones (it used to be hidden here "for the drawer", but no drawer exists). */ .navrow{gap:10px} .brand{font-size:18px} .langbtn{padding:8px 10px} .langmenu{min-width:190px} .hero{padding:30px 0 48px} .hero h1{font-size:32px} .hero .sub{font-size:16px} .hero .sub span{font-size:15px} .ptab{padding:13px 15px} .ptab-nav{width:40px} .pbody{padding:18px 17px 2px} .prows{grid-template-columns:1fr} .prows .prow:nth-child(2){border-top:1px solid var(--line)} .pmarkets{padding-inline:17px} .pquote,.ppay{padding-inline:15px} .pquote{gap:10px} .pquote .by{margin-left:0} .pquote .read{margin-left:auto} .trustrow{gap:12px 18px;justify-content:flex-start} .statrow{grid-template-columns:1fr 1fr} .stat{padding:22px 0 22px 18px;border-left:1px solid var(--line-dark)} .stat:nth-child(odd){border-left:0;padding-left:0} .stat:nth-child(4){border-left:1px solid var(--line-dark);padding-left:18px} .stat b{font-size:25px} .grid,.revgrid,.tools,.answer .facts,.scgrid,.storygrid{grid-template-columns:1fr} .trust{padding:40px 0 28px} .marquee img{height:24px;margin:0 22px} .scgrid > :nth-child(3){grid-column:auto} .schead{gap:16px} .schead .logo{border-right:0;padding-right:0} .schead .go{margin-left:0;width:100%} .flow{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr 1fr} .ratingbox{flex-wrap:wrap} } /* ============================================================ 19. PRODUCT PAGE (page.php) ============================================================ */ .pdp-top{padding-top:56px} .pdp-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start} .crumbs{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:18px;flex-wrap:wrap} .crumbs a:hover{color:var(--accent)} .crumbs b{color:var(--copy);font-weight:600} .pdp-intro h1{font-size:clamp(30px,3.8vw,46px);letter-spacing:-.04em;margin-bottom:16px} .pdp-intro .lede{max-width:56ch} .pdp-specs{display:flex;gap:1px;background:var(--line);border:1px solid var(--line); border-radius:var(--r);overflow:hidden;margin:26px 0 22px;flex-wrap:wrap} .pdp-specs div{background:var(--white);padding:13px 18px;flex:1 1 120px} .pdp-specs span{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.12em; text-transform:uppercase;color:var(--muted)} .pdp-specs b{display:block;margin-top:7px;font-size:17px;letter-spacing:-.03em} .pdp-ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px} .pdp-ticks li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--muted)} .pdp-ticks i{color:var(--accent);font-size:11px;margin-top:5px} /* ---- order panel ---- */ .pdp-order{position:sticky;top:92px} .orderbox{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px; box-shadow:0 2px 4px -2px rgba(12,13,18,.08),0 18px 44px -24px rgba(12,13,18,.26); display:flex;flex-direction:column;gap:15px} .orderbox .h3{font-size:20px;margin-bottom:2px} .orderbox p{font-size:14px;color:var(--muted)} .fld{display:block} .fld > span:first-child{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;margin-bottom:8px} .fld > span:first-child small{font-weight:500;color:var(--muted);font-size:12px} .fld i.n{width:19px;height:19px;border-radius:50%;background:var(--accent);color:var(--on-accent); display:grid;place-items:center;font:800 10.5px/1 var(--font);font-style:normal;flex:none} .fld .selwrap{position:relative;display:block} .fld select,.fld input[type=text]{ appearance:none;width:100%;padding:12px 14px;border-radius:10px;font:600 14px var(--font); background:var(--white);border:1px solid var(--line);color:var(--copy);cursor:pointer} .fld input[type=text]{cursor:text;font-weight:500} .fld select:focus,.fld input:focus{outline:2px solid var(--accent);outline-offset:1px} .fld .selwrap::after{content:"\f078";font:900 10px/1 "Font Awesome 6 Free";color:var(--muted); position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none} .checkrow{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--muted);cursor:pointer} .checkrow input{margin-top:3px;accent-color:var(--accent);flex:none} .checkrow strong{color:var(--copy)} .ordertotal[hidden]{display:none} /* [hidden] must beat display:flex below */ .ordertotal{display:flex;justify-content:space-between;align-items:baseline; padding-top:14px;border-top:1px solid var(--line)} .ordertotal span{font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .ordertotal b{font-size:29px;letter-spacing:-.045em;font-variant-numeric:tabular-nums} .orderbox .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} .orderfoot{font-size:11.5px;color:var(--muted);text-align:center} .orderfoot i{color:var(--accent);margin-right:5px} /* ---- price table (light variant of the ladder) ---- */ .pricetable{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .pricetable .lad-hd{border-bottom:1px solid var(--line);color:var(--muted)} .pricetable .lad-hd b{color:var(--copy);font-family:var(--font);font-size:14px;text-transform:none;letter-spacing:-.01em} .pricetable .lad-hd span{font:500 10px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase} .tiersearch{position:relative;padding:12px 20px;border-bottom:1px solid var(--line)} .tiersearch i{position:absolute;left:32px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:12px} .tiersearch input{width:100%;padding:10px 14px 10px 34px;border-radius:9px;border:1px solid var(--line); font:500 13.5px var(--font);background:var(--paper)} .tiersearch input:focus{outline:2px solid var(--accent);outline-offset:1px} .pricetable .lcols{border-bottom:1px solid var(--line);color:var(--muted)} .pricetable .lrow{border-bottom:1px solid var(--line);padding-block:11px} .pricetable .lrow:last-child{border-bottom:0} .pricetable .lrow .m{color:var(--copy)} .pricetable .lrow .n{color:var(--muted)} .pricetable .lrow .t{color:var(--copy)} .pricetable .lad-ft{border-top:1px solid var(--line);color:var(--muted)} .tierempty{padding:22px 20px;text-align:center;color:var(--muted);font-size:14px; border-top:1px solid var(--line)} /* ---- WYSIWYG prose from the database ---- */ .prose-wrap{max-width:820px} .prose{font-size:16.5px;line-height:1.72;color:var(--copy)} .prose h2{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.035em;margin:38px 0 14px} .prose h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.025em;margin:30px 0 12px} .prose h4{font-size:17px;margin:24px 0 10px} .prose > :first-child{margin-top:0} .prose p{margin:0 0 17px} .prose ul,.prose ol{margin:0 0 18px;padding-left:22px} .prose li{margin-bottom:8px} .prose a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px} .prose strong,.prose b{font-weight:700} .prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px} .prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left} .prose th{background:var(--paper);font-weight:700} .prose blockquote{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--accent); background:var(--paper);border-radius:0 var(--r-sm) var(--r-sm) 0} /* Some rows are one long

chained with
and no headings at all. Give those a little more air so they do not read as a wall. */ .prose-flat br{content:"";display:block;margin-bottom:11px} @media(max-width:1080px){ .pdp-grid{grid-template-columns:minmax(0,1fr);gap:34px} .pdp-order{position:static;max-width:520px} } @media(max-width:620px){ .pdp-top{padding-top:34px} .orderbox{padding:18px} .pdp-specs div{flex:1 1 44%;padding:11px 14px} .prose{font-size:15.5px} .pricetable .lad-hd,.pricetable .lrow,.pricetable .lad-ft,.tiersearch{padding-inline:15px} .tiersearch i{left:27px} } /* ---- popular-markets peek, beside the order panel ---- */ .pdp-peek{margin-top:28px;border:1px solid var(--line);border-radius:var(--r-lg); background:var(--white);overflow:hidden;max-width:520px} .pdp-peek-h{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:13px 18px;border-bottom:1px solid var(--line)} .pdp-peek-h b{font-size:13.5px;letter-spacing:-.01em} .pdp-peek-h a{font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap} .pdp-peek-row{display:flex;align-items:center;gap:12px;padding:11px 18px; border-bottom:1px solid var(--line);font-size:13.5px} .pdp-peek-row:last-child{border-bottom:0} .pdp-peek-row .m{display:flex;align-items:center;gap:9px;min-width:0;flex:1} .pdp-peek-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600} .pdp-peek-row .q{font:500 11.5px/1 var(--mono);color:var(--muted);white-space:nowrap} .pdp-peek-row b{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums} /* ---- price-ladder primitives ---- These were originally defined with the Market Desk. That section was removed from the homepage, but page.php's price table uses the same primitives, so they live here now. Do not delete without checking page.php. */ .lad-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px} .lad-hd b{font-size:14px} .lrow{display:grid;grid-template-columns:minmax(0,1.45fr) .62fr .84fr .84fr;gap:10px; align-items:center;padding:0 20px;font-size:13px} .lcols{padding-block:9px;font:500 9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase} .lcols i{text-align:right;font-style:normal} .lrow .m{display:flex;align-items:center;gap:9px;font-weight:600;min-width:0} .lrow .m .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lrow .n{font:500 12px var(--mono);text-align:right;font-variant-numeric:tabular-nums} .lrow .t{font-weight:800;text-align:right;font-variant-numeric:tabular-nums} .lad-ft{padding:11px 20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px} .lad-ft a{color:var(--accent);font-weight:700} @media(max-width:620px){ /* drop the min column; the rate and the price are what people compare. Targeted by class, not :first-of-type — these cells are all spans. */ .lrow{grid-template-columns:minmax(0,1.15fr) .82fr .82fr;gap:7px;font-size:12.5px} .lrow .min,.lcols .min{display:none} } /* ---- product head: square tile + title + rating ---- */ .pdp-head{display:flex;gap:22px;align-items:flex-start} .pdp-shot{width:132px;height:132px;flex:none;border-radius:var(--r-lg);object-fit:cover; border:1px solid var(--line);background:var(--paper)} .pdp-shot.fallback{display:grid;place-items:center;font-size:44px;color:#fff; background:var(--accent-grad);border:0} .pdp-shot.fallback.ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b 48%,#6228d7)} .pdp-shot.fallback.tt,.pdp-shot.fallback.xx,.pdp-shot.fallback.th{background:#0c0c0c} .pdp-shot.fallback.yt{background:#ff0000}.pdp-shot.fallback.fb{background:#1877f2} .pdp-shot.fallback.sp{background:#1ed760}.pdp-shot.fallback.rd{background:#ff4500} .pdp-shot.fallback.li{background:#0a66c2}.pdp-shot.fallback.tg{background:#2aabee} .pdp-shot.fallback.wa{background:#25d366}.pdp-shot.fallback.dc{background:#5865f2} .pdp-shot.fallback.pi{background:#e60023}.pdp-shot.fallback.sc{background:#ff5500} .pdp-headtext{min-width:0;flex:1} .pdp-headtext h1{margin-bottom:10px} .ratingline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px} .ratingline b{font-size:21px;letter-spacing:-.03em} .ratingline .outof{font-size:13px;color:var(--muted)} .ratingline .stars{color:var(--accent);font-size:13px;letter-spacing:1px;display:inline-flex;gap:2px} .ratingline a{font-size:13px;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .ratingline a:hover{color:var(--accent)} /* ---- review summary block ---- */ .revsummary{display:grid;grid-template-columns:230px minmax(0,1fr);gap:34px;align-items:center; background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg); padding:24px 26px;margin-bottom:26px} .revscore{text-align:center;border-right:1px solid var(--line);padding-right:26px} .revscore b{display:block;font-size:52px;line-height:1;letter-spacing:-.05em} .revscore .outof{font-size:12px;color:var(--muted)} .revscore .stars{color:var(--accent);font-size:15px;margin:9px 0 6px;display:flex;gap:3px;justify-content:center} .revscore small{font-size:12px;color:var(--muted)} .revdist{display:flex;flex-direction:column;gap:7px} .revdist div{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--muted)} .revdist .lbl{width:30px;flex:none;white-space:nowrap} .revdist .bar{flex:1;height:7px;border-radius:99px;background:var(--paper);overflow:hidden} .revdist .bar i{display:block;height:100%;background:var(--accent);border-radius:99px} .revdist .num{width:38px;text-align:right;flex:none;font-variant-numeric:tabular-nums} /* Homepage "reviews by service" picker (service-reviews section). */ .svcpick{display:flex;align-items:center;gap:12px;margin:0 0 22px;flex-wrap:wrap} .svcpick label{font-size:13px;font-weight:700;color:var(--muted)} .svcpick-sel{position:relative;display:inline-flex;align-items:center} .svcpick-sel select{appearance:none;-webkit-appearance:none;font:inherit;font-weight:700; padding:11px 42px 11px 15px;border:1px solid var(--line);border-radius:11px; background:var(--white);color:var(--copy);cursor:pointer;min-width:240px;max-width:100%} .svcpick-sel select:hover{border-color:var(--accent-line)} .svcpick-sel select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .svcpick-sel i{position:absolute;right:15px;pointer-events:none;font-size:12px;color:var(--muted)} .revgrid.loading{opacity:.45} #svcRevGrid{transition:opacity .15s ease} @media(max-width:560px){.svcpick-sel,.svcpick-sel select{width:100%}} .revmore{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:26px;flex-wrap:wrap} .revmore-note{font-size:12.5px;color:var(--muted)} @media(max-width:1080px){ .revsummary{grid-template-columns:minmax(0,1fr);gap:22px} .revscore{border-right:0;border-bottom:1px solid var(--line);padding:0 0 18px} } @media(max-width:620px){ .pdp-head{gap:15px} .pdp-shot{width:88px;height:88px;border-radius:var(--r)} .pdp-shot.fallback{font-size:30px} .revsummary{padding:18px} .revscore b{font-size:42px} } /* ---- homepage review wall + numbered pager ---- */ .wallhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:24px; padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)} .wallscore{display:flex;align-items:baseline;gap:8px} .wallscore b{font-size:28px;letter-spacing:-.04em} .wallscore .outof{font-size:12.5px;color:var(--muted)} .wallscore .stars{color:var(--accent);font-size:13px;display:inline-flex;gap:2px;margin-left:5px; transform:translateY(-1px)} .wallnote{font-size:13px;color:var(--muted)} .wallhead .btn{margin-left:auto} /* Exactly 5 per page, so lay out 5 across and avoid an orphan second row. auto-fit gave 4 + 1. */ .wallgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px; transition:opacity .15s;align-items:stretch} .wallgrid.loading{opacity:.45} .wallgrid .rev p{font-size:13.5px} @media(max-width:1100px){.wallgrid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.wallgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.wallgrid{grid-template-columns:minmax(0,1fr)}} .pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:28px;flex-wrap:wrap} .pager .pg{min-width:38px;height:38px;padding:0 11px;border-radius:9px;cursor:pointer; border:1px solid var(--line);background:var(--white);color:var(--copy); font:700 13.5px var(--font);display:grid;place-items:center;transition:.15s} .pager .pg:hover:not([disabled]):not([aria-current]){border-color:var(--accent);color:var(--accent)} .pager .pg[aria-current="page"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)} .pager .pg[disabled]{opacity:.35;cursor:not-allowed} .pager .pg.nav{font-size:11px} .pager .gap{min-width:22px;text-align:center;color:var(--muted);font-weight:700} @media(max-width:620px){ .wallhead{gap:10px} .wallhead .btn{margin-left:0;width:100%} .pager .pg{min-width:34px;height:34px;padding:0 8px;font-size:12.5px} } /* ---- leave-a-review form ---- */ .revform{margin-top:30px;background:var(--white);border:1px solid var(--line); border-radius:var(--r-lg);padding:26px} .revform-head h3{font-size:20px;margin-bottom:6px} .revform-head p{font-size:14px;color:var(--muted);margin-bottom:20px} .revform-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .revform-grid .full{grid-column:1/-1} .revform .fld > span{display:flex;align-items:baseline;gap:8px;font-size:13px;font-weight:700;margin-bottom:8px} .revform .fld > span small{font-weight:500;color:var(--muted);font-size:11.5px} .revform input[type=text],.revform input[type=email],.revform textarea{ width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line); font:500 14px var(--font);background:var(--white);color:var(--copy)} .revform textarea{resize:vertical;line-height:1.6} .revform input:focus,.revform textarea:focus{outline:2px solid var(--accent);outline-offset:1px} /* honeypot: off-screen, not display:none — some bots skip hidden fields */ .revform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .starpick{display:flex;gap:5px} .starpick button{width:38px;height:38px;border-radius:9px;border:1px solid var(--line); background:var(--white);color:var(--line);cursor:pointer;font-size:15px;transition:.14s} .starpick button.on{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)} .starpick button:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .revform-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px} .revform-msg{font-size:13.5px;margin:0} .revform-msg.good{color:#127a45;font-weight:600} .revform-msg.bad{color:#b3261e;font-weight:600} @media(max-width:620px){ .revform{padding:18px} .revform-grid{grid-template-columns:1fr} } /* ============================================================ LEGAL PAGES — /terms-of-use, /policy, /refill-policy (_legal_layout.php) ============================================================ */ .legal-top{background:var(--paper);border-bottom:1px solid var(--line);padding:54px 0 34px} .legal-top .crumbs{margin-bottom:16px} .legal-top .h1{margin:0 0 10px} .legal-meta{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0} .legal-grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:56px;align-items:start;padding:52px 0 100px} .legal-nav{position:sticky;top:96px;display:flex;flex-direction:column;gap:3px} .legal-nav h6{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px 12px} .legal-nav a{padding:9px 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--copy)} .legal-nav a:hover{background:var(--paper);color:var(--accent)} .legal-nav a[aria-current]{background:var(--accent-soft);color:var(--accent)} .legal-body{max-width:760px} .legal-body .legal-lead{font-size:18px;color:var(--muted);line-height:1.6} .legal-body .legal-points{list-style:none;padding:0;margin:28px 0;display:grid;gap:10px} .legal-body .legal-points li{display:flex;gap:14px;margin:0;padding:16px 18px;border:1px solid var(--line); border-radius:var(--r);background:var(--white);font-size:15px;line-height:1.55;color:var(--muted)} .legal-points li i{color:var(--accent);width:18px;text-align:center;margin-top:4px;flex:none} .legal-points li strong{display:block;color:var(--copy);margin-bottom:2px} .rf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:30px 0 8px} .rf-card{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--white)} .rf-card .rf-ic{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px; background:var(--accent-soft);color:var(--accent);margin-bottom:12px} .legal-body .rf-card h3{font-size:16.5px;margin:0 0 8px;letter-spacing:-.01em} .legal-body .rf-card ul{padding-left:18px;margin:0;font-size:14.5px;line-height:1.55;color:var(--muted)} .legal-body .rf-card li{margin-bottom:6px} .legal-help{margin-top:40px;padding:22px 24px;border-radius:var(--r-lg);background:var(--ink);color:var(--on-ink); display:flex;justify-content:space-between;gap:18px 26px;align-items:center;flex-wrap:wrap} .legal-help b{display:block;color:#fff;font-size:16.5px;margin-bottom:4px} .legal-help p{margin:0;color:var(--on-ink-mut);font-size:14.5px;line-height:1.55;max-width:52ch} .legal-help-a{display:flex;gap:8px;flex-wrap:wrap} .prose .legal-help a{text-decoration:none} .legal-help .btn.light{color:var(--copy)} .legal-help .legal-mail{background:transparent;color:#fff;border-color:var(--line-dark)} .legal-help .legal-mail:hover{border-color:var(--accent-2);color:var(--accent-2)} @media(max-width:900px){ .legal-grid{grid-template-columns:minmax(0,1fr);gap:22px;padding:28px 0 72px} .legal-nav{position:static;flex-direction:row;flex-wrap:wrap} .legal-nav h6{width:100%;margin-left:0} .rf-grid{grid-template-columns:minmax(0,1fr)} }