/* /conversion-rate-optimisation (owner, 1 Oct 2026: the page redesigned in the Google Ads pattern). This file is the
   render-blocking part: the hero and its figures. The sections below load from sv-cro.css without blocking the first
   paint. */

/* laptop screens (wider than 1080px, 950px tall or less): the long headline sets smaller in a wider copy column and the
   intro a touch tighter, so the hero's call to action shows without scrolling (svx.css sets the shared spacing) */
@media (min-width:1081px) and (max-height:950px){
  .crx-hero-sec .wdp-hero__cols{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px}
  main.svc .crx-hero-sec .wdp-hero__title{font-size:clamp(38px,min(4.1vw,6.3vh),60px)}
  main.svc .crx-hero-sec .wdp-hero__intro{max-width:600px;font-size:16px;line-height:1.55}
}
/* four headline figures (the fifth, years in business, is off service pages): one row beside their heading on
   desktop, two by two below it */
.crx-hero-sec .svc-stats--wide.crx-stats--4{grid-template-columns:minmax(0,.8fr) repeat(4,minmax(0,1fr))}
@media (max-width:1080px){.crx-hero-sec .svc-stats--wide.crx-stats--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============ HERO: the split test (kit/cro/hero). While it runs, [data-phase] test → win → ship: the days count, the
   confidence builds, B wins (.is-win) and ships (.is-shipped); the visitors are dots made by sv-cro.js. At rest the
   test shows finished with B the winner ============ */
.crh{display:grid;gap:16px}
.crh__pic{position:relative;display:grid;gap:12px;padding:16px;border-radius:26px;border:1px solid var(--edge-2);background:linear-gradient(180deg,#13161B,#0C0E12);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.95)}
.crh__cap{margin:0;padding-left:14px;border-left:2px solid var(--gold);font:800 16px/1.35 var(--font-head);letter-spacing:-.01em;color:var(--text)}

/* where the visitors come from */
.crh-src{display:grid;justify-items:center;gap:8px}
.crh-q{display:flex;align-items:center;gap:10px;width:100%;max-width:420px;height:42px;padding:0 16px;border-radius:100px;border:1px solid var(--gold-line);background:#0B0D11;
  box-shadow:0 0 0 4px rgba(244,160,0,.06)}
.crh-q svg{flex:0 0 auto;width:15px;height:15px;color:var(--gold)}
.crh-q__t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;color:var(--text)}
.crh-q__caret{flex:0 0 auto;width:2px;height:16px;margin-left:-8px;background:var(--gold);animation:crhBlink 1.1s steps(1) infinite}
@keyframes crhBlink{50%{opacity:0}}
.crh-mid{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.crh-exit{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:48%;padding:5px 9px;border-radius:9px;border:1px dashed var(--coral-line);
  background:rgba(255,122,107,.05);font:600 10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--coral);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crh-exit svg{flex:0 0 auto;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crh-split{display:flex;align-items:center;justify-content:center;gap:8px;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.crh-split i{width:18px;height:1px;background:var(--edge-2)}

/* the two pages */
.crh-pages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.crh-page{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;min-width:0;border-radius:16px;border:1px solid var(--edge);background:#0B0D11;overflow:hidden;
  transition:border-color .45s,opacity .5s,filter .5s}
.crh-page__bar{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-bottom:1px solid var(--edge);background:#101318}
.crh-page__bar .wdp-dots{flex:0 0 auto}
.crh-page__bar b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mid)}
.crh-page__bar em{display:none;margin-left:auto;padding:3px 7px;border-radius:100px;font:800 9.5px/1.1 var(--font-head);font-style:normal;white-space:nowrap}
.crh-page__win{background:var(--gold);color:#111}
.crh-page__live{background:var(--teal);color:#0A1512}
.crh-page__off{border:1px solid var(--edge-2);color:var(--text-dim)}
.crh-page.is-win{border-color:var(--gold-line);box-shadow:0 0 0 3px rgba(244,160,0,.08)}
.crh-page.is-win .crh-page__win{display:inline-block}
.crh.is-shipped .crh-page--a{opacity:.42;filter:saturate(.2)}
.crh.is-shipped .crh-page--a .crh-page__off,.crh.is-shipped .crh-page--b .crh-page__live{display:inline-block}
.crh.is-shipped .crh-page--b .crh-page__win{display:none}
.crh.is-shipped .crh-page--b{border-color:var(--teal-line);box-shadow:0 0 0 3px rgba(79,191,160,.08)}
.crh-page__body{display:grid;align-content:start;gap:8px;height:196px;padding:14px 12px 10px}
.crh-sk{display:block;width:88%;height:7px;border-radius:4px;background:rgba(255,255,255,.1)}
.crh-sk.is-short{width:58%}
.crh-sk--h{height:10px;background:rgba(255,255,255,.22)}
.crh-page__img{display:block;height:56px;margin:4px 0;border-radius:9px;background:linear-gradient(160deg,#252A33,#15181D)}
.crh-page__img.is-small{height:34px}
.crh-page__btn{justify-self:start;display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:9px;font:800 11.5px/1.1 var(--font-head);white-space:nowrap;
  transition:box-shadow .3s,transform .2s}
.crh-page--a .crh-page__btn{margin-top:4px;border:1px solid var(--edge-2);color:var(--text-soft)}
.crh-page--b .crh-page__btn{background:var(--gold);color:#111}
.crh-page__btn.is-hit{transform:scale(.95);box-shadow:0 0 0 6px rgba(79,191,160,.25)}
.crh-page__proof{font-size:11px;font-weight:700;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crh-page__trust{font-size:11px;font-weight:600;color:var(--teal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crh-page__foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:9px 10px 10px;border-top:1px solid var(--edge);background:#0E1116}
.crh-page__foot span{display:grid;gap:3px;min-width:0}
.crh-page__foot small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9.5px;font-weight:600;color:var(--text-dim)}
.crh-page__foot b{font:800 14px/1 var(--font-head);letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.crh-page__rate b{font-size:17px;color:var(--text-soft)}
.crh-page--b .crh-page__rate b{color:var(--teal)}

/* the test */
.crh-test{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px 16px;padding:10px 12px;border-radius:14px;border:1px dashed var(--edge-2)}
.crh-test__k{display:inline-flex;align-items:center;gap:7px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mid)}
.crh-test__rec{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--coral)}
.crh[data-phase="test"] .crh-test__rec{animation:crhBlink 1.2s steps(1) infinite}
.crh-test__day{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim);white-space:nowrap}
.crh-test__day b{color:var(--text);font-variant-numeric:tabular-nums}
.crh-test__conf{display:flex;align-items:center;gap:8px;min-width:0}
.crh-test__bar{position:relative;flex:1;min-width:40px;height:8px;border-radius:4px;background:rgba(255,255,255,.08)}
.crh-test__bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold-line),var(--teal));transition:width .6s var(--ease)}
.crh-test__bar u{position:absolute;top:-3px;bottom:-3px;width:1px;background:rgba(255,255,255,.4)}
.crh-test__conf b{font:800 13px/1 var(--font-head);color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap}
.crh-note{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.crh-note p{margin:0;font-size:13.5px;line-height:1.4;color:var(--text-mid)}
.crh-note p b{color:var(--teal)}
.crh-note em{flex:0 0 auto;font:700 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
.crh[data-phase="test"] .crh-note p,.crh[data-phase="win"] .crh-note p{opacity:.35}
.crh-note p{transition:opacity .5s}

/* the visitors */
.crh-dots{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.crh-dot{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#C9CDD3;will-change:transform,opacity}
.crh-dot.is-in{background:var(--teal);box-shadow:0 0 8px rgba(79,191,160,.8)}
.crh-dot.is-out{background:var(--coral)}

@media (max-width:1180px){.crh{max-width:620px;width:100%;margin:0 auto}}
@media (max-width:700px){
  .crh__pic{gap:10px;padding:12px;border-radius:22px}
  .crh-q{height:38px;padding:0 12px}
  .crh-q__t{font-size:13px}
  .crh-exit{font-size:9.5px;padding:4px 7px}
  .crh-pages{gap:8px}
  .crh-page__bar{height:28px;padding:0 8px}
  .crh-page__bar .wdp-dots{display:none}
  .crh-page__body{height:168px;gap:7px;padding:11px 9px 8px}
  .crh-page__btn{min-height:26px;padding:0 9px;font-size:10.5px}
  .crh-page__foot{grid-template-columns:repeat(2,minmax(0,1fr));padding:8px}
  .crh-page__foot span:nth-child(2){display:none}
  .crh-page__foot b{font-size:13px}
  .crh-page__rate b{font-size:15px}
  .crh-test{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px}
  .crh-test__conf{grid-column:1 / -1}
  .crh-note{flex-direction:column;gap:6px}
}
@media (prefers-reduced-motion:reduce){.crh *{animation:none!important;transition:none!important}.crh-dots{display:none}}

/* ============ The CRO pass (2 Oct 2026): pages A and B carry real copy (A vague, B matching the search); the exits say
   where the visitors went; the result waits for the test to finish (the note says the test is running meanwhile) ============ */
.crh-page__h{display:block;font:800 13.5px/1.25 var(--font-head);letter-spacing:-.01em;color:var(--text)}
.crh-page--a .crh-page__h{color:var(--text-mid)}
.crh-page__p{display:block;font-size:11px;line-height:1.4;color:var(--text-soft)}
.crh-page--a .crh-page__p{color:var(--text-dim)}
.crh-exit small{font-size:inherit;font-weight:600;opacity:.75;margin-right:1px}
.crh-note__run{display:none}
.crh[data-phase="test"] .crh-note__run,.crh[data-phase="win"] .crh-note__run{display:block;opacity:1;color:var(--text-soft)}
.crh[data-phase="test"] .crh-note__done,.crh[data-phase="win"] .crh-note__done{display:none}
@media (max-width:700px){.crh-page__h{font-size:12px}.crh-page__p{font-size:10px}}
@media (max-width:700px){.crh-page__body{height:auto;min-height:150px}.crh-page__img{display:none}}
/* the exits truncate instead of widening the picture past small phones (the "left for" label made them longer) */
.crh,.crh__pic{min-width:0;max-width:100%}
.crh-exit{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.crh-exit small{flex:0 0 auto}
/* (owner rules, 2 Oct 2026: picture contents stay inside their frames) the site name ends in … rather than running out
   of its chip; phones up to the large iPhones drop "Left for" and tighten */
.crh-exit__site{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:440px){.crh-exit small{display:none}}
@media (max-width:440px){.crh-exit{font-size:8.5px;padding:4px 6px;gap:4px;max-width:none}.crh-mid{gap:6px}}
.crh__pic{grid-template-columns:minmax(0,1fr)}
.crh-src,.crh-q,.crh-pages,.crh-mid,.crh-test,.crh-note{min-width:0}
.crh-q__t{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}