/* ==========================================================================
   /conversion-rate-optimisation · September 2026 redesign. Loads after
   ind-wdp.css and svx.css; every class here starts crx-.
   Motion rests complete: the base styles are each picture's finished frame.
   Parts marked data-crx-go hold their "before" frame only while JS runs
   (html.el8-js) and they have not been reached; sv-cro.js adds .is-go on
   screen, or at once under reduced motion. Loops pause off screen through
   ind-wdp's .is-live rule, and svx.css stops every animation under reduced
   motion.
   ========================================================================== */
main[data-svc="cro"]{--cx-deep:#090B0E;--cx-card:#0C0E12;--cx-ice:#8AB4F8;--cx-ice-soft:rgba(138,180,248,.12);--cx-ice-line:rgba(138,180,248,.4)}
.crx-pic{display:block;width:100%;height:100%}

/* ---- shared picture strokes and fills ---- */
.crx-pic .p-frame{fill:#12151B;stroke:rgba(255,255,255,.12);stroke-width:1.2}
.crx-pic .p-sk{fill:rgba(255,255,255,.22)}
.crx-pic .p-sk.is-dim{fill:rgba(255,255,255,.1)}
.crx-pic .p-sk.is-hi{fill:rgba(255,255,255,.62)}
.crx-pic .p-sk.is-gold{fill:var(--gold)}
.crx-pic .p-box{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.1)}
.crx-pic .p-btn{fill:var(--gold)}
.crx-pic .p-btn.is-dim{fill:rgba(255,255,255,.18)}
.crx-pic .p-axis{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.crx-sk{display:block;height:8px;border-radius:5px;background:rgba(255,255,255,.14)}
.crx-sk--h{height:12px;width:78%;background:rgba(255,255,255,.55)}
.crx-sk--p{height:6px;width:88%;margin-top:7px}
.crx-sk.is-short{width:52%}
.crx-sk--h + .crx-sk--h{margin-top:7px}

/* ==========================================================================
   HERO · the landing page under test
   ========================================================================== */

/* ==========================================================================
   VALUE · the evidence board
   ========================================================================== */

.crx-ev{position:relative;padding:16px 16px 16px;border-radius:16px;border:1px solid var(--edge-2);background:#0F1217;box-shadow:0 30px 60px -34px rgba(0,0,0,.9);transition:border-color .4s,box-shadow .4s}
.crx-ev__k{display:flex;align-items:center;gap:8px;margin-bottom:12px;font:600 10.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}
.crx-live{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--coral);animation:crxRec 1.6s ease-in-out infinite}
@keyframes crxRec{50%{opacity:.25}}
/* the heatmap */
.crx-heat{position:relative;height:410px;padding:12px 14px;border-radius:10px;background:#141820;border:1px solid var(--edge);overflow:hidden;isolation:isolate}
.crx-heat__nav{display:block;height:10px;width:40%;margin-bottom:16px;border-radius:4px;background:rgba(255,255,255,.1)}
.crx-heat .crx-sk--h{width:70%}
.crx-heat__plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 0}
.crx-heat__plans i{display:block;height:120px;border-radius:8px;border:1px solid var(--edge);background:rgba(255,255,255,.04)}
.crx-heat__plans i.is-mid{border-color:rgba(244,160,0,.3)}
.crx-heat__blob{position:absolute;z-index:-0;border-radius:50%;mix-blend-mode:screen;pointer-events:none;animation:crxHeat 5s ease-in-out infinite}
.crx-heat__blob.is-1{left:2%;top:4%;width:74%;height:22%;background:radial-gradient(closest-side,rgba(255,92,72,.75),rgba(255,160,40,.35) 55%,transparent)}
.crx-heat__blob.is-2{left:28%;top:26%;width:46%;height:30%;background:radial-gradient(closest-side,rgba(255,130,50,.6),rgba(244,200,0,.25) 60%,transparent);animation-delay:-1.6s}
.crx-heat__blob.is-3{left:-6%;top:30%;width:40%;height:22%;background:radial-gradient(closest-side,rgba(244,190,0,.4),transparent);animation-delay:-3s}
.crx-heat__blob.is-4{left:60%;top:34%;width:40%;height:18%;background:radial-gradient(closest-side,rgba(79,191,160,.35),transparent);animation-delay:-2.2s}
@keyframes crxHeat{50%{transform:scale(1.07);opacity:.8}}
.crx-heat__fold{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:22px -14px 16px;padding:8px 14px 0;border-top:1.5px dashed var(--coral);
  font-size:11px;line-height:1.3}
.crx-heat__fold b{font:700 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--coral)}
.crx-heat__fold em{font-style:normal;font-weight:700;color:var(--text)}
.crx-heat__fold ~ *{position:relative;z-index:2}
.crx-heat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--cold,30%);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(60,110,220,.08),rgba(60,110,220,.22))}
.crx-heat__cta{display:inline-block;margin-top:14px;padding:8px 14px;border-radius:100px;border:1px dashed var(--cx-ice-line);background:var(--cx-ice-soft);
  font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--cx-ice)}
/* the hypothesis */
.crx-ev--hypo{background:linear-gradient(180deg,#15130D,#100F0B);border-color:rgba(244,160,0,.22)}
.crx-hypo{display:grid;gap:9px;margin:0}
.crx-hypo > div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;align-items:baseline}
.crx-hypo dt{justify-self:start;padding:3px 7px;border-radius:5px;font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em}
.crx-hypo dt.is-if{background:var(--gold);color:#111}
.crx-hypo dt.is-then{background:var(--teal);color:#08130F}
.crx-hypo dt.is-because{background:rgba(255,255,255,.12);color:var(--text)}
.crx-hypo dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--text-soft)}
.crx-hypo__pri{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px;border-top:1px dashed rgba(244,160,0,.25);font-size:12px;color:var(--text-dim)}
.crx-hypo__pri b{padding:4px 8px;border-radius:5px;border:1px solid var(--gold-line);color:var(--gold);font:700 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
/* the live test */
.crx-run{display:grid;gap:10px}
.crx-run__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:12.5px;color:var(--text-mid)}
.crx-run__row b{font:800 15px/1 var(--font-head);color:var(--text-soft)}
.crx-run__row i{grid-column:1 / -1;height:7px;border-radius:7px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.crx-run__row i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:inherit;background:rgba(255,255,255,.28);transform-origin:left}
.crx-run__row.is-b b{color:var(--teal)}
.crx-run__row.is-b i::after{background:var(--teal)}
.crx-conf{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--edge)}
.crx-conf__ring{flex:0 0 auto;width:46px;height:46px;overflow:visible}
.crx-conf__track,.crx-conf__fill{fill:none;stroke-width:4.5;transform:rotate(-90deg);transform-origin:22px 22px}
.crx-conf__track{stroke:rgba(255,255,255,.08)}
.crx-conf__fill{stroke:var(--teal);stroke-linecap:round;stroke-dasharray:96 100}
.crx-conf__mark{stroke:var(--gold);stroke-width:2.2;stroke-linecap:round}
.crx-conf b{display:block;font:800 14px/1.2 var(--font-head);color:var(--text)}
.crx-conf span{display:block;margin-top:2px;font-size:11.5px;line-height:1.35;color:var(--text-dim)}
/* the winners */
.crx-wins{display:flex;align-items:flex-end;gap:12px;height:120px;padding:0 4px;border-bottom:1px solid var(--edge-2)}
.crx-wins__bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%}
.crx-wins__bar span{font:700 12px/1 var(--font-head);color:var(--text-mid)}
.crx-wins__bar i{display:block;width:100%;height:var(--h);border-radius:6px 6px 0 0;background:linear-gradient(180deg,rgba(79,191,160,.55),rgba(79,191,160,.18));transform-origin:bottom}
.crx-wins__bar.is-top span{color:var(--gold)}
.crx-wins__bar.is-top i{background:linear-gradient(180deg,var(--gold),rgba(244,160,0,.35))}
.crx-wins__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 10px;margin-top:10px;font-size:12px;color:var(--text-dim)}
.crx-wins__foot b{font:800 15px/1 var(--font-head);color:var(--teal);white-space:nowrap}
/* board entrance: the pieces are pinned one by one, then the thread */

@keyframes crxFill{from{transform:scaleX(0)}}
/* the pillar list */

/* ==========================================================================
   WHERE CONVERSIONS LEAK · the flow
   ========================================================================== */
.crx-sankey{margin:0 0 30px}
.crx-sankey__k{margin-bottom:22px;font:600 11.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.crx-sankey__cap{margin:18px 0 0;text-align:right;font-size:12.5px;color:var(--text-dim)}
.crx-flow.is-down{display:none}
.crx-flow.is-across{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.crx-flow.is-across .crx-flow__svg{grid-column:1 / -1;grid-row:2;display:block;width:100%;height:auto;overflow:visible}
.crx-flow__labels{display:contents}
.crx-flow.is-across .crx-flow__stage{grid-row:1;display:grid;gap:4px;align-content:end;padding:0 0 14px 16px;min-width:0}
.crx-flow.is-across .crx-flow__stage[data-at="0"]{grid-column:1;padding-left:0}
.crx-flow.is-across .crx-flow__stage[data-at="1"]{grid-column:2}
.crx-flow.is-across .crx-flow__stage[data-at="2"]{grid-column:3}
.crx-flow.is-across .crx-flow__stage[data-at="3"]{grid-column:3;justify-self:end;text-align:right;padding:0 0 14px}
.crx-flow__stage b{font:800 28px/1 var(--font-head);letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.crx-flow__stage span{font-size:13px;line-height:1.35;color:var(--text-dim)}
.crx-flow__stage.is-done b{color:var(--gold)}
.crx-flow.is-across .crx-flow__loss{grid-row:3;display:grid;justify-items:center;gap:4px;padding:14px 12px 0;text-align:center;transition:opacity .3s}
.crx-flow.is-across .crx-flow__loss[data-at="0"]{grid-column:1}
.crx-flow.is-across .crx-flow__loss[data-at="1"]{grid-column:2}
.crx-flow.is-across .crx-flow__loss[data-at="2"]{grid-column:3}
.crx-flow__loss b{font:800 22px/1 var(--font-head);color:var(--coral);font-variant-numeric:tabular-nums}
.crx-flow__loss span{font-size:13.5px;line-height:1.4;color:var(--text-mid)}
.crx-flow__loss em{display:flex;gap:5px;font-style:normal}
.crx-flow__loss em i{display:grid;place-items:center;min-width:26px;height:20px;padding:0 5px;border-radius:6px;border:1px solid var(--coral-line);
  font:700 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;color:var(--coral)}
.crx-flow__kept{stroke:none}
.crx-flow__lost{transition:opacity .35s}
.crx-flow__run,.crx-flow__drip{fill:none;stroke-linecap:round;stroke-width:3;stroke-dasharray:.1 14;animation:crxRun 1.3s linear infinite}
.crx-flow__run{stroke:rgba(255,255,255,.7)}
.crx-flow__drip{stroke:rgba(255,160,150,.85);animation-duration:1.8s}
@keyframes crxRun{to{stroke-dashoffset:-14.1}}
.crx-flow__node{fill:rgba(240,240,236,.42)}
.crx-flow__node.is-done{fill:var(--gold)}
.crx-flow__glow{fill:rgba(244,160,0,.22);transform-box:fill-box;transform-origin:center;animation:crxGlow 2.4s ease-in-out infinite}
.crx-flow__win{fill:var(--gold)}
@keyframes crxGlow{50%{transform:scale(1.5);opacity:.3}}
.crx-sankey.is-hot .crx-flow__lost:not(.is-on),.crx-sankey.is-hot .crx-flow__drip:not(.is-on){opacity:.25}
.crx-sankey.is-hot .crx-flow__loss:not(.is-on){opacity:.4}
html.el8-js .crx-sankey[data-crx-go]:not(.is-go) .crx-flow__lost,html.el8-js .crx-sankey[data-crx-go]:not(.is-go) .crx-flow__drip{opacity:0}
html.el8-js .crx-sankey[data-crx-go]:not(.is-go) .crx-flow__kept{clip-path:inset(0 100% 0 0)}
.crx-sankey.is-go .crx-flow__kept{animation:crxWipe 1.6s var(--ease) both}
@keyframes crxWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.crx-sankey.is-go .crx-flow__lost{animation:crxFade .9s ease both}
.crx-sankey.is-go .crx-flow__lost[data-crx-drain-shape="1"]{animation-delay:.5s}
.crx-sankey.is-go .crx-flow__lost[data-crx-drain-shape="2"]{animation-delay:.9s}
.crx-sankey.is-go .crx-flow__lost[data-crx-drain-shape="3"]{animation-delay:1.3s}
@keyframes crxFade{from{opacity:0}}
/* the leak cards, each under its drain */

.crx-leak-sec .wdp-band{margin-top:40px}

/* ==========================================================================
   PROCESS · the checkout-style stepper
   ========================================================================== */

/* step pictures */

/* ==========================================================================
   YOUR FIRST 90 DAYS · the ratchet
   ========================================================================== */
.crx-ratchet{margin:0;padding:24px 26px 20px;border-radius:26px;border:1px solid var(--edge-2);background:var(--cx-card)}
.crx-ratchet__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px}
.crx-ratchet__k{font:600 11.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.crx-ratchet__key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--text-mid)}
.crx-ratchet__key li{display:inline-flex;align-items:center;gap:8px}
.crx-ratchet__key i{display:inline-block}
.crx-ratchet__key .is-test i{width:26px;height:10px;border-radius:10px;border:1px solid var(--teal-line);background:var(--teal-soft)}
.crx-ratchet__key .is-win i{width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(244,160,0,.18)}
.crx-ratchet__key .is-flat i{width:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}
.crx-ratchet__plot{position:relative;height:250px;margin-top:22px}
.crx-ratchet__bands{position:absolute;inset:0}
.crx-ratchet__band{position:absolute;top:0;bottom:0;left:calc(var(--a) / 13 * 100%);width:calc((var(--b) - var(--a)) / 13 * 100%);border-left:1px dashed rgba(255,255,255,.1);
  display:flex;align-items:flex-start;gap:8px;padding:0 10px}
.crx-ratchet__band.is-s1,.crx-ratchet__band.is-s3{background:rgba(255,255,255,.022)}
.crx-ratchet__band i{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;background:var(--gold);color:#111}
.crx-ratchet__band.is-s2 i,.crx-ratchet__band.is-s3 i{background:var(--teal)}
.crx-ratchet__band em{font-style:normal;font-size:12.5px;font-weight:600;line-height:22px;color:var(--text-soft);white-space:nowrap}
.crx-ratchet__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.crx-ratchet__rate{position:absolute;left:0;font-size:12px;font-weight:600;color:var(--gold);white-space:nowrap}
.crx-ratchet__line{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.crx-ratchet__test{position:absolute;height:5.6%;border-radius:100px;border:1px solid var(--teal-line);background:var(--teal-soft)}
.crx-ratchet__test.is-flat{border-color:var(--edge-2);background:rgba(255,255,255,.05)}
.crx-ratchet__end{position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(244,160,0,.18)}
.crx-ratchet__test.is-flat .crx-ratchet__end{height:3px;margin-top:-1.5px;border-radius:2px;background:rgba(255,255,255,.45);box-shadow:none}
.crx-ratchet__tie{position:absolute;width:0;border-left:1px dashed var(--gold-line)}
.crx-ratchet__step{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(244,160,0,.16)}
.crx-ratchet__step.is-quick{background:#16120A;border:2px solid var(--gold)}
.crx-ratchet__weeks{position:relative;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));margin-top:12px;padding-top:10px;border-top:1px solid var(--edge)}
.crx-ratchet__weeks i{font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;text-align:center;color:var(--text-dim)}
.crx-ratchet__wk{position:absolute;left:0;top:calc(100% + 8px);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
html.el8-js .crx-ratchet[data-crx-go]:not(.is-go) :is(.crx-ratchet__test,.crx-ratchet__tie,.crx-ratchet__step){opacity:0}
.crx-ratchet.is-go .crx-ratchet__test{transform-origin:left;animation:crxFill 1.1s var(--ease) both;animation-delay:calc(var(--k) * .7s + .6s)}
.crx-ratchet.is-go :is(.crx-ratchet__tie,.crx-ratchet__step){animation:crxPop .5s cubic-bezier(.34,1.6,.5,1) both;animation-delay:calc(var(--k) * .7s + 1.6s)}
@keyframes crxPop{from{opacity:0;transform:scale(.3)}}

/* ==========================================================================
   WHAT WE TEST · six small before-and-after loops
   ========================================================================== */

.crx-pic .p-fold{stroke:var(--coral);stroke-width:1.2;stroke-dasharray:4 4}
.crx-pic .p-sun{fill:rgba(255,255,255,.1)}

/* ==========================================================================
   MISTAKES · the honest results chart and the mistakes
   ========================================================================== */
.crx-err{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.crx-err.is-solo{grid-template-columns:minmax(0,640px)}
.crx-err__peek{position:sticky;top:110px}
.crx-forest{padding:22px 24px 20px;border-radius:24px;border:1px solid var(--edge-2);background:var(--cx-card)}
.crx-forest__head b{display:block;margin-top:8px;font:800 20px/1.3 var(--font-head);letter-spacing:-.015em;color:var(--text)}
.crx-forest__k{font:600 11.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.crx-forest__run{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding:10px 0;border-block:1px solid var(--edge);font-size:13px;color:var(--text-dim)}
.crx-forest__run b{font:700 15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text)}
.crx-forest__plot{position:relative;padding:6px 0}
.crx-forest__zero{position:absolute;top:0;bottom:0;left:var(--zero);border-left:1px dashed rgba(255,255,255,.3)}
.crx-forest__zero b{position:absolute;left:5px;bottom:4px;font:600 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}
.crx-forest__row{position:relative;padding:12px 0 10px}
.crx-forest__row + .crx-forest__row{border-top:1px solid rgba(255,255,255,.05)}
.crx-forest__line{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.crx-forest__name{font-size:15px;font-weight:600;color:var(--text)}
.crx-forest__res{font:700 12.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:right;color:var(--teal)}
.crx-forest__row.is-kill .crx-forest__res{color:var(--coral)}
.crx-forest__row.is-kill .crx-forest__name{color:var(--text-dim);text-decoration:line-through;text-decoration-color:var(--coral)}
.crx-forest__bar{position:relative;display:block;height:18px;margin-top:8px}
.crx-forest__ci{position:absolute;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--teal)}
.crx-forest__ci::before,.crx-forest__ci::after{content:"";position:absolute;top:-5px;width:2px;height:13px;border-radius:1px;background:inherit}
.crx-forest__ci::before{left:0}
.crx-forest__ci::after{right:0}
.crx-forest__row.is-kill .crx-forest__ci{background:var(--coral)}
.crx-forest__pt{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(79,191,160,.18)}
.crx-forest__row.is-kill .crx-forest__pt{background:var(--coral);box-shadow:0 0 0 4px rgba(255,122,107,.18)}
.crx-forest__sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:6px;padding-top:14px;border-top:1px solid var(--edge);font-size:13.5px;color:var(--text-mid)}
.crx-forest__sum b{font:800 20px/1 var(--font-head);color:var(--teal);white-space:nowrap}
.crx-forest__cap{margin:10px 0 0;font-size:12px;color:var(--text-dim)}
html.el8-js .crx-forest[data-crx-go]:not(.is-go) .crx-forest__ci{transform:scaleX(3.4);opacity:.35}
html.el8-js .crx-forest[data-crx-go]:not(.is-go) .crx-forest__res{opacity:0}
.crx-forest.is-go .crx-forest__ci{animation:crxNarrow 3s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i) * .25s + .2s)}
@keyframes crxNarrow{from{transform:scaleX(3.4);opacity:.35}}
.crx-forest.is-go .crx-forest__pt{animation:crxSettle 3s ease-out both;animation-delay:calc(var(--i) * .25s + .2s)}
@keyframes crxSettle{0%{translate:-26px 0}15%{translate:22px 0}32%{translate:-14px 0}50%{translate:8px 0}70%{translate:-3px 0}100%{translate:0 0}}
.crx-forest.is-go .crx-forest__res{animation:crxFade .6s ease both;animation-delay:calc(var(--i) * .25s + 3s)}

.crx-errc__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;border:1px solid var(--coral-line);background:var(--coral-soft)}

.crx-mi{width:40px;height:40px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.crx-mi .m-line{stroke:rgba(255,255,255,.55);stroke-width:2}
.crx-mi .m-dash{stroke:rgba(255,255,255,.3);stroke-width:1.6;stroke-dasharray:3 3}
.crx-mi .m-hot{stroke:var(--coral);stroke-width:2.2}
.crx-mi .m-dot{fill:rgba(255,255,255,.6);stroke:none}
.crx-mi .m-dot.is-hot{fill:var(--coral)}
.crx-mi .m-ok{stroke:var(--teal);stroke-width:2.2}
.crx-mi .m-x{stroke:var(--coral);stroke-width:2.2}
.crx-err-sec .wdp-band{margin-top:44px}

/* ==========================================================================
   FREE AUDIT · the session replay
   ========================================================================== */
.crx-audit{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:48px;align-items:start}
.crx-replay{position:sticky;top:110px;margin:0;border-radius:24px;border:1px solid var(--edge-2);background:var(--cx-card);overflow:hidden;box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.crx-replay__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--edge);background:#0E1116}
.crx-replay__bar b{font-size:13px;font-weight:600;color:var(--text-soft)}
.crx-replay__bar .wdp-dots{margin-left:auto}
.crx-replay__rec{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--coral-line)}
.crx-replay__rec i{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:crxRec 1.6s ease-in-out infinite}
.crx-replay__screen{position:relative;height:340px;padding:18px}
.crx-rp{position:absolute;inset:18px;padding:16px;border-radius:14px;border:1px solid var(--edge);background:#12151B;overflow:hidden}
.crx-rp__load{position:absolute;left:0;top:0;height:3px;width:100%;background:var(--gold);transform-origin:left;animation:crxLoad 6s var(--ease) infinite}
@keyframes crxLoad{0%{transform:scaleX(0);opacity:1}40%{transform:scaleX(1);opacity:1}55%,100%{transform:scaleX(1);opacity:0}}
.crx-rp__nav{display:flex;align-items:center;gap:10px}
.crx-rp__nav > i{display:block;width:36px;height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.crx-rp__nav > i.crx-rp__logo{width:18px;height:18px;border-radius:50%;background:var(--gold-soft);border:1px solid var(--gold-line)}
.crx-rp__tag{display:grid;place-items:center;margin-left:auto;width:26px;height:26px;border-radius:8px;border:1px solid var(--gold-line);color:var(--gold)}
.crx-rp__tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.crx-rp__cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;margin-top:22px}
.crx-rp__img{position:relative;display:block;height:120px;margin-top:16px;border-radius:10px;background:linear-gradient(160deg,#252B36,#171B22);border:1px solid var(--edge);overflow:hidden}
.crx-rp__img i{position:absolute;left:14%;right:14%;bottom:0;height:52%;background:rgba(255,255,255,.07);clip-path:polygon(0 100%,35% 20%,55% 60%,72% 35%,100% 100%)}
.crx-rp__stars{display:flex;gap:4px;margin-top:14px}
.crx-rp__stars i{width:12px;height:12px;background:var(--gold);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.crx-rp__form{display:grid;align-content:start;gap:10px;padding:14px;border-radius:12px;border:1px solid var(--edge);background:#0D1015}
.crx-rp__form .crx-sk{margin:0 0 4px}
.crx-rp__field{display:block;height:28px;border-radius:7px;border:1px solid var(--edge-2);background:#0A0C10}
.crx-rp__field.is-focus{border-color:var(--gold-line);box-shadow:0 0 0 3px rgba(244,160,0,.1)}
.crx-rp__send{display:block;height:30px;margin-top:4px;border-radius:100px;background:var(--gold)}
.crx-rp__rage{position:absolute;left:27%;top:52%;width:0;height:0;pointer-events:none}
.crx-rp__rage i{position:absolute;left:-16px;top:-16px;width:32px;height:32px;border-radius:50%;border:2px solid var(--coral);opacity:0}
.crx-replay.is-rage .crx-rp__rage i{animation:crxRage .9s ease-out both}
.crx-replay.is-rage .crx-rp__rage i:nth-child(2){animation-delay:.25s}
.crx-replay.is-rage .crx-rp__rage i:nth-child(3){animation-delay:.5s}
@keyframes crxRage{0%{transform:scale(.3);opacity:1}100%{transform:scale(1.6);opacity:0}}
.crx-rp__pin{position:absolute;z-index:3;display:grid;place-items:center;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--gold);color:#111;
  font:800 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 0 0 3px #0B0D11,0 0 0 6px rgba(244,160,0,.28),0 8px 16px -6px rgba(0,0,0,.8);transition:opacity .35s,transform .45s cubic-bezier(.34,1.6,.5,1)}
.crx-replay.is-play .crx-rp__pin:not(.is-on){opacity:0;transform:scale(.3)}
.crx-rp__pin.is-hl{transform:scale(1.2);box-shadow:0 0 0 3px #0B0D11,0 0 0 9px rgba(244,160,0,.32)}
/* (owner, 2 Oct 2026: marker 2 vanished on the gold button) every marker sits in a dark ring, so it reads on gold too;
   the markers not chosen dim, but stay readable */
.crx-replay.is-focus .crx-rp__pin:not(.is-hl){opacity:.55}
.crx-rp__cursor{position:absolute;z-index:4;left:74%;top:84%;width:22px;height:22px;margin:7px 0 0 5px;pointer-events:none;transition:left 1.1s cubic-bezier(.45,0,.2,1),top 1.1s cubic-bezier(.45,0,.2,1)}
.crx-rp__cursor svg{width:22px;height:22px;fill:#F4F4F0;stroke:#111;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.crx-rp__cursor i{position:absolute;left:0;top:0;width:24px;height:24px;margin:-9px 0 0 -8px;border-radius:50%;border:2px solid var(--gold);opacity:0}
.crx-rp__cursor.is-click i{animation:crxRage .6s ease-out both}
.crx-replay__tl{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--edge);background:#0E1116}
.crx-replay__time{flex:0 0 auto;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;color:var(--text-soft);white-space:nowrap}
.crx-replay__track{position:relative;flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.1)}
.crx-replay__prog{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:inherit;background:var(--gold);transition:width 1.1s linear}
.crx-replay__tick{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--gold);border:2px solid var(--gold);transition:background .3s,border-color .3s}
.crx-replay.is-play .crx-replay__tick:not(.is-on){background:var(--cx-card);border-color:rgba(255,255,255,.25)}

/* ==========================================================================
   WHY · the agreement as a form that fails validation
   ========================================================================== */
.crx-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.crx-why__peek{position:sticky;top:110px}

.crx-why__k{display:flex;align-items:center;gap:10px;margin-bottom:16px;font:800 20px/1.2 var(--font-head);letter-spacing:-.01em;color:var(--text)}
.crx-why__k svg{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--teal);fill:none;stroke:#08130F;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.crx-terms{display:grid;gap:12px}
.crx-term{padding:18px 20px 20px;border-radius:18px;border:1px solid var(--teal-line);background:linear-gradient(180deg,rgba(79,191,160,.07),rgba(79,191,160,.015))}
.crx-term h3{display:flex;align-items:center;gap:10px;margin:0 0 8px;text-wrap:wrap;font:800 18px/1.25 var(--font-head);letter-spacing:-.01em;color:var(--text)}
.crx-term__ok{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--teal)}
.crx-term__ok svg{width:14px;height:14px;fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.crx-term p{margin:0 0 0 32px;font-size:14.5px;line-height:1.6;color:var(--text-mid)}

/* ==========================================================================
   COMPARISON · the change set
   ========================================================================== */
.crx-diff{border-radius:24px;border:1px solid var(--edge-2);background:#0A0C0F;overflow:hidden}
.crx-diff__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 20px;border-bottom:1px solid var(--edge);background:#0E1116}
.crx-diff__file{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:8px;font:600 13px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.crx-diff__file i{font-style:normal;font-weight:800}
.crx-diff__file.is-del{background:rgba(255,122,107,.08);color:var(--coral)}
.crx-diff__file.is-add{background:rgba(79,191,160,.1);color:var(--teal)}
.crx-diff__file em{font-style:normal;padding:3px 7px;border-radius:5px;background:var(--gold);color:#111;font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:700}
.crx-diff__to{color:var(--text-dim)}
.crx-diff__stat{order:3;margin-left:auto;display:inline-flex;gap:8px;font:700 12.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.crx-diff__stat b{color:var(--teal)}
.crx-diff__stat s{text-decoration:none;color:var(--coral)}
.crx-hunks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.crx-hunk{display:grid;align-content:start;gap:6px;padding:16px 20px 18px;border-bottom:1px solid var(--edge)}
.crx-hunk:nth-child(odd){border-right:1px solid var(--edge)}
.crx-hunk:last-child:nth-child(odd){grid-column:1 / -1;border-right:0}
.crx-hunks > .crx-hunk:nth-last-child(-n/**/+2):nth-child(odd),.crx-hunks > .crx-hunk:last-child{border-bottom:0}
.crx-hunk__k{display:flex;align-items:center;gap:8px;margin-bottom:4px;font:600 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--cx-ice)}
.crx-hunk__k i{font-style:normal;color:rgba(138,180,248,.45)}
.crx-hunk__ln{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;padding:9px 12px;border-radius:9px;font-size:15px;line-height:1.45}
.crx-hunk__ln b{font:800 15px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace}
.crx-hunk__ln.is-del{background:rgba(255,122,107,.07);color:var(--text-dim)}
.crx-hunk__ln.is-del b{color:var(--coral)}
.crx-hunk__ln.is-del s{text-decoration-color:rgba(255,122,107,.6)}
.crx-hunk__ln.is-add{background:rgba(79,191,160,.09);color:var(--text)}
.crx-hunk__ln.is-add b{color:var(--teal)}
html.el8-js .crx-diff[data-crx-go]:not(.is-go) .crx-hunk__ln.is-add{opacity:0;transform:translateX(-10px)}
.crx-diff.is-go .crx-hunk__ln.is-add{animation:crxAdd .6s var(--ease) both;animation-delay:calc(var(--i) * .18s + .3s)}
@keyframes crxAdd{0%{opacity:0;transform:translateX(-10px);background:rgba(79,191,160,.3)}60%{opacity:1;transform:none;background:rgba(79,191,160,.3)}}
.crx-diff__go{display:flex;justify-content:center;margin-top:32px}

/* two columns: each row's event name (course_guide_download) needs the width */
.crx-goals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.crx-goals li{position:relative;border-radius:18px;border:1px solid var(--edge);background:rgba(255,255,255,.02);overflow:hidden;transition:border-color .3s,background .3s}
.crx-goals__row{display:flex;align-items:center;gap:14px;height:100%;padding:16px 16px 16px 14px;color:inherit;text-decoration:none}
.crx-goals li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--gold),var(--teal));transform-origin:left}
html.el8-js .crx-goals[data-crx-go]:not(.is-go) li::after{transform:scaleX(0)}
.crx-goals.is-go li::after{animation:crxFill 1.2s var(--ease) both;animation-delay:calc(var(--i) * .16s)}
.crx-goals__ic{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold)}
.crx-goals__ic svg{width:22px;height:22px}
.crx-goals__t{flex:1;min-width:0;display:grid;gap:5px}
.crx-goals__name{font-size:15.5px;font-weight:600;line-height:1.3;color:var(--text)}
.crx-goals__ev{justify-self:start;max-width:100%;overflow:hidden;text-overflow:clip;padding:3px 7px;border-radius:6px;border:1px solid var(--cx-ice-line);background:var(--cx-ice-soft);
  font:600 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cx-ice);white-space:nowrap}
.crx-goals__ok{flex:0 0 auto;display:grid;justify-items:center;gap:4px}
.crx-goals__ok i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--teal-line)}
.crx-goals__ok em{font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;letter-spacing:.04em;color:var(--teal)}
.crx-goals__ok svg{width:14px;height:14px;fill:none;stroke:var(--teal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
html.el8-js .crx-goals[data-crx-go]:not(.is-go) .crx-goals__ok svg{stroke-dashoffset:1}
html.el8-js .crx-goals[data-crx-go]:not(.is-go) .crx-goals__ok em{opacity:0}
.crx-goals.is-go .crx-goals__ok svg{animation:crxDash .5s ease both;animation-delay:calc(var(--i) * .16s + .4s)}
.crx-goals.is-go .crx-goals__ok i{animation:crxOk .5s ease both;animation-delay:calc(var(--i) * .16s + .4s)}
.crx-goals.is-go .crx-goals__ok em{animation:crxFade .4s ease both;animation-delay:calc(var(--i) * .16s + .6s)}
@keyframes crxDash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes crxOk{0%{background:transparent}50%{background:rgba(79,191,160,.3)}100%{background:transparent}}
.crx-ind__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:26px}
.crx-ind__foot p{margin:0;font-size:15.5px;color:var(--text-mid)}
.crx-ind__foot p a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--gold)}
.crx-ind__foot .svc-link{margin:0}

/* ==========================================================================
   FREE TOOLS
   ========================================================================== */
.crx-tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(min(var(--n),4),minmax(0,1fr));gap:16px}
.crx-tool a{display:flex;flex-direction:column;gap:14px;height:100%;padding:14px 14px 22px;border-radius:24px;border:1px solid var(--edge);background:var(--cx-card);color:inherit;transition:border-color .3s,transform .35s var(--ease)}
.crx-tool a:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.crx-tool__peek{display:block;height:136px;border-radius:16px;border:1px solid var(--edge);background:var(--cx-deep);overflow:hidden}
.crx-tool__row{display:flex;align-items:center;gap:12px;margin:4px 6px 0}
.crx-tool__ic{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;border:1px solid var(--gold-line);background:var(--gold-soft);color:var(--gold)}
.crx-tool__ic svg{width:18px;height:18px}
.crx-tool__t{font:800 18px/1.2 var(--font-head);letter-spacing:-.015em;color:var(--text)}
.crx-tool__d{margin:0 6px;font-size:14px;line-height:1.55;color:var(--text-mid)}
.crx-tool__go{margin:auto 6px 0;font-size:14.5px;font-weight:700;color:var(--gold)}
.crx-pic--tool .t-face{fill:rgba(244,160,0,.1);stroke:var(--gold-line);stroke-width:1.5}
.crx-pic--tool .t-face-in{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.crx-pic--tool .t-coin ellipse{fill:#2A2112;stroke:var(--gold);stroke-width:1.4}
.crx-pic--tool .t-coin{animation:crxCoin 6s var(--ease) infinite;animation-delay:calc(var(--c) * .25s)}
@keyframes crxCoin{0%{opacity:0;transform:translateY(-8px)}12%,88%{opacity:1;transform:none}100%{opacity:0}}
.crx-pic--tool .t-trend{fill:none;stroke:var(--teal);stroke-width:1.6;stroke-dasharray:4 4}
.crx-pic--tool .t-bar.is-cost{fill:rgba(255,255,255,.18)}
.crx-pic--tool .t-bar.is-back{fill:var(--gold);transform-box:fill-box;transform-origin:bottom;animation:crxBack 6s var(--ease) infinite}
@keyframes crxBack{0%{transform:scaleY(.3)}35%,100%{transform:none}}
.crx-pic--tool .t-arrow{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crx-pic--tool .t-base{stroke:rgba(255,255,255,.14);stroke-width:1.4}
.crx-pic--tool .t-ad{fill:var(--gold)}
.crx-pic--tool .t-promise{fill:rgba(244,160,0,.55)}
.crx-pic--tool .t-link{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.6;stroke-dasharray:4 4}
.crx-pic--tool .t-tray{stroke:var(--coral-line);stroke-width:2;stroke-linecap:round}
/* rest frame: the page's headline keeps the ad's promise and nothing drips; the loop shows the mismatch first */
.crx-pic--tool .t-hl{fill:var(--teal);animation:crxMatch 6s ease infinite}
@keyframes crxMatch{0%,42%{fill:var(--coral)}54%,100%{fill:var(--teal)}}
.crx-pic--tool .t-drip{fill:var(--coral);opacity:0;animation:crxDrip 6s ease-in infinite;animation-delay:calc(var(--d) * .35s)}
@keyframes crxDrip{0%{opacity:0;transform:none}6%{opacity:.9}24%{opacity:.9;transform:translateY(52px)}26%,100%{opacity:0;transform:translateY(52px)}}
.crx-pic--tool .t-page{fill:#12151B;stroke:rgba(255,255,255,.14)}
.crx-pic--tool .t-sk{fill:rgba(255,255,255,.4)}
.crx-pic--tool .t-sk.is-dim{fill:rgba(255,255,255,.14)}
.crx-pic--tool .t-btn{fill:var(--gold)}
.crx-pic--tool .t-check circle{fill:var(--teal)}
.crx-pic--tool .t-check path{fill:none;stroke:#08130F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.crx-pic--tool .t-check{animation:crxCheck 6s ease infinite;animation-delay:calc(var(--r) * .4s)}
@keyframes crxCheck{0%,6%{opacity:.15}16%,90%{opacity:1}100%{opacity:.15}}

/* ==========================================================================
   PRICING · design and build included
   ========================================================================== */
.crx-build{display:flex;align-items:center;gap:22px;max-width:980px;margin:34px 0 0;padding:18px 22px;border-radius:20px;border:1px solid var(--gold-line);background:linear-gradient(90deg,rgba(244,160,0,.1),rgba(244,160,0,.02))}
.crx-build p{margin:0;font-size:15.5px;line-height:1.55;color:var(--text-mid)}
.crx-build p + p{margin-top:8px}
.crx-build__k{color:var(--gold)}
.crx-build strong{color:var(--text)}
.crx-build__pic{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.crx-build__card,.crx-build__live{position:relative;display:grid;align-content:start;gap:4px;width:46px;height:56px;padding:8px 7px;border-radius:8px;border:1px dashed rgba(255,255,255,.3)}
.crx-build__card i,.crx-build__live i{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
.crx-build__card i + i,.crx-build__live i + i{width:70%}
.crx-build__card b,.crx-build__live b{display:block;width:60%;height:8px;margin-top:6px;border-radius:4px;background:rgba(255,255,255,.2)}
.crx-build__live{border:1px solid var(--teal-line);background:rgba(79,191,160,.08)}
.crx-build__live b{background:var(--gold)}
.crx-build__live em{position:absolute;right:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(79,191,160,.2);animation:crxRec 2s ease-in-out infinite}
.crx-build__arrow{width:22px;height:2px;background:var(--gold);position:relative}
.crx-build__arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--gold);border-right:0}
/* each tier's fee type (One-off fee, Monthly fee) sits under its price, with room before the inclusions */
.crx-price-sec .svc-tier__kind{margin:6px 0 20px}
/* how the free audit and the paid Conversion Audit differ: a plain note under the tiers */
.crx-price-sec .svc-pricenote.crx-audits{max-width:980px;margin:14px 0 30px;border-color:var(--edge-2);background:rgba(255,255,255,.03)}
.crx-audits > span:first-child{display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;border:1.5px solid var(--gold);font:800 12px/1 var(--font-head);color:var(--gold)}

/* ==========================================================================
   CRO IN PLAIN ENGLISH · the table
   ========================================================================== */

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width:1080px){
  
  
  
  
  
  
  
  
  
  
  .crx-ratchet__band em{display:none}
  
  .crx-err,.crx-audit,.crx-why{grid-template-columns:minmax(0,1fr)}
  .crx-err__peek,.crx-why__peek,.crx-replay{position:relative;top:0}
  .crx-err__peek,.crx-why__peek{max-width:640px}
  .crx-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width:700px){
  /* value */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* leaks: the flow runs downward */
  .crx-flow.is-across{display:none}
  .crx-flow.is-down{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:10px}
  .crx-flow.is-down .crx-flow__svg{display:block;width:96px;height:auto;overflow:visible}
  .crx-flow.is-down .crx-flow__labels{display:block;position:relative}
  .crx-flow.is-down .crx-flow__stage,.crx-flow.is-down .crx-flow__loss{position:absolute;left:0;right:0;display:grid;gap:3px}
  .crx-flow.is-down .crx-flow__stage[data-at="0"]{top:0}
  .crx-flow.is-down .crx-flow__stage[data-at="1"]{top:32.3%;transform:translateY(-50%)}
  .crx-flow.is-down .crx-flow__stage[data-at="2"]{top:64.5%;transform:translateY(-50%)}
  .crx-flow.is-down .crx-flow__stage[data-at="3"]{top:100%;transform:translateY(-100%)}
  .crx-flow.is-down .crx-flow__loss{padding-left:10px;border-left:2px solid var(--coral-line)}
  .crx-flow.is-down .crx-flow__loss[data-at="0"]{top:17.7%;transform:translateY(-50%)}
  .crx-flow.is-down .crx-flow__loss[data-at="1"]{top:50%;transform:translateY(-50%)}
  .crx-flow.is-down .crx-flow__loss[data-at="2"]{top:82.3%;transform:translateY(-50%)}
  /* the shallower flow: each stage's number and name on one line, each loss's figure beside its cause */
  .crx-flow.is-down .crx-flow__stage{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px}
  .crx-flow.is-down .crx-flow__loss{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px}
  .crx-flow__stage b{font-size:18px}
  .crx-flow__stage span{font-size:11.5px}
  .crx-flow__loss b{font-size:15px}
  .crx-flow__loss span{font-size:11.5px;line-height:1.3;white-space:nowrap}
  .crx-flow__loss em{display:none}
  .crx-sankey{margin-bottom:18px}
  .crx-sankey__k{margin-bottom:16px;font-size:10.5px}
  .crx-sankey__cap{text-align:left;font-size:12px}
  html.el8-js .crx-sankey[data-crx-go]:not(.is-go) .crx-flow__kept{clip-path:inset(0 0 100% 0)}
  @keyframes crxWipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
  
  
  .crx-leak-sec .wdp-band,.crx-err-sec .wdp-band{margin-top:30px}
  /* process */
  
  
  
  
  
  
  
  
  /* first 90 days */
  .crx-ratchet{padding:16px 14px 16px;border-radius:20px}
  .crx-ratchet__key{gap:6px 14px;font-size:12px}
  .crx-ratchet__plot{height:170px;margin-top:16px}
  .crx-ratchet__band{padding:0 4px}
  .crx-ratchet__band i{width:18px;height:18px;font-size:10px}
  .crx-ratchet__test{height:7%}
  .crx-ratchet__end{width:10px;height:10px;margin-top:-5px;right:-5px}
  .crx-ratchet__step{width:10px;height:10px;margin:-5px 0 0 -5px}
  .crx-ratchet__weeks i{font-size:10px}
  .crx-ratchet__rate{left:auto;right:0;top:9%!important;font-size:11px}
  .crx-ratchet__wk{position:static;grid-column:1 / -1;order:2;margin-top:8px;font-size:10px}
  
  
  /* mistakes */
  .crx-err{gap:20px}
  .crx-forest{padding:18px 16px 16px;border-radius:20px}
  .crx-forest__head b{font-size:17px}
  .crx-forest__name{font-size:14px}
  .crx-forest__res{font-size:11.5px}
  
  /* audit */
  .crx-audit{gap:22px}
  .crx-replay__screen{height:300px;padding:12px}
  .crx-rp{inset:12px;padding:12px}
  .crx-rp__cols{gap:10px;margin-top:14px}
  .crx-rp__img{height:80px}
  .crx-rp__field{height:22px}
  .crx-rp__send{height:24px}
  .crx-rp__pin{width:24px;height:24px;margin:-12px 0 0 -12px;font-size:11px}
  
  /* why */
  .crx-why{gap:24px}
  
  
  
  
  
  
  .crx-term{padding:16px 16px 18px}
  .crx-term p{margin-left:0;font-size:14px}
  /* comparison */
  .crx-diff{border-radius:20px}
  .crx-diff__bar{padding:10px 12px;gap:8px 10px}
  .crx-diff__file{font-size:12px;padding:6px 9px}
  .crx-hunks{grid-template-columns:minmax(0,1fr)}
  .crx-hunks > .crx-hunk,.crx-hunks > .crx-hunk:nth-last-child(-n/**/+2):nth-child(odd){padding:14px 14px 16px;border-right:0;border-bottom:1px solid var(--edge)}
  .crx-hunks > .crx-hunk:last-child{border-bottom:0}
  .crx-hunk:last-child:nth-child(odd){grid-column:auto}
  .crx-hunk__ln{font-size:14.5px;padding:8px 10px}
  /* industries */
  .crx-goals{grid-template-columns:minmax(0,1fr);gap:8px}
  .crx-goals li{border-radius:14px}
  .crx-goals__row{padding:10px 12px;gap:12px}
  .crx-goals__ev{font-size:11.5px}
  .crx-goals__ic{width:36px;height:36px;border-radius:10px}
  .crx-goals__ic svg{width:19px;height:19px}
  .crx-goals__name{font-size:15px}
  /* tools */
  .crx-tool__peek{height:120px}
  /* pricing */
  .crx-build{flex-direction:column;align-items:flex-start;gap:14px;margin-top:26px;padding:16px 18px}
  /* the section runs long on a phone: its two small decorative pictures go, the words stay */
  .crx-build__pic,.crx-price-sec .svc-quote__doc{display:none}
  .crx-build p{font-size:14.5px}
  }

@media (prefers-reduced-motion:reduce){
  .crx-rp__pin,.crx-rp__cursor,.crx-replay__prog,.crx-replay__tick{transition:none!important}
  .crx-flow__kept{clip-path:none!important}
}

/* ============ WHERE CONVERSIONS LEAK: the leaks as cards (tablets, phones, no script); on wide screens the shared tab
   stage, the chosen leak lighting its drain on the funnel ============ */
.crx-lk{margin-top:26px}
.crx-lk__items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.crx-lk-i{display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;border-radius:20px;border:1px solid var(--edge);background:var(--cx-card)}
.crx-lk-i__h{margin:0;font:800 19px/1.2 var(--font-head);letter-spacing:-.015em;color:var(--text)}
.crx-lk-i__h .svt-tab__n{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--coral)}
.crx-lk-i__h .svt-tab__n svg{width:13px;height:16px;fill:rgba(255,122,107,.25);stroke:var(--coral);stroke-width:1.4}
.crx-lk-i__t{display:block}
.crx-lk-i__body p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-mid)}

@media (min-width:1001px){
  html.el8-js .crx-lk[data-svt] .crx-lk__items{grid-template-columns:minmax(0,1fr);gap:0}
  html.el8-js .crx-lk[data-svt] .crx-lk-i{grid-area:1 / 1;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:76px auto;gap:10px;padding:0;border:0;background:none;visibility:hidden}
  html.el8-js .crx-lk[data-svt] .crx-lk-i.is-cur{visibility:visible}
  html.el8-js .crx-lk[data-svt] .crx-lk-i__h{grid-column:var(--c);grid-row:1;height:76px;font-size:inherit;visibility:visible}
  html.el8-js .crx-lk[data-svt] .crx-lk-i__h .svt-tab{gap:10px;padding:0 12px}
  html.el8-js .crx-lk[data-svt] .svt-tab__n,html.el8-js .crx-lk[data-svt] .is-cur .svt-tab__n{display:inline-flex;flex-direction:column;align-items:center;gap:3px;min-width:0;height:auto;margin:0;padding:0;border:0;background:none;color:var(--coral)}
  html.el8-js .crx-lk[data-svt] .crx-lk-i__t{font:800 14.5px/1.2 var(--font-head);letter-spacing:-.01em}
  html.el8-js .crx-lk[data-svt] .is-cur .svt-tab{border-color:var(--coral-line);background:linear-gradient(90deg,rgba(255,122,107,.12),#0C0E12 85%)}
  html.el8-js .crx-lk[data-svt] .svt-tab__prog{background:var(--coral)}
  html.el8-js .crx-lk[data-svt] .svt-panel{border-color:var(--coral-line);background:radial-gradient(70% 90% at 0% 0%,rgba(255,122,107,.07),transparent 60%),#0E1014}
  html.el8-js .crx-lk[data-svt] .crx-lk-i__body{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;margin-top:6px;padding:22px 26px}
  html.el8-js .crx-lk[data-svt] .crx-lk-i__body p{font-size:16.5px;color:var(--text)}
  
}
@media (max-width:1000px) and (min-width:701px){.crx-lk__items{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============ FIRST 90 DAYS: the stages as cards (tablets, phones); on wide screens the shared tab stage, the chosen
   stage lighting its weeks on the chart; the plan card closes the section ============ */
.crx-ratchet__band{transition:background-color .4s}
.crx-ratchet__band.is-on{background:rgba(244,160,0,.08)}
.crx-ratchet__band.is-on.is-s2,.crx-ratchet__band.is-on.is-s3{background:rgba(79,191,160,.08)}
.crx-ratchet__band.is-on i{box-shadow:0 0 0 5px rgba(244,160,0,.2)}
.crx-ratchet__band.is-on em{color:var(--text)}
.crx-dy{margin-top:18px}
.crx-dy__items{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.crx-dy-i{display:flex;flex-direction:column;gap:10px;padding:18px 20px 20px;border-radius:20px;border:1px solid var(--edge);border-top:3px solid var(--gold);background:var(--cx-card)}
.crx-dy-i:nth-child(n/**/+3){border-top-color:var(--teal)}
.crx-dy-i__h{margin:0;font:800 19px/1.2 var(--font-head);letter-spacing:-.015em;color:var(--text)}
.crx-dy-i__h .svt-tab__n{display:grid;place-items:center;width:22px;height:22px;margin-bottom:10px;border-radius:50%;background:var(--gold);color:#111;font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.crx-dy-i:nth-child(n/**/+3) .crx-dy-i__h .svt-tab__n{background:var(--teal)}
.crx-dy-i__tt{display:grid;gap:6px}
.crx-dy-i__tt small{font:700 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.crx-dy-i:nth-child(n/**/+3) .crx-dy-i__tt small{color:var(--teal)}
.crx-dy-i__body{display:flex;flex-direction:column;gap:14px;flex:1}
.crx-dy-i__body p{margin:0;font-size:14.5px;line-height:1.6;color:var(--text-mid)}
.crx-dy-i__sign{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding:5px 10px;border-radius:100px;border:1px solid var(--teal-line);font-size:12.5px;font-weight:600;color:var(--teal)}
.crx-dy-i__sign svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1001px){
  html.el8-js .crx-dy[data-svt] .crx-dy__items{grid-template-columns:minmax(0,1fr);gap:0}
  html.el8-js .crx-dy[data-svt] .crx-dy-i{grid-area:1 / 1;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:74px auto;gap:10px;padding:0;border:0;background:none;visibility:hidden}
  html.el8-js .crx-dy[data-svt] .crx-dy-i.is-cur{visibility:visible}
  html.el8-js .crx-dy[data-svt] .crx-dy-i__h{grid-column:var(--c);grid-row:1;height:74px;font-size:inherit;visibility:visible}
  html.el8-js .crx-dy[data-svt] .crx-dy-i__h .svt-tab{gap:12px;padding:0 14px}
  html.el8-js .crx-dy[data-svt] .crx-dy-i__h .svt-tab__n{margin:0}
  html.el8-js .crx-dy[data-svt] .crx-dy-i:nth-child(n/**/+3) .svt-tab__n{border-color:var(--teal-line);background:none;color:var(--teal)}
  html.el8-js .crx-dy[data-svt] .crx-dy-i:nth-child(n/**/+3).is-cur .svt-tab__n{border-color:var(--teal);background:var(--teal);color:#0A1512}
  html.el8-js .crx-dy[data-svt] .crx-dy-i:nth-child(n/**/+3).is-cur .svt-tab{border-color:var(--teal-line);background:linear-gradient(90deg,rgba(79,191,160,.12),#0C0E12 85%)}
  html.el8-js .crx-dy[data-svt] .crx-dy-i__tt small{font-size:10.5px}
  html.el8-js .crx-dy[data-svt] .crx-dy-i__tt > span{font:800 15.5px/1.2 var(--font-head);letter-spacing:-.01em}
  html.el8-js .crx-dy[data-svt] .crx-dy-i__body{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:30px;margin-top:6px;padding:22px 26px}
  html.el8-js .crx-dy[data-svt] .crx-dy-i__body p{font-size:16.5px;color:var(--text)}
  html.el8-js .crx-dy[data-svt] .crx-dy-i__sign{margin:0;font-size:13.5px;padding:7px 12px}
}
@media (max-width:1000px) and (min-width:701px){.crx-dy__items{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the conversion rate line reveals by a clip, not a dash (a pathLength dash on a non-scaling stroke draws broken in Safari) */
.crx-ratchet__svg{clip-path:inset(-10% 0 -10% 0)}
html.el8-js .crx-ratchet[data-crx-go]:not(.is-go) .crx-ratchet__svg{clip-path:inset(-10% 100% -10% 0)}
.crx-ratchet.is-go .crx-ratchet__svg{animation:crxReveal 3.2s cubic-bezier(.45,0,.2,1) .3s both}
@keyframes crxReveal{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}

/* ============ MISTAKES: the honest results chart beside the mistakes as a coral expanding list ============ */
.crx-errs.svc-acc{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0;list-style:none}
.crx-errc__ic{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:12px;border:1px solid var(--coral-line);background:var(--coral-soft)}
.crx-errc__ic svg{width:24px;height:24px}
.crx-err .svc-acc__pad{padding-left:72px}
.crx-err .svc-acc__pad p{margin:0;font-size:15px;line-height:1.6;color:var(--text-mid)}
@media (min-width:1001px){html.el8-js .crx-err .svc-acc__btn{min-height:62px;font:800 17px/1.25 var(--font-head);letter-spacing:-.01em}html.el8-js .crx-err .svc-acc__pad p{color:var(--text)}}
@media (max-width:700px){.crx-err .svc-acc__pad{padding-left:18px}}

/* ============ FREE AUDIT: the replay beside the checks as an expanding list and the shared audit call to action ============ */
.crx-audit__pic{min-width:0}
.crx-audit__side{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
.crx-checks.svc-acc{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;padding:0;list-style:none}
.crx-audit .svc-acc__pad p{margin:0;font-size:15px;line-height:1.6;color:var(--text-mid)}
@media (min-width:1001px){.crx-audit{align-items:center}html.el8-js .crx-audit .svc-acc__pad p{color:var(--text)}html.el8-js .crx-audit .svc-acc__btn{min-height:54px;font-size:15.5px}}

/* ============ RESULTS: the shared report (svx.css .svc-res); each case's conversion rate stepping up (kit/cro/lift) ============ */
.crx-lift{position:relative;display:block;width:100%;max-width:520px;height:118px;margin:6px 0}
.crx-lift svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.crx-lift__before{fill:rgba(255,255,255,.03)}
.crx-lift__base{stroke:var(--edge-2);stroke-width:1;vector-effect:non-scaling-stroke}
.crx-lift__old{fill:none;stroke:var(--text-dim);stroke-width:1.6;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.crx-lift__new{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.crx-lift__start{stroke:var(--gold-line);stroke-width:1.5;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.crx-lift__dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(244,160,0,.18)}
.svc-res__rep.is-on .crx-lift svg{animation:crxReveal 1.4s var(--ease) both}
.svc-res__rep.is-on .crx-lift__dot{animation:crxPop .4s cubic-bezier(.34,1.6,.5,1) both;animation-delay:calc(var(--k) * .22s + .5s)}
@media (max-width:700px){.crx-lift{height:84px}}

/* ============ COMPARISON and PRICING: their buttons carry the text-us option ============ */
.crx-diff__go .svc-band__act,.crx-price-sec .svc-quote .svc-band__act{justify-items:center}
.crx-price-sec .svc-tier__fee{white-space:nowrap;font-size:clamp(26px,2.4vw,36px)}
@media (max-width:700px){.crx-price-sec .svc-quote .svc-band__act{justify-items:stretch}}

/* ============ PLAIN ENGLISH: the glossary's picture, a page under test with its parts pinned (.cgp) ============ */
.cgp{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:14px;border-radius:24px;border:1px solid var(--edge-2);background:linear-gradient(180deg,#121419,#0C0E12)}
.cgp [data-slx-spot]{position:relative}
.cgp-pin{position:absolute;right:-12px;top:-9px;z-index:2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#111;font:800 10px/1 var(--font-head);box-shadow:0 0 0 3px #0E1014}
.cgp-page{position:relative;display:grid;align-content:start;border-radius:16px;border:1px solid var(--edge);background:#0B0D11}
.cgp-page__bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-bottom:1px solid var(--edge);background:#101318;border-radius:16px 16px 0 0}
.cgp-page__url{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}
.cgp .cgp-ab{margin:0 14px 0 auto;padding:3px 8px;border-radius:100px;border:1px solid var(--gold-line);font:800 9.5px/1.1 var(--font-head);font-style:normal;color:var(--gold);white-space:nowrap}
.cgp-page__top{position:relative;display:grid;gap:9px;padding:18px 16px 16px}
.cgp-page__top > .cgp-pin{right:8px;top:8px}
.cgp-heat{position:absolute;border-radius:50%;filter:blur(12px);pointer-events:none}
.cgp-heat--1{left:8%;top:14%;width:150px;height:46px;background:rgba(255,122,107,.55)}
.cgp-heat--2{left:6%;top:62%;width:110px;height:40px;background:rgba(244,160,0,.55)}
.cgp-heat--3{right:12%;top:30%;width:80px;height:40px;background:rgba(79,191,160,.35)}
.cgp-sk{position:relative;display:block;width:70%;height:9px;border-radius:4px;background:rgba(255,255,255,.12)}
.cgp-sk--h{height:10px;background:rgba(255,255,255,.24)}
.cgp-sk.is-short{width:56%}
.cgp-proof{justify-self:start;margin-right:14px;font-size:11.5px;font-weight:700;color:var(--gold)}
.cgp-proof small{font-size:10px;font-weight:600;color:var(--text-soft)}
.cgp-cta{justify-self:start;margin-right:14px;padding:8px 14px;border-radius:9px;background:var(--gold);color:#111;font:800 11px/1.1 var(--font-head)}
.cgp-fold{display:flex;align-items:center;gap:8px;margin:0 10px;border-top:1.5px dashed var(--coral-line)}
.cgp-fold span{margin-top:-8px;padding:2px 7px;border-radius:6px;background:#0B0D11;font:700 9.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--coral)}
.cgp-page__low{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:10px 14px;padding:16px 16px 22px}
.cgp-page__low .cgp-img{grid-row:1 / span 2}
.cgp-img{position:relative;display:block;height:76px;border-radius:9px;background:linear-gradient(160deg,#252A33,#15181D)}
.cgp-rage{position:absolute;left:62%;top:40%;width:18px;height:18px;margin:-9px;border-radius:50%;border:2px solid var(--coral);box-shadow:0 0 0 5px rgba(255,122,107,.2),0 0 0 10px rgba(255,122,107,.08)}
.cgp-scroll{display:flex;align-items:center;gap:6px;font:700 9.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}
.cgp-scroll::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--text-dim)}
.cgp-form{display:grid;gap:5px;padding:8px 9px;border-radius:10px;border:1px solid var(--edge-2);background:#0E1116}
.cgp-form > i{display:block;height:11px;border-radius:4px;border:1px solid var(--edge-2);background:#0B0D11}
.cgp-form > i.is-left{border-color:var(--coral-line);background:rgba(255,122,107,.08)}
.cgp-form small{font-size:10px;font-weight:600;color:var(--coral)}
.cgp .cgp-rec{position:absolute;left:10px;bottom:-11px;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:100px;border:1px solid var(--edge-2);background:#101318;font:700 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-soft)}
.cgp-rec i{width:7px;height:7px;border-radius:50%;background:var(--coral)}
.cgp-side{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.1fr);gap:10px;align-items:start;min-width:0}
.cgp-note{grid-column:1 / -1}
.cgp-funnel{display:grid;gap:5px;padding:10px;border-radius:14px;border:1px dashed var(--edge-2)}
.cgp-funnel__s{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px}
.cgp-funnel__s i{grid-column:1 / -1;display:block;width:var(--w);height:6px;border-radius:3px;background:linear-gradient(90deg,var(--gold),rgba(244,160,0,.4))}
.cgp-funnel__s small{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;color:var(--text-dim)}
.cgp-funnel__s b{font:800 12px/1 var(--font-head);color:var(--text);font-variant-numeric:tabular-nums}
.cgp-drop{justify-self:start;margin:2px 14px 0 0;padding:3px 8px;border-radius:7px;background:rgba(255,122,107,.1);font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--coral)}
.cgp-nums{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.cgp-m{display:grid;gap:3px;min-width:0;padding:8px 9px;border-radius:10px;border:1px solid var(--edge);background:#0B0D11}
.cgp-m > span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:10px;font-weight:600;color:var(--text-dim)}
.cgp-m > b:not(.cgp-pin){font:800 17px/1 var(--font-head);letter-spacing:-.02em;color:var(--teal);font-variant-numeric:tabular-nums}
.cgp-test{display:grid;gap:8px;padding:10px;border-radius:14px;border:1px solid var(--gold-line);background:rgba(244,160,0,.04)}
.cgp-hyp{margin:0;font-size:10.5px;line-height:1.4;color:var(--text-soft)}
.cgp-sample{display:grid;gap:4px}
.cgp-sample small{font-size:10px;font-weight:600;color:var(--text-dim)}
.cgp-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.08)}
.cgp-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold-line),var(--gold))}
.cgp-conf{display:flex;align-items:center;gap:7px;font:700 11px/1.2 var(--font-head);color:var(--teal)}
.cgp-ring{width:16px;height:16px;border-radius:50%;background:conic-gradient(var(--teal) 0 96%,rgba(255,255,255,.12) 96%);-webkit-mask:radial-gradient(circle,transparent 4px,#000 5px);mask:radial-gradient(circle,transparent 4px,#000 5px)}
.cgp-note{justify-self:end;font:700 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}
@media (max-width:700px){
  .cgp{gap:8px;padding:10px;border-radius:20px}
  .cgp-m > b:not(.cgp-pin){font-size:15px}
  .cgp-pin{width:18px;height:18px;right:-6px;top:-6px;font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){.crx-lift *,.crx-ratchet__svg{animation:none!important;transition:none!important;clip-path:none!important}}
/* pins beside inline text sit clear of its last letters */
.cgp-proof,.cgp-cta,.cgp-drop,.cgp-scroll{margin-right:28px}
.cgp .cgp-ab{margin-right:26px}
:is(.cgp-proof,.cgp-cta,.cgp-drop,.cgp-scroll,.cgp-ab,.cgp-rec) > .cgp-pin{right:-25px;top:50%;margin-top:-10px}
@media (max-width:700px){
  .cgp-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cgp-funnel{grid-column:1 / -1}
  .cgp-page__low{grid-template-columns:minmax(0,1fr)}
  .cgp-page__low .cgp-img{grid-row:auto;height:56px}
  :is(.cgp-proof,.cgp-cta,.cgp-drop,.cgp-scroll,.cgp-ab,.cgp-rec) > .cgp-pin{right:-23px;margin-top:-9px}
}

/* ============ WHAT YOU GET: the CRO loop. Four cards clockwise (measure, find why, test, ship), each its words beside
   its evidence (kit/cro/evidence), an arrow to the next and the last one back to the first. Phones: swipe cards, the
   evidence above the words ============ */
.crv{position:relative}
.crv__items{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.crv-i{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:24px;border:1px solid var(--edge);background:#0E1014}
.crv-i__h{display:flex;align-items:center;gap:12px;margin:0;font:800 19px/1.2 var(--font-head);letter-spacing:-.015em;color:var(--text)}
.crv-i__n{flex:0 0 auto;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--gold)}
.crv-i__body{display:flex;flex-direction:column;gap:16px;flex:1}
.crv-i__copy p{margin:0;font-size:15px;line-height:1.62;color:var(--text-mid)}
.crv-i__pic{display:grid;min-width:0;flex:1}
.crv-i__pic .crx-ev{box-shadow:none}
.crv-i__pic .crx-heat{height:300px}
.crv__loop{display:none}
@media (min-width:1001px){
  /* the loop: 1 top left, 2 top right, 3 bottom right, 4 bottom left; rows of equal height so the arrows sit in the
     middle of each gap */
  .crv.is-loop .crv__items{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a b" "d c";grid-auto-rows:1fr;gap:64px 76px}
  .crv.is-loop .crv-i:nth-child(1){grid-area:a}
  .crv.is-loop .crv-i:nth-child(2){grid-area:b}
  .crv.is-loop .crv-i:nth-child(3){grid-area:c}
  .crv.is-loop .crv-i:nth-child(4){grid-area:d}
  .crv:not(.is-loop) .crv__items{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* each card: the step and its words on the left, its evidence on the right */
  .crv-i{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:1fr auto auto 1fr;gap:0 24px;padding:24px;
    background:radial-gradient(90% 70% at 0% 0%,rgba(244,160,0,.05),transparent 60%),#0E1014}
  .crv-i__h{grid-column:1;grid-row:2;font-size:20px}
  .crv-i__n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--gold-line);background:rgba(244,160,0,.08);font-size:12px}
  .crv-i__body{display:contents}
  /* the step and its words stay one group, centred beside the evidence (owner: never pushed apart) */
  .crv-i__copy{grid-column:1;grid-row:3;margin-top:14px}
  .crv-i__copy p{font-size:15.5px;line-height:1.65;color:var(--text)}
  /* each evidence frame fills its column, its contents centred (no small box floating in a tall card) */
  .crv-i__pic{grid-column:2;grid-row:1 / -1;align-content:stretch}
  .crv-i__pic > .crx-ev{display:flex;flex-direction:column;justify-content:center;height:100%;min-width:0}
  .crv-i__pic .crx-wins__foot b{white-space:normal;line-height:1.25}
  /* the heatmap shows whole: its scroll depth line and the barely seen button are the finding */
  .crv-i__pic .crx-heat{height:auto}
  .crv-i__pic .crx-heat__plans{margin-top:12px}
  .crv-i__pic .crx-heat__plans i{height:64px}
  .crv-i__pic .crx-heat__fold{margin:14px -14px 10px}
  .crv-i__pic .crx-wins{height:132px}
  /* the arrows: small rings in the gaps, each pointing to the next card; the last one says the cycle repeats */
  .crv__loop{display:block;position:absolute;inset:0;pointer-events:none}
  .crv__arr{position:absolute;display:grid;place-items:center;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid var(--gold-line);background:#0B0D11;color:var(--gold)}
  .crv__arr::before{content:"";width:9px;height:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(var(--r,45deg)) translate(-1px,1px)}
  .crv__arr.is-r{left:50%;top:calc((100% - 64px) / 4)}
  .crv__arr.is-d{left:calc(100% - (100% - 76px) / 4);top:50%;--r:135deg}
  .crv__arr.is-l{left:50%;top:calc(100% - (100% - 64px) / 4);--r:225deg}
  .crv__arr.is-u{left:calc((100% - 76px) / 4);top:50%;width:auto;height:38px;margin:-19px 0 0;padding:0 16px 0 12px;display:flex;gap:10px;border-radius:100px;transform:translateX(-50%);
    border-color:var(--teal-line);color:var(--teal)}
  .crv__arr.is-u::before{display:none}
  .crv__arr.is-u i{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;position:relative}
  .crv__arr.is-u i::after{content:"";position:absolute;right:-4px;top:-1px;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:5px solid currentColor;transform:rotate(30deg)}
  .crv__arr.is-u b{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
  /* while in view the arrows take turns nudging toward the next card (transform only, HTML elements) */
  .crv-sec.is-live .crv__arr:not(.is-u){animation:crvNudge 6s var(--ease) infinite;animation-delay:calc(var(--k,0) * 1.5s)}
  .crv__arr.is-r{--k:0;--dx:4px;--dy:0px}.crv__arr.is-d{--k:1;--dx:0px;--dy:4px}.crv__arr.is-l{--k:2;--dx:-4px;--dy:0px}
}
/* smaller laptops and tablets on their side: the words would be too narrow beside the evidence, so each card in the
   loop stacks its evidence above its words */
@media (min-width:1001px) and (max-width:1279px){
  .crv-i{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto auto}
  .crv-i__pic{grid-column:1;grid-row:1}
  .crv-i__h{grid-column:1;grid-row:2;margin-top:20px}
  .crv-i__copy{grid-column:1;grid-row:3;margin-top:10px}
}
@keyframes crvNudge{0%,18%,100%{translate:0 0}8%{translate:var(--dx) var(--dy)}}
@media (max-width:1000px){.crv-i__body{flex-direction:column-reverse}}
@media (max-width:700px){
  .crv-i{padding:14px;border-radius:20px}
  .crv-i__h{font-size:17px}
  .crv-i__copy p{font-size:14.5px}
  .crv-i__pic .crx-heat{height:240px}
}
@media (prefers-reduced-motion:reduce){.crv__arr{animation:none!important}}

/* ============ WHERE CONVERSIONS LEAK, and what we test for each: under the funnel, the six leaks as tabs (the shared tab
   stage); each panel is the leak beside the change we test for it, before and after (kit/cro/fix), with the test's
   checks. The frames are the hero's plumbing business ============ */
.crl-i__body{display:grid;gap:18px}
.crl-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px;font:700 10.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.crl-k.is-leak{color:var(--coral)}
.crl-k.is-fix{color:var(--teal)}
.crl-k em{padding:3px 8px;border-radius:6px;border:1px dashed var(--coral-line);font-style:normal;letter-spacing:.02em;text-transform:none;color:var(--coral)}
.crl-i__leak p{margin:0;font-size:15px;line-height:1.62;color:var(--text-mid)}
.crl-i__pic{min-width:0}
.crl-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.crl-chips li{padding:5px 10px;border-radius:100px;border:1px solid var(--edge-2);font-size:12px;color:var(--text-soft)}
.crl-ab{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.crl-f{display:grid;gap:8px;min-width:0}
.crl-f__k{justify-self:start;padding:3px 9px;border-radius:100px;font:800 10px/1.2 var(--font-head);letter-spacing:.08em;text-transform:uppercase}
.crl-f.is-before .crl-f__k{background:rgba(255,122,107,.12);color:var(--coral)}
.crl-f.is-after .crl-f__k{background:rgba(79,191,160,.14);color:var(--teal)}
.crl-f__page{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;height:176px;padding:14px;border-radius:12px;border:1px solid var(--edge-2);background:#12151B;overflow:hidden}
.crl-f.is-after .crl-f__page{border-color:var(--teal-line)}
.crl-f__page.is-phone{width:118px;justify-self:center;margin:0 auto;padding:12px 10px;border-radius:18px;border-width:2px}
.crl-f__h{font:800 13px/1.25 var(--font-head);letter-spacing:-.01em;color:var(--text)}
.crl-f__h.is-dim{color:var(--text-mid)}
.crl-f__h.is-tiny{font-size:9px;line-height:1.2}
.crl-f__h.is-off{text-decoration:underline wavy var(--coral);text-underline-offset:4px;color:var(--text-mid)}
.crl-f__h.is-match{text-decoration:underline var(--teal);text-decoration-thickness:2px;text-underline-offset:4px}
.crl-f__sk{display:block;width:88%;height:6px;border-radius:3px;background:rgba(255,255,255,.08);flex:0 0 auto}
.crl-f__sk.is-short{width:56%}
.crl-f__btn{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:8px;background:var(--gold);font:800 10.5px/1.1 var(--font-head);color:#111;white-space:nowrap}
.crl-f__btn.is-ghost{background:none;border:1px solid var(--edge-2);color:var(--text-dim)}
.crl-f__page > .crl-f__btn.is-ghost:last-child{margin-top:auto}
.crl-f__proof{font-size:11px;font-weight:700;color:var(--gold)}
.crl-f__trust{font-size:11px;font-weight:600;color:var(--teal)}
.crl-f__time,.crl-f__count{position:absolute;right:10px;top:10px;padding:3px 8px;border-radius:7px;font:700 10.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.crl-f__time.is-slow,.crl-f__count.is-slow{background:rgba(255,122,107,.12);color:var(--coral)}
.crl-f__time.is-fast,.crl-f__count.is-fast{background:rgba(79,191,160,.14);color:var(--teal)}
.crl-f__load{display:grid;place-items:center;width:100%;height:56px}
.crl-f__load i{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,255,255,.12);border-top-color:var(--coral);animation:crlSpin 1s linear infinite}
@keyframes crlSpin{to{transform:rotate(360deg)}}
.crl-f__form{display:grid;gap:4px;width:100%;margin-top:18px}
.crl-f__form i{display:block;height:8px;border-radius:3px;border:1px solid var(--edge-2);background:#0B0D11}
.crl-f.is-after .crl-f__form i{height:14px}
.crl-f__ad{display:block;width:100%;padding:6px 8px;border-radius:8px;background:rgba(66,133,244,.12);font-size:10px;line-height:1.3;color:#AFC8F7}
.crl-f__ad small{display:block;font:700 8.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#7FA3E8}
.crl-f__fold{position:absolute;left:0;right:0;bottom:22px;border-top:1.5px dashed var(--coral)}
.crl-f__bar{position:absolute;left:6px;right:6px;bottom:8px;display:grid;place-items:center;height:24px;border-radius:8px;background:var(--gold);font:800 10.5px/1 var(--font-head);color:#111}
@media (min-width:1001px){
  html.el8-js .crl[data-svt] .crl-i__body{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;gap:40px;padding:28px 30px 28px 32px}
  html.el8-js .crl[data-svt] .crl-i__leak p{font-size:16.5px;color:var(--text)}
  html.el8-js .crl[data-svt] .is-cur .crl-f.is-after{animation:ppwIn .5s .25s var(--ease) both}
}
@keyframes ppwIn{from{opacity:0;transform:translateY(10px)}}
@media (max-width:700px){
  .crl-i__leak p{font-size:14px}
  .crl-ab{gap:8px}
  .crl-f__page{height:150px;padding:10px}
  .crl-f__page.is-phone{width:96px}
  .crl-f__h{font-size:11.5px}
  .crl-f__btn{min-height:22px;padding:0 8px;font-size:9.5px}
  .crl-chips li{font-size:11px;padding:4px 8px}
}
@media (prefers-reduced-motion:reduce){.crl-f__load i,.crl .crl-f{animation:none!important}}
.crl-f__p{font-size:10.5px;line-height:1.4;color:var(--text-soft)}
.crl-f.is-before .crl-f__p{color:var(--text-dim)}
.crl-f__arrow{align-self:center;width:2px;height:10px;margin:-4px 0;background:var(--edge-2)}
.crl-f__page{gap:7px}
@media (max-width:700px){.crl-f__p{font-size:9.5px}}

/* ============ WHY: one finding's road to your live site, a typical CRO agency's beside ours (kit/cro/flow) ============ */
.crq{display:grid;gap:14px;padding:22px 24px 18px;border-radius:24px;border:1px solid var(--edge-2);background:linear-gradient(180deg,#14171C,#0D0F13);box-shadow:0 50px 100px -55px rgba(0,0,0,.95)}
.crq__top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--edge)}
.crq__top b{font:800 16px/1.25 var(--font-head);letter-spacing:-.01em;color:var(--text)}
.crq__top span{font:700 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.crq-road{display:grid;gap:8px;padding:12px 0 4px}
.crq-road__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.crq-road__head b{font:800 14px/1.2 var(--font-head);color:var(--text)}
.crq-road.is-them .crq-road__head b{color:var(--text-mid)}
.crq-road__head em{padding:3px 9px;border-radius:100px;font:700 11px/1.2 var(--font-body,inherit);font-style:normal}
.crq-road.is-them .crq-road__head em{background:rgba(255,122,107,.12);color:var(--coral)}
.crq-road.is-us .crq-road__head em{background:rgba(79,191,160,.14);color:var(--teal)}
.crq-road__track{position:relative;height:46px;border-radius:12px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 10%)}
.crq-step{position:absolute;left:var(--l);width:var(--w);top:4px;bottom:4px;padding:0 3px}
.crq-step i{display:flex;align-items:center;height:100%;padding:0 10px;border-radius:9px;border:1px solid var(--edge-2);background:#161A20;font:700 11.5px/1.2 var(--font-body,inherit);font-style:normal;color:var(--text);overflow:hidden}
.crq-road.is-them .crq-step i{color:var(--text-mid)}
.crq-step.is-wait i{border-style:dashed;background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(255,255,255,.035) 7px 14px);color:var(--text-soft);font-style:italic}
.crq-step.is-live i{border-color:var(--teal);background:rgba(79,191,160,.16);color:var(--teal)}
.crq-step.is-loop i{border-color:var(--gold-line);background:rgba(244,160,0,.08);color:var(--gold)}
.crq-road.is-us .crq-step:not(.is-live):not(.is-loop) i{border-color:var(--teal-line)}
.crq__axis{position:relative;height:14px}
.crq__axis b{position:absolute;left:var(--x);transform:translateX(-50%);white-space:nowrap;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text-dim)}
.crq__axis b:first-child{transform:none;left:0}
.crq__cap{margin:4px 0 0;padding-top:12px;border-top:1px dashed var(--edge-2);font:800 15px/1.35 var(--font-head);letter-spacing:-.01em;color:var(--text)}
html.el8-js .crq:not(.is-in) .crq-step{opacity:0}
html.el8-js .crq.is-in .crq-step{animation:ppwIn .45s calc(var(--r) * 120ms + 200ms) var(--ease) both}
html.el8-js .crq.is-in .crq-road.is-us .crq-step{animation-delay:calc(var(--r) * 120ms + 700ms)}
@media (max-width:700px){
  .crq{padding:16px 12px 14px;gap:10px}
  .crq-road__track{height:auto;display:grid;gap:5px;background:none}
  .crq-step{position:static;padding:0}
  .crq-step i{min-height:30px;padding:6px 10px}
  .crq__axis{display:none}
  .crq__cap{font-size:14px}
}
@media (prefers-reduced-motion:reduce){html.el8-js .crq .crq-step{opacity:1;animation:none!important}}
/* the roads take the section's full width (a week each needs room for its words); the terms sit two by two beneath */
.crx-why-sec .crx-why{grid-template-columns:minmax(0,1fr);gap:30px}
.crx-why-sec .crx-why__peek{position:relative;top:0;max-width:none}
@media (min-width:701px){.crx-why-sec .crx-terms{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (min-width:1001px){.crq{padding:26px 30px 22px}.crq-step i{font-size:12.5px}.crq-road__track{height:50px}}

/* ============ FREE AUDIT: the replayed page is the hero's page A (real words), level with the list ============ */
.crx-audit-sec .crx-audit{align-items:start}
.crx-rp__h{display:block;margin-bottom:6px;font:800 15px/1.2 var(--font-head);letter-spacing:-.01em;color:var(--text-mid)}
.crx-rp__p{display:block;margin-bottom:10px;font-size:11px;line-height:1.4;color:var(--text-dim)}
.crx-rp__fh{display:block;margin-bottom:6px;font:800 11px/1.2 var(--font-head);color:var(--text-soft)}
@media (max-width:700px){.crx-rp__h{font-size:12px}.crx-rp__p{font-size:9.5px;margin-bottom:6px}}

/* ============ FREE TOOLS: the first tool leads as a large card, the others as rows beside it (no one row of four) ============ */
.crx-tool__body{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}
.crx-tool__first{align-self:flex-start;padding:5px 11px;border-radius:100px;background:var(--gold);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#111}
.crx-tool__go{margin-top:auto}
@media (min-width:1001px){
  .crx-tools-sec .crx-tools{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-auto-rows:auto;gap:14px 18px}
  .crx-tools-sec .crx-tool{grid-column:2}
  .crx-tools-sec .crx-tool.is-first{grid-column:1;grid-row:1 / span 3}
  .crx-tools-sec .crx-tool:not(.is-first) a{flex-direction:row;align-items:stretch;gap:20px;padding:12px}
  .crx-tools-sec .crx-tool:not(.is-first) .crx-tool__peek{flex:0 0 170px;min-height:0;height:auto}
  .crx-tools-sec .crx-tool:not(.is-first) .crx-tool__body{padding:6px 6px 4px 0}
  .crx-tools-sec .crx-tool.is-first a{padding:18px 18px 22px}
  .crx-tools-sec .crx-tool.is-first .crx-tool__peek{flex:1;min-height:250px}
  .crx-tools-sec .crx-tool.is-first .crx-tool__t{font-size:21px}
}

/* ============ PHONES (the CRO pass): each section's picture, card and dots inside about one screen (700px) ============ */
@media (max-width:700px){
  /* why: each road's steps flow as chips, in order, instead of week-wide slivers */
  .crq-road__track{display:flex;flex-wrap:wrap;gap:5px}
  .crq-step{width:auto}
  .crq-step i{min-height:28px;padding:5px 9px;font-size:11.5px}
  /* the leaks: the card carries the leak and its before and after; the test's checklist waits for wider screens */
  .crl-chips{display:none}
  .crl-f__page{height:132px}
  .crl-k{margin-bottom:8px}
  /* the experiment log: tighter rows so it and the chosen mistake share the screen */
  .crx-forest{padding:16px 16px 14px}
  .crx-forest__head b{font-size:16px;margin-top:6px}
  .crx-forest__run{margin-top:12px;padding:8px 0;font-size:12px}
  .crx-forest__row{padding:8px 0 6px}
  .crx-forest__name{font-size:13.5px}
  .crx-forest__res{font-size:11.5px}
  .crx-forest__bar{height:14px;margin-top:4px}
}
@media (max-width:700px){
  .crl-f__time,.crl-f__count{top:auto;bottom:8px;right:8px}
  .crl-f__p{display:none}
}
/* the 90 days: a test still running at day 90 has no outcome yet (no marker, an open end) */
.crx-ratchet__test.is-run{border-right-style:dashed;border-top-right-radius:0;border-bottom-right-radius:0;background:linear-gradient(90deg,rgba(79,191,160,.16),rgba(79,191,160,.04))}
.crx-ratchet__test.is-run .crx-ratchet__end{display:none}

/* ============ OWNER RULES (2 Oct 2026, after the PPC review; build/HANDOVER.md section 5): phones show every word,
   pictures sit above their words, and no card or panel has an empty foot ============ */
/* read more: phones only; the + turns to × once open */
.crx-more{display:none}
@media (max-width:700px){
  .crx-more{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:0;padding:0 4px;border:0;background:none;color:var(--gold);font:700 14.5px/1 var(--font-body,inherit);cursor:pointer}
  .crx-more i{position:relative;flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--gold-line)}
  .crx-more i::before,.crx-more i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:2px;margin:-1px 0 0 -5px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)}
  .crx-more i::after{transform:rotate(90deg)}
  .crx-more[aria-expanded="true"] i::before{transform:rotate(45deg)}
  .crx-more[aria-expanded="true"] i::after{transform:rotate(135deg)}
  .crx-more:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:10px}
  /* each leak's test checklist */
  .crl-chips.is-open{display:flex}
}

/* desktop, nothing pushed apart and no empty middle (owner, 2 Oct 2026, on PPC): the leak's words are centred beside
   its test (the panel line above, .crl-i__body align-items:center); the free audit's replay and its list sit side by
   side, the "not much traffic yet" card full width under both (it sat under the list, leaving the replay's column
   empty and a gap between the list and the card); the pricing notes run the full width, as the plans above them */
@media (min-width:1001px){
  .crx-audit-sec .crx-audit{align-items:center;row-gap:28px}
  .crx-audit__side{display:contents}
  .crx-audit__pic{grid-column:1;grid-row:1}
  .crx-audit__car{grid-column:2;grid-row:1;min-width:0}
  .crx-audit .svc-acta{grid-column:1 / -1;grid-row:2;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 40px;margin-top:0;padding:22px 26px}
  .crx-audit .svc-acta__none{grid-column:1;grid-row:1;font-size:15px}
  .crx-audit .svc-acta__fine{grid-column:1;grid-row:2;padding-left:42px}
  .crx-audit .svc-acta__row{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-items:stretch;gap:4px;padding-top:0;border-top:0}
  .crx-audit .svc-acta__row .svc-band__sms{justify-content:center}
  .crx-price-sec .crx-build,.crx-price-sec .svc-pricenote.crx-audits{max-width:none}
}

/* where conversions leak (desktop; owner, 2 Oct 2026: "doesn't fit in 1 desktop screen"): the funnel, the leak tabs
   and the open leak fit one screen (about 780px), so the chosen leak and its drain are seen together */
@media (min-width:1001px){
  .crx-sankey{margin-bottom:18px}
  .crx-sankey__k{margin-bottom:12px}
  .crx-sankey__cap{margin-top:8px}
  .crx-flow.is-across .crx-flow__stage{padding-bottom:8px}
  .crx-flow__stage b{font-size:24px}
  .crx-flow.is-across .crx-flow__loss{padding-top:6px;gap:3px}
  .crx-flow__loss b{font-size:20px}
  html.el8-js .crx-lk[data-svt] .crx-lk-i{grid-template-rows:62px auto}
  html.el8-js .crx-lk[data-svt] .crx-lk-i__h{height:62px}
  html.el8-js .crl[data-svt] .crl-i__body{padding:20px 28px 20px 30px}
  .crx-lk .crl-f__page{height:140px}
  /* the long form keeps its button inside the shorter frame */
  .crx-lk .crl-ab.is-3 .crl-f__form{margin-top:4px;gap:3px}
  .crx-lk .crl-ab.is-3 .crl-f__form i{height:6px}
  .crx-lk .crl-ab.is-3 .crl-f.is-after .crl-f__form i{height:11px}
  .crx-lk .crl-ab.is-3 .crl-f__count{top:auto;bottom:16px}
  .crx-lk .crl-chips{margin-top:10px}
}

/* the expanding lists (desktop): the open answer hugs its words; the list holds its tallest height under the last
   item (sv-cro.js), so nothing below moves */
@media (min-width:1001px){
  .crx-errs,.crx-checks{align-content:start}
  html.el8-js .crx-errs .svc-acc__pad,html.el8-js .crx-checks .svc-acc__pad{min-height:0}
}

/* phones and tablets: swipe cards fill their room, pictures first */
@media (max-width:1000px){
  /* what you get: the example above its words; its frame fills the room above them, its contents centred */
  .crv-i__pic > .crx-ev{display:flex;flex-direction:column;justify-content:center}
  /* the leaks: the test drawn before and after first, then the leak, then the checklist */
  .crx-lk-i__body.crl-i__body{display:flex;flex-direction:column;gap:12px;flex:1}
  .crl-i__fix{display:contents}
  .crl-i__fix > .crl-k{order:1;margin-bottom:0}
  /* the two frames fill the card's spare room (owner, 2 Oct 2026, on PPC: never centre a picture in a gap); each page
     grows with it, so a long form keeps its button inside the frame */
  .crl-i__pic{order:2;display:grid;flex:1}
  .crl-ab > .crl-f{grid-template-rows:auto minmax(0,1fr)}
  .crl-f__page{height:auto;min-height:132px}
  /* the field counts keep their own row under the form's button */
  .crl-ab.is-3 .crl-f__page{padding-bottom:38px}
}
@media (max-width:700px){
  /* (owner, 3 Oct 2026: the section ran too long on phones) tighter leak cards */
  .crx-lk-i{gap:8px;padding:16px 16px 18px}
  .crx-lk-i__body.crl-i__body{gap:10px}
  .crl-f__page{min-height:96px}
  .crl-ab.is-3 .crl-f__page{min-height:124px}
  /* the leak's words: three lines, the rest with the test's checklist behind Read more */
  .crl-i__leak p:not(.is-open){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .crl-i__leak .crl-k{margin-bottom:6px}
  .crl-f{gap:6px}
  .crl-i__leak{order:3}
  .crl-chips{order:4;margin-top:0}
  .crl-i__fix > .crx-more{order:5;align-self:flex-start}
  /* the mistakes, the free audit's checks and our terms: short words sit in the middle of the card's room */
  .crx-errc,.crx-check{display:flex;flex-direction:column}
  .crx-errc .svc-acc__body,.crx-check .svc-acc__body{display:flex;flex-direction:column;justify-content:center;flex:1}
  .crx-term{display:flex;flex-direction:column}
  .crx-term p{margin-top:auto;margin-bottom:auto}
}
@media (max-width:700px){
  /* the heatmap example shows whole (its scroll depth line and the barely seen button) */
  .crv-i__pic .crx-heat{height:auto}
  .crv-i__pic .crx-heat__plans{margin-top:12px}
  .crv-i__pic .crx-heat__plans i{height:72px}
  .crv-i__pic .crx-heat__fold{margin:16px -14px 12px}
  /* the quote card: its icon beside the title, the words under them (as on SEM and PPC) */
  main[data-svc="cro"] .crx-price-sec .svc-quote__doc{display:grid}
  main[data-svc="cro"] .svc-quote{grid-template-columns:auto minmax(0,1fr);gap:12px 16px;padding:18px 18px 20px}
  main[data-svc="cro"] .svc-quote > div:not(.svc-band__act){display:contents}
  main[data-svc="cro"] .svc-quote__doc{width:42px;height:52px;padding:10px 8px;gap:4px}
  main[data-svc="cro"] .svc-quote__doc i{height:4px}
  main[data-svc="cro"] .svc-quote__doc b{right:-8px;bottom:-8px;width:22px;height:22px;font-size:12px}
  main[data-svc="cro"] .svc-quote h3{align-self:center;margin:0;font-size:19px;line-height:1.2}
  main[data-svc="cro"] .svc-quote p,main[data-svc="cro"] .svc-quote .svc-band__act{grid-column:1 / -1}
  main[data-svc="cro"] .svc-quote .svc-band__act .wdp-btn{width:100%;justify-content:center}
  /* every button on a phone runs full width */
  main[data-svc="cro"] .svc-res__all .wdp-btn{width:100%;justify-content:center}
  /* the free tools (owner, 2 Oct 2026, on PPC's: no gap before "Try it free"): the picture takes the spare room, the
     words and the link stay together under it */
  .crx-tool__peek{display:grid;place-items:center;flex:1;height:auto;min-height:120px}
  .crx-tool__body{flex:0 0 auto}
  .crx-tool__go{margin-top:4px}
  /* the glossary: one card with only an edge of the next */
  main[data-svc="cro"] .slx__entry,main[data-svc="cro"] .slx__entry:first-child{flex-basis:calc(100% - 22px)}
}
/* the narrowest phones: each funnel loss still on one line */
@media (max-width:380px){.crx-flow.is-down .crx-flow__loss b{font-size:13px}.crx-flow.is-down .crx-flow__loss span{font-size:10px}.crx-flow.is-down{column-gap:8px}.crx-flow.is-down .crx-flow__stage b{font-size:16px;line-height:1}}