/* Layout: pinned stage, copy + stage list on the left, one phone on the right.
   A cursor taps through seven screens: campaign live, ad, offer page, checkout, ROAS, winner, new creatives. */
.cj-stage{
  --peach:var(--bg-peach); --peach-deep:var(--peach-grad-2); --cream:var(--bg-cream); --orange:var(--orange-primary); --ink:var(--fg);
  --muted:var(--body); --soft:var(--bg-warm); --go:var(--good);
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
.cj-stage,.cj-stage *,.cj-stage *::before,.cj-stage *::after{box-sizing:border-box}

.cj-stage button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}



/* ---------- stage ---------- */
.cj-stage{position:relative;height:100svh;min-height:0;overflow:hidden;display:grid;place-items:center;padding-inline:clamp(16px,4vw,56px);
  background:var(--ref-grad)}
.cj-wrap{width:min(1240px,100%);height:100%;min-height:0;max-height:900px;display:grid;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:clamp(16px,3vw,48px);padding-block:clamp(16px,calc(var(--cj-height) * 0.03),36px)}
.cj-left{display:flex;flex-direction:column;gap:clamp(14px,calc(var(--cj-height) * 0.024),26px);min-width:0}
.cj-eyebrow{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cj-h{margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(40px,5.6vw,84px);line-height:.98;text-wrap:balance}
.cj-h .cj-line{display:block;overflow:hidden;padding-block:.04em}
.cj-h .cj-line>span{display:block}
.cj-h .cj-l2{color:var(--orange)}
.cj-lede{margin:0;max-width:34em;color:var(--muted);font-size:clamp(14px,1.2vw,18px);line-height:1.55}
@media (max-height:860px){.cj-lede{display:none}}

/* stage list */
.cj-list{list-style:none;margin:0;padding:0 0 0 22px;position:relative;display:flex;flex-direction:column}
.cj-rail{position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
.cj-rail i{display:block;width:100%;height:100%;background:var(--orange);transform-origin:top;transform:scaleY(0)}
.cj-list li{border-top:1px solid var(--line)}
.cj-list li:first-child{border-top:0}
.cj-list .cj-row{display:flex;align-items:baseline;gap:14px;width:100%;padding:9px 0;color:var(--muted);transition:color .3s,padding-left .4s cubic-bezier(.2,.8,.2,1)}
.cj-list .cj-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;min-width:2ch}
.cj-list .cj-nm{font-weight:600;font-size:clamp(16px,1.45vw,21px);flex:1}
.cj-list .cj-ar{opacity:0;transform:translateX(-8px);transition:.35s;color:var(--orange)}
.cj-list .cj-row:hover{color:var(--ink);padding-left:8px}
.cj-list .cj-row:hover .cj-ar{opacity:1;transform:none}
.cj-list .cj-row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cj-list .cj-dsc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}
.cj-list .cj-dsc>div{overflow:hidden}
.cj-list .cj-dsc p{margin:0 0 10px;max-width:33em;font-size:clamp(14px,1.08vw,16px);line-height:1.5;color:var(--muted)}
.cj-list li.cj-on .cj-row,.cj-list li.cj-on .cj-nm{color:var(--ink)}
.cj-list li.cj-on .cj-n{color:var(--orange)}
.cj-list li.cj-on .cj-dsc{grid-template-rows:1fr}
.cj-ticks{display:none}

.cj-cta{align-self:flex-start;position:relative;display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:clamp(15px,1.25vw,18px);color:var(--ink);text-decoration:none;padding-bottom:3px}
.cj-cta::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.cj-cta:hover::after{transform:scaleX(0);transform-origin:right}
.cj-cta svg{width:1.15em;height:1.15em;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cj-cta:hover svg{transform:translateX(6px)}
.cj-cta:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* ---------- phone ---------- */
.cj-zone{position:relative;height:100%;min-height:0;min-width:0;perspective:1400px;display:grid;place-items:center}
.cj-numeral{position:absolute;left:50%;top:50%;translate:-50% -50%;font-family:var(--f-display);font-size:min(46vw,calc(var(--cj-height) * 0.64));line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,90,31,.22);pointer-events:none;user-select:none}
.cj-fit{position:absolute;left:50%;top:50%;width:300px;height:620px;transform-origin:center}
.cj-tilt{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.cj-phone{position:absolute;inset:0;border-radius:46px;background:var(--ink);padding:8px;box-shadow:0 50px 70px -30px rgba(120,45,10,.55),0 0 0 1.5px rgba(255,255,255,.08) inset}
.cj-phone::before{content:"";position:absolute;left:50%;top:14px;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:#000;z-index:5}
.cj-screen{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:var(--cream)}
.cj-scr{position:absolute;inset:0;background:var(--cream);display:flex;flex-direction:column}
.cj-scr .cj-pad{padding:50px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.cj-mono{margin:0;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cj-btn,.cj-ad-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:14px;background:var(--orange);color:#fff;font-weight:600;font-size:15px;margin-top:auto;flex:none}
.cj-bottle{position:relative;width:70px;height:132px;display:flex;flex-direction:column;align-items:center}
.cj-bottle .cj-cap{width:26px;height:26px;border-radius:7px 7px 3px 3px;background:var(--ink)}
.cj-bottle .cj-body{width:64px;height:106px;border-radius:11px 11px 16px 16px;background:linear-gradient(135deg,#fffaf2,#f7dfcb);border:1px solid #bf8d7355;box-shadow:inset -8px 0 16px #ca8f6426,0 8px 16px #6a30151a;display:grid;place-items:center}
.cj-bottle em{font-style:normal;font-family:var(--f-display);font-size:15px;letter-spacing:.06em;color:var(--orange)}
.cj-thumb{display:block;border-radius:9px}
.cj-g1{background:linear-gradient(160deg,#F4D9C8,#E9B48F)}.cj-g2{background:linear-gradient(160deg,#FBCDB0,var(--orange))}.cj-g3{background:linear-gradient(160deg,#EFE3DA,#CBB6A6)}
.cj-g4{background:linear-gradient(200deg,#FFE9DB,#F5A06E)}.cj-g5{background:linear-gradient(160deg,var(--orange),#B8461C)}.cj-g6{background:linear-gradient(160deg,#3a2c25,#171310)}

/* s1 campaign */
.cj-camp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.cj-camp b{display:block;font-size:14px}
.cj-camp small{display:grid;font-size:12px;color:var(--muted);margin-top:3px}
.cj-camp small span{grid-area:1/1;display:flex;align-items:center;gap:6px}
.cj-camp small .cj-st-on{opacity:0;color:var(--go);font-weight:600}
.cj-camp small i{width:7px;height:7px;border-radius:50%;background:#B9ADA4}
.cj-camp small .cj-st-on i{background:var(--go)}
.cj-sw{position:relative;width:46px;height:26px;border-radius:14px;background:rgba(23,19,16,.2);flex:none}
.cj-sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.cj-crow{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}
.cj-crow .cj-thumb{width:42px;height:42px;flex:none}
.cj-crow div{flex:1;min-width:0}.cj-crow b{display:block;font-size:12.5px}.cj-crow small{font-size:11px;color:var(--muted)}
.cj-chip{display:grid;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.cj-chip em{grid-area:1/1;font-style:normal;padding:4px 8px;border-radius:12px;text-align:center}
.cj-chip .cj-c-off{background:rgba(23,19,16,.08);color:var(--muted)}
.cj-chip .cj-c-on{background:var(--go);color:#fff;opacity:0}
.cj-spark{display:flex;align-items:flex-end;gap:5px;height:70px;margin-top:2px}
.cj-spark i{flex:1;background:linear-gradient(var(--orange),#F5A06E);border-radius:4px 4px 2px 2px;height:var(--h);transform-origin:bottom}

/* s2 ad in feed */
.cj-ad-h{display:flex;align-items:center;gap:10px;padding:50px 16px 10px}
.cj-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#F5A06E)}
.cj-ad-h b{display:block;font-size:13px}.cj-ad-h small{font-size:11px;color:var(--muted)}
.cj-ad-img{position:relative;height:286px;background:linear-gradient(160deg,#FBD3BC,#EE8A5C 70%,var(--orange));display:flex;align-items:flex-end;justify-content:center;padding-bottom:22px;overflow:hidden}
.cj-ad-hook{position:absolute;left:16px;right:16px;top:16px;margin:0;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:34px;line-height:.98;color:#fff;text-shadow:0 2px 14px rgba(120,45,10,.35)}
.cj-ad-hook span{display:block;overflow:hidden;padding-block:.03em}.cj-ad-hook span>b{display:block;font-weight:800}
.cj-ad-copy{margin:0;padding:12px 16px 0;display:flex;flex-direction:column;gap:3px}
.cj-ad-copy b{font-size:14.5px;line-height:1.3}.cj-ad-copy span{font-size:12px;color:var(--muted)}
.cj-ad-cta{margin:auto 16px 22px;border-radius:12px}
/* s3 page */
.cj-pimg{height:196px;background:linear-gradient(160deg,#FDEBDD,var(--peach));display:grid;place-items:center;overflow:hidden;position:relative;flex:none}
.cj-pimg .cj-bottle{transform:scale(.82)}
.cj-s3 .cj-pad{padding-top:12px;gap:9px}
.cj-s3 .cj-product-title{margin:0;font-size:17px}
.cj-stars{font-size:12px;color:var(--orange);letter-spacing:2px}.cj-stars small{color:var(--muted);letter-spacing:0;margin-left:6px}
.cj-price{font-family:var(--f-display);font-size:30px;display:flex;align-items:baseline;gap:10px;line-height:1}
.cj-was{position:relative;font-family:var(--f-body);font-size:14px;color:var(--muted)}
.cj-was::after{content:"";position:absolute;left:0;right:0;top:55%;height:1.5px;background:var(--muted);transform-origin:left}
.cj-offer{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--ink);color:#fff;border-radius:12px;padding:9px 12px;font-size:12px;line-height:1.3}
.cj-offer b{color:#FFB48F;font-weight:600}
.cj-timer{font-family:var(--f-mono);font-size:12px;background:rgba(255,255,255,.14);padding:3px 7px;border-radius:7px;font-variant-numeric:tabular-nums}
.cj-chips{display:flex;gap:6px;flex-wrap:wrap}.cj-chips span{font-size:11px;border:1px solid var(--line);padding:4px 9px;border-radius:20px}
/* s4 checkout */
.cj-sum{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:14px;background:#fff}
.cj-sum .cj-mini{width:38px;height:38px;border-radius:10px;background:linear-gradient(160deg,#FBCDB0,var(--orange));flex:none}
.cj-sum div{flex:1}.cj-sum b{font-size:13px;display:block}.cj-sum small{font-size:11px;color:var(--muted)}
.cj-sum em{font-style:normal;font-size:11px;font-family:var(--f-mono);color:var(--go)}
.cj-field small{font-size:10px;color:var(--muted);font-family:var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.cj-fill{height:34px;margin-top:4px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 10px;display:flex;align-items:center}
.cj-fill i{display:block;height:7px;border-radius:4px;background:rgba(23,19,16,.55);width:var(--w);transform-origin:left}
.cj-pay{display:flex;gap:8px}.cj-opt{flex:1;display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;font-size:12px;background:#fff}
.cj-opt.cj-on{border-color:var(--orange);background:var(--soft)}
.cj-rd{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--muted);display:grid;place-items:center;flex:none}
.cj-opt.cj-on .cj-rd{border-color:var(--orange)}.cj-opt.cj-on .cj-rd::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
.cj-tot{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}.cj-tot b{font-size:17px}
.cj-btn .cj-t2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0;background:var(--go);border-radius:14px}
.cj-btn .cj-t2 svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* s5 roas */
.cj-big small{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.cj-big b{display:block;font-family:var(--f-display);font-size:58px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.cj-big .cj-up{display:inline-block;margin-left:8px;font-family:var(--f-mono);font-size:11px;color:var(--go);vertical-align:middle}
.cj-chart{width:100%;height:auto;overflow:visible;margin-top:2px}
.cj-chart .cj-grid{stroke:var(--line);stroke-width:1}
.cj-chart .cj-line{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round}
.cj-chart .cj-area{fill:url(#ag)}
.cj-chart .cj-end{fill:var(--orange);stroke:var(--cream);stroke-width:3}
.cj-axis{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.cj-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.cj-tiles div{border:1px solid var(--line);border-radius:12px;padding:9px;background:#fff}
.cj-tiles small{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}
.cj-tiles b{font-size:14px}
/* s6 winner */
.cj-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.cj-cc{position:relative;border:1px solid var(--line);border-radius:14px;padding:7px;display:flex;flex-direction:column;gap:6px;background:#fff}
.cj-cc .cj-thumb{height:70px}
.cj-cc span{font-weight:600;font-size:11.5px}
.cj-cc .cj-bar{height:6px;border-radius:4px;background:rgba(23,19,16,.08);overflow:hidden}
.cj-cc .cj-bar i{display:block;height:100%;width:var(--w);background:var(--ink);border-radius:4px;transform-origin:left}
.cj-cc.cj-win{border-color:var(--orange)}.cj-cc.cj-win .cj-bar i{background:var(--orange)}
.cj-cc small{font-family:var(--f-mono);font-size:9px;color:var(--muted)}
.cj-badge{position:absolute;right:-5px;top:-9px;background:var(--orange);color:#fff;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;padding:3px 7px;border-radius:12px;z-index:2}
.cj-anat{display:flex;flex-direction:column;gap:6px}
.cj-arow{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:12px;line-height:1.35}
.cj-arow b{font-family:var(--f-mono);font-weight:500;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);min-width:32px}
.cj-note{font-family:var(--f-mono);font-size:9px;color:var(--muted);letter-spacing:.08em;margin:0}
/* s7 new creatives */
.cj-winrow{display:flex;align-items:center;gap:10px;padding:8px;border:1.5px solid var(--orange);border-radius:12px;background:var(--soft);position:relative}
.cj-winrow .cj-thumb{width:44px;height:44px;flex:none}
.cj-winrow b{display:block;font-size:12.5px}.cj-winrow small{font-size:11px;color:var(--muted)}
.cj-same{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.cj-same svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cj-vars{display:flex;flex-direction:column;gap:8px}
.cj-vrow{display:flex;gap:10px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff;position:relative}
.cj-vrow .cj-thumb{width:54px;height:62px;flex:none}
.cj-vrow div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cj-vrow b{font-size:12px;line-height:1.2}.cj-vrow p{margin:0;font-size:10.5px;line-height:1.3;color:var(--muted)}
.cj-vrow .cj-cta-chip{align-self:flex-start;margin-top:2px;background:var(--orange);color:#fff;font-size:10px;font-weight:600;padding:3px 9px;border-radius:10px}
.cj-vrow .cj-tag{position:absolute;right:8px;bottom:8px;font-family:var(--f-mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:#fff;padding:3px 6px;border-radius:8px}
.cj-live{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--ink);color:#fff;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:20px;margin-top:auto}
.cj-live i{width:7px;height:7px;border-radius:50%;background:#5CE08A}
/* cursor, ripple, toast */
.cj-cur{position:absolute;left:0;top:0;z-index:8;width:30px;height:30px;margin:-4px 0 0 -4px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.cj-rip{position:absolute;left:0;top:0;z-index:7;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(255,90,31,.5);opacity:0;pointer-events:none}
.cj-toast{position:absolute;z-index:9;left:-118px;top:96px;display:flex;align-items:center;gap:8px;background:var(--cream);color:var(--ink);padding:9px 14px 9px 10px;border-radius:30px;font-weight:600;font-size:13px;box-shadow:0 14px 28px -10px rgba(120,45,10,.45);white-space:nowrap}
.cj-toast i{width:20px;height:20px;border-radius:50%;background:var(--orange);display:grid;place-items:center}
.cj-toast svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- phone-width layout ---------- */
@media (max-width:860px){
  .cj-stage{min-height:0}
  .cj-wrap{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding-block:14px}
  .cj-left{display:contents}
  .cj-head{order:1}.cj-zone{order:2}.cj-info{order:3}
  .cj-h{font-size:clamp(30px,9.4vw,44px)}
  .cj-lede{display:none}
  .cj-list{padding-left:0}.cj-rail{display:none}
  .cj-list li{display:none;border:0}.cj-list li.cj-on{display:block}
  .cj-list .cj-row{padding:0 0 4px;pointer-events:none}.cj-list .cj-ar{display:none}
  .cj-list .cj-dsc p{margin-bottom:6px;font-size:14px}
  .cj-ticks{display:flex;gap:5px;margin-bottom:6px}.cj-ticks i{display:block;height:3px;flex:1;border-radius:2px;background:var(--line);transition:background .4s}.cj-ticks i.cj-on{background:var(--orange)}
  .cj-toast{left:50%;right:auto;top:-22px;translate:-50% 0}
  .cj-info{display:flex;flex-direction:column;gap:6px;min-height:190px}
}
.cj-info{display:flex;flex-direction:column;gap:clamp(12px,calc(var(--cj-height) * 0.02),24px)}
.cj-head{display:flex;flex-direction:column;gap:clamp(12px,calc(var(--cj-height) * 0.02),20px)}
.cj-stage-nav[hidden]{display:none}
.cj-stage-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cj-stage-nav button{padding:7px 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;background:var(--cream)}
.cj-stage-nav button:disabled{opacity:.4;cursor:default}
.cj-stage-nav button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cj-stage-nav span{font-family:var(--f-mono);font-size:12px;white-space:nowrap}
.cj-motion-reduced .cj-list .cj-dsc,.cj-motion-reduced .cj-list .cj-row,.cj-motion-reduced .cj-ticks i{transition:none}
.cj-motion-reduced .cj-ticks{display:none}
@media (max-width:860px){.cj-motion-reduced .cj-info{min-height:225px;gap:6px}}
/* Fit the content to the actual browser height, including a shorter preview pane. */
@media (min-width:861px) and (max-height:832px){
  .cj-wrap{padding-block:clamp(12px,calc(var(--cj-height) * 0.02),20px)}
  .cj-left{gap:clamp(8px,calc(var(--cj-height) * 0.017),14px)}
  .cj-head{gap:clamp(8px,calc(var(--cj-height) * 0.016),14px)}
  .cj-h{font-size:clamp(28px,min(5.1vw,calc(var(--cj-height) * 0.08)),72px)}
  .cj-eyebrow{font-size:clamp(10px,calc(var(--cj-height) * 0.018000000000000002),12px)}
  .cj-info{gap:clamp(8px,calc(var(--cj-height) * 0.017),14px)}
  .cj-list .cj-row{padding:clamp(4px,calc(var(--cj-height) * 0.01),8px) 0;gap:10px}
  .cj-list .cj-nm{font-size:clamp(14px,min(1.45vw,calc(var(--cj-height) * 0.03)),20px)}
  .cj-list .cj-dsc p{font-size:clamp(12px,min(1.08vw,calc(var(--cj-height) * 0.025)),15px);line-height:1.4;margin-bottom:6px}
  .cj-cta{font-size:clamp(13px,calc(var(--cj-height) * 0.025),16px)}
}
@media (max-width:860px) and (max-height:722px){
  .cj-wrap{padding-block:10px;gap:6px}
  .cj-head{gap:8px}
  .cj-eyebrow{font-size:10px}
  .cj-h{font-size:clamp(22px,min(9.4vw,calc(var(--cj-height) * 0.06)),36px)}
  .cj-info{min-height:165px;gap:6px}
  .cj-list .cj-nm{font-size:14px}
  .cj-list .cj-dsc p{font-size:13px;line-height:1.4}
  .cj-cta{font-size:14px}
  .cj-motion-reduced .cj-info{min-height:195px;gap:5px}
  .cj-stage-nav button{padding:5px 8px;font-size:12px}
}
/* Landscape phones need a full-height phone beside the explanation. */
@media (min-width:600px) and (max-width:860px) and (max-height:500px){
  .cj-wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:minmax(0,1fr);gap:24px}
  .cj-left{display:flex;flex-direction:column;gap:14px}
  .cj-head,.cj-zone,.cj-info{order:0}
  .cj-h{font-size:clamp(26px,min(4.8vw,calc(var(--cj-height) * 0.09)),40px)}
  .cj-info,.cj-motion-reduced .cj-info{min-height:0;gap:6px}
  .cj-toast{top:40px}
}
@media (prefers-reduced-motion:reduce){.cj-list .cj-dsc{transition:none}}

.cj-stage{--cj-nav-space:72px;--cj-height:calc(100svh - var(--cj-nav-space));padding-top:var(--cj-nav-space);font-family:var(--f-body);color:var(--ink);font-size:16px;line-height:normal;text-align:left}
.cj-wrap{margin-inline:auto;padding-inline:0}

#trusted-by.cj-stage{scroll-margin-top:0}

/* Native sticky positioning stays inside the reserved mobile scroll space. */
.cj-scroll-shell{position:relative;isolation:isolate}
.cj-scroll-shell.cj-sticky-shell{overflow:clip;contain:paint}
.cj-scroll-shell.cj-sticky-shell>.cj-stage{position:sticky;top:0;width:100%;margin:0}

/* A compact text logo for the illustrative skincare product. */
.cj-bottle .cj-brandmark{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink);font:700 14px/1.1 var(--f-body);letter-spacing:.08em;text-align:center}
.cj-brandmark svg{width:15px;height:18px}
.cj-brandmark small{display:block;font-size:6px;letter-spacing:.24em;margin-top:3px}
.cj-ad-h .cj-av{display:grid;place-items:center;color:white;font:700 15px/1 var(--f-body)}
.cj-ad-h .cj-av::after{content:'N'}

.cj-list-wrap{position:relative}
.cj-list li.cj-on .cj-n{color:var(--orange-deep)}

/* Match the illustration’s small UI text to the accessible brand palette. */
.cj-btn,.cj-ad-cta,.cj-cta-chip,.cj-vrow .cj-cta-chip{color:var(--ink)}
.cj-same,.cj-arow b{color:var(--orange-deep)}
.cj-badge{background:var(--orange-deep)}