/* =========================================================
   CUTMODE: "How it works" section (cm- namespaced so it
   cannot affect other site sections).
   Swap in your own images (jpg/png/webp path or URL).
   Leave as 'none' to keep the soft placeholder look.
   ========================================================= */
.cm-how{
  --img-record: none;   /* step 1: selfie-camera view (vertical) */
  --img-edit:   url("/__l5e/assets-v1/70966d28-61e4-46e5-b4bc-c8d1fc282597/edit-still-2.webp");   /* step 3: the clip being edited (vertical) */
  --img-left:   url("/__l5e/assets-v1/950e7cec-ca20-429b-aab9-992b89485909/deliver-1.webp");   /* step 4: left phone */
  --img-center: url("/__l5e/assets-v1/25c49d4d-3f54-49b4-bb37-9dd26b311642/deliver-3.webp");   /* step 4: middle phone */
  --img-right:  url("/__l5e/assets-v1/84aa8424-0f78-4a67-b61b-890f3620a289/deliver-2.webp");   /* step 4: right phone */

  --stepline:rgba(255,255,255,.07);
  --dimtext:#55555c;
  --grad:linear-gradient(110deg,#d46bff 0%,#3a7bff 48%,#a6f04a 100%);
  --head:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* placeholder "photo" used wherever an image slot is empty */
  --face:radial-gradient(28% 22% at 50% 36%,#b88b6d,transparent 72%),radial-gradient(42% 30% at 50% 30%,#2b2420,transparent 75%),radial-gradient(70% 42% at 50% 92%,#5a4a3c,transparent 72%),linear-gradient(180deg,#1d1a17,#0e0c0b);
}

.cm-how{display:grid;grid-template-columns:1fr 1.05fr;gap:18px;align-items:start;margin-top:56px}

/* ---------- step list ---------- */
.cm-steps{display:flex;flex-direction:column;gap:13px}
.cm-step{display:block;width:100%;text-align:left;cursor:pointer;color:inherit;font:inherit;
  border-radius:14px;padding:22px 26px;background:linear-gradient(180deg,#1a1a1d,#141416);border:1px solid var(--stepline);transition:box-shadow .4s,transform .4s}
.cm-step b{display:block;font-family:var(--head);font-weight:400;font-size:30px;line-height:1;color:var(--dimtext);transition:color .3s}
.cm-step span{display:block;max-height:0;opacity:0;overflow:hidden;font-size:17px;line-height:1.55;color:#fff;transition:max-height .45s ease,opacity .4s ease,margin .45s ease}
.cm-step span [data-brand]{display:inline;max-height:none;opacity:1;margin:0;font-size:inherit;color:inherit}
.cm-step.on{background:var(--grad);border-color:transparent;box-shadow:0 0 34px -6px rgba(110,140,255,.55),0 0 0 1px rgba(255,255,255,.08) inset}
.cm-step.on b{color:#fff}
.cm-step.on span{max-height:110px;opacity:1;margin-top:14px}
.cm-step:not(.on):hover b{color:#8a8a92}

/* ---------- stage ---------- */
.cm-stage{position:relative;container-type:inline-size;aspect-ratio:1.22/1;border-radius:18px;border:1px solid var(--stepline);background:#0d0c0f;overflow:hidden}
.cm-scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s}
.cm-scene.on{opacity:1;visibility:visible}
.cm-glow{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none}

/* phone frame shared */
.cm-phone{position:absolute;border-radius:30px;border:3px solid #c7ab7e;background:#000;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.7),inset 0 0 0 2px #0b0b0b}
.cm-island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:30%;height:14px;border-radius:10px;background:#000;z-index:5}

/* ======================= 1. RECORD ======================= */
.cm-s1 .cm-glow{width:52%;height:52%;left:44%;top:32%;background:rgba(140,40,255,.55)}
.cm-s1 .cm-ghost{position:absolute;inset:0;font-family:var(--head);font-size:14.6cqw;line-height:1;color:#4a4a50;pointer-events:none}
.cm-s1 .cm-ghost span{position:absolute;top:16.2%}
.cm-s1 .cm-ghost span:first-child{left:23.1%}
.cm-s1 .cm-ghost span:last-child{left:68.6%}
.cm-s1 .cm-phone{left:40%;top:16.5%;width:27.7%;aspect-ratio:9/19.3}
.cm-s1 .cm-hand{position:absolute;left:50%;bottom:-6%;width:135.69%;max-width:none;transform:translateX(-55%);pointer-events:none;-webkit-user-select:none;user-select:none}
.cm-cam{position:absolute;inset:0;background:var(--img-record),var(--face);background-size:cover;background-position:center}
.cm-cam-top{position:absolute;left:0;right:0;top:0;height:16%;background:#000;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;padding:0 10% 8%}
.cm-cam-top i{width:9px;height:9px;border-radius:50%;border:1px solid #777}
.cm-cam-top i:nth-child(2){border-radius:50%;background:#333;border-color:#555}
.cm-cam-corner{position:absolute;left:5%;right:5%;top:19%;bottom:27%;z-index:2;pointer-events:none;
  background:linear-gradient(#bbb,#bbb) 0 0/9px 1px no-repeat,linear-gradient(#bbb,#bbb) 0 0/1px 9px no-repeat,linear-gradient(#bbb,#bbb) 100% 0/9px 1px no-repeat,linear-gradient(#bbb,#bbb) 100% 0/1px 9px no-repeat,linear-gradient(#bbb,#bbb) 0 100%/9px 1px no-repeat,linear-gradient(#bbb,#bbb) 0 100%/1px 9px no-repeat,linear-gradient(#bbb,#bbb) 100% 100%/9px 1px no-repeat,linear-gradient(#bbb,#bbb) 100% 100%/1px 9px no-repeat}
.cm-zoom{position:absolute;left:50%;bottom:28%;transform:translateX(-50%);display:flex;gap:6px;z-index:3}
.cm-zoom i{width:17px;height:17px;border-radius:50%;background:rgba(0,0,0,.55);font-style:normal;font-size:6px;display:grid;place-items:center;color:#ddd}
.cm-zoom i:last-child{color:#f5c542}
.cm-cam-bottom{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.8));z-index:3}
.cm-modes{display:flex;justify-content:center;gap:10px;font-size:6.5px;font-weight:700;letter-spacing:.06em;color:#ddd;padding-top:8%;white-space:nowrap}
.cm-modes em{font-style:normal;color:#f5c542}
.cm-rec{position:absolute;left:50%;bottom:20%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:#e8392f;box-shadow:0 0 0 3px #111,0 0 0 5px #eee}
.cm-homebar{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:34%;height:3px;border-radius:3px;background:#fff}
.cm-audio{position:absolute;z-index:6;left:64%;top:52%;display:flex;align-items:center;gap:12px;padding:6px 16px 6px 6px;border-radius:999px;
  background:linear-gradient(100deg,#6a1eea,#8f3dff);border:1px solid rgba(255,255,255,.35);box-shadow:0 0 40px rgba(140,60,255,.7);font-size:12.5px;color:#e9ddff}
.cm-audio .cm-pl{width:28px;height:28px;border-radius:50%;background:#e8392f;display:grid;place-items:center;flex-shrink:0}
.cm-audio .cm-pl svg{width:11px;height:11px;fill:#fff}
.cm-wave{display:flex;align-items:center;gap:2px;height:18px}
.cm-wave s{display:block;width:2px;border-radius:2px;background:#fff;animation:cm-wv 1.1s ease-in-out infinite}
@keyframes cm-wv{50%{transform:scaleY(.35)}}
.cm-audio .cm-vol{width:15px;height:15px;fill:#fff}

/* ======================= 2. UPLOAD ======================= */
.cm-s2 .cm-glow{width:60%;height:60%;left:25%;top:20%;background:rgba(120,40,220,.4)}
.cm-files{position:absolute;inset:-4% -6%;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;opacity:.55;
  -webkit-mask-image:radial-gradient(55% 55% at 52% 52%,#000 15%,transparent 85%);mask-image:radial-gradient(55% 55% at 52% 52%,#000 15%,transparent 85%)}
.cm-mini{padding:14px 12px;border:1px solid rgba(255,255,255,.04);border-radius:8px;display:grid;grid-template-columns:30px 1fr;gap:4px 8px;align-items:center;font-size:8px;color:#8b8796}
.cm-mini i{grid-row:span 2;width:30px;height:22px;border-radius:4px;background:#2a2533;position:relative}
.cm-mini i:before{content:"";position:absolute;left:0;top:-4px;width:12px;height:6px;border-radius:2px 2px 0 0;background:#2a2533}
.cm-mini small{font-size:5.5px;color:#5c5866}
.cm-mini u{grid-column:span 2;text-decoration:none;display:flex;justify-content:space-between;font-size:5.5px;color:#6d6977;margin-top:6px}
.cm-mini b{grid-column:span 2;height:2px;background:linear-gradient(90deg,#888 68%,#333 68%);border-radius:2px;font-size:0}
.cm-upcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:57%;padding:22px 22px 22px;border-radius:24px;
  background:linear-gradient(160deg,rgba(80,50,110,.75),rgba(40,26,58,.85));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.12)}
.cm-uptop{display:flex;align-items:center;gap:6%}
.cm-folder{position:relative;width:38%;aspect-ratio:1.13/1;flex-shrink:0}
.cm-folder .cm-back{position:absolute;inset:0 0 6% 0;border-radius:14px;background:linear-gradient(160deg,#9a3dff,#6a17d8)}
.cm-folder .cm-back:before{content:"";position:absolute;left:0;top:-7%;width:44%;height:16%;border-radius:10px 14px 0 0;background:#8a2df5}
.cm-folder .cm-paper{position:absolute;left:9%;right:9%;top:14%;height:22%;border-radius:6px;background:#fff}
.cm-folder .cm-front{position:absolute;left:0;right:0;bottom:0;height:76%;border-radius:12px 12px 14px 14px;background:linear-gradient(180deg,#a14dff,#6312cf);box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.cm-upname b{display:block;font-size:clamp(17px,2.2vw,26px);font-weight:500}
.cm-upname span{display:block;margin-top:10px;font-size:clamp(12px,1.4vw,16px);color:#c8c2d4}
.cm-upbar{margin-top:22px;padding:14px 16px 16px;border-radius:16px;background:rgba(18,14,24,.65);border:1px solid rgba(255,255,255,.12)}
.cm-upbar .cm-row{display:flex;justify-content:space-between;align-items:center;font-size:clamp(12px,1.3vw,16px)}
.cm-upbar .cm-row span{display:flex;align-items:center;gap:10px}
.cm-spin{width:16px;height:16px;animation:cm-spin 1.2s steps(8) infinite;flex-shrink:0}
@keyframes cm-spin{to{transform:rotate(360deg)}}
.cm-uptrack{margin-top:14px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden}
.cm-uptrack i{display:block;height:100%;width:0;border-radius:3px;background:#fff}

/* ======================= 3. WE EDIT ======================= */
.cm-s3 .cm-glow{width:70%;height:60%;left:15%;top:15%;background:rgba(110,30,230,.35)}
.cm-edit-frame{position:absolute;left:38.5%;top:9%;width:25.5%;height:68%;border-radius:16px;border:1px solid rgba(255,255,255,.3);overflow:hidden;background:var(--img-edit),var(--face);background-size:cover;background-position:center}
.cm-tag{position:absolute;z-index:4;padding:10px 22px;border-radius:14px;background:linear-gradient(180deg,#7d2cff,#6215e6);border:1px solid rgba(255,255,255,.3);
  font-family:var(--head);font-size:clamp(20px,2.7vw,36px);line-height:1;color:#fff;white-space:nowrap;box-shadow:0 0 40px rgba(120,40,255,.8)}
.cm-tag.cm-t1{left:15%;top:15%}
.cm-tag.cm-t2{left:57%;top:30%}
.cm-tag.cm-t3{left:8%;top:54%;filter:blur(5px);opacity:.9}
.cm-tag.cm-t4{left:64%;top:8%;font-size:14px;padding:8px 16px;filter:blur(3px);opacity:.75}
.cm-tag.cm-t1,.cm-tag.cm-t2{animation:cm-bob 5s ease-in-out infinite}.cm-tag.cm-t2{animation-delay:-2.5s}
@keyframes cm-bob{50%{translate:0 -6px}}
.cm-timeline{position:absolute;left:9%;right:9%;bottom:6%;height:24%;border-radius:16px;border:1px solid rgba(255,255,255,.07);background:rgba(20,18,24,.65);padding:3% 2.5% 0}
.cm-strip{display:flex;height:46%;gap:1px;position:relative}
.cm-strip i{flex:1;background:var(--img-edit),var(--face);background-size:cover;background-position:center;opacity:.55}
.cm-strip i.cm-in{opacity:1}
.cm-sel{position:absolute;top:-6%;bottom:-6%;left:24%;width:53%;border:3px solid #fff;border-radius:8px;box-shadow:0 0 18px rgba(255,255,255,.2)}
.cm-sel:before,.cm-sel:after{content:"";position:absolute;top:50%;width:9px;height:20px;margin-top:-10px;border-radius:3px;background:#fff}
.cm-sel:before{left:-7px}.cm-sel:after{right:-7px}
.cm-wform{display:flex;align-items:center;gap:2px;height:38%;margin-top:4%}
.cm-wform s{flex:1;background:#d8d4e0;border-radius:2px;opacity:.75}

/* ======================= 4. DELIVER ======================= */
.cm-s4 .cm-glow{width:60%;height:35%;left:20%;top:-8%;background:rgba(130,40,255,.55)}
.cm-badge{position:absolute;left:50%;top:5.5%;transform:translateX(-50%);z-index:6;padding:12px 44px;border-radius:16px;background:linear-gradient(180deg,#7d2cff,#6215e6);border:1px solid rgba(255,255,255,.35);
  font-family:var(--head);font-size:clamp(22px,3.1vw,42px);line-height:1;white-space:nowrap;box-shadow:0 0 50px rgba(130,50,255,.85)}
.cm-s4 .cm-phone{border-color:#bfa77c}
.cm-pL{left:13%;top:44%;width:25%;height:62%;transform:rotate(-8deg);transform-origin:bottom right}
.cm-pC{left:34.5%;top:24%;width:31%;height:82%;border-radius:36px;z-index:3}
.cm-pR{left:62%;top:44%;width:25%;height:62%;transform:rotate(8deg);transform-origin:bottom left}
.cm-shot{position:absolute;inset:0;background-size:cover;background-position:center}
.cm-pL .cm-shot{background-image:var(--img-left),var(--face)}
.cm-pC .cm-shot{background-image:var(--img-center),var(--face)}
.cm-pR .cm-shot{background-image:var(--img-right),var(--face)}
.cm-shot:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,rgba(0,0,0,.35))}
.cm-pC .cm-shot{top:12%}
.cm-notch{position:absolute;left:0;right:0;top:0;height:12%;background:linear-gradient(180deg,#120720,#000);z-index:2}
.cm-notch i{position:absolute;left:50%;top:40%;width:7px;height:7px;border-radius:50%;background:#222;transform:translateX(-50%)}
.cm-capL{position:absolute;z-index:4;left:8%;top:16%;line-height:.92;color:#fff;font-weight:800;letter-spacing:-.04em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.cm-capL .a{font-size:2.6cqw}.cm-capL .b{font-size:1.75cqw;display:block}.cm-capL .c{font-size:.95cqw;font-weight:700}
.cm-capL .d{display:block;font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;font-size:2.9cqw;letter-spacing:-.02em;margin:-.15em 0 0 .3em}
.cm-capC{position:absolute;z-index:4;left:6%;right:2%;bottom:31%;white-space:nowrap;font-family:var(--head);font-size:4.6cqw;line-height:.98;color:#8a6a2c;opacity:.85;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.cm-capR{position:absolute;z-index:4;right:8%;top:17%;text-align:right;line-height:.86;color:#fff;font-weight:800;letter-spacing:-.05em;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.cm-capR .a{font-size:3.5cqw;display:block}.cm-capR .b{font-size:2.2cqw}.cm-capR .c{font-size:3.9cqw}
.cm-capR .d{display:block;font-size:2.2cqw}
.cm-s4 .cm-fade{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,rgba(13,12,15,0) 0%,rgba(13,12,15,.55) 45%,rgba(13,12,15,.92) 78%,#0d0c0f 100%);z-index:7;pointer-events:none}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .cm-how{grid-template-columns:1fr}
  .cm-stage{order:2}
}
@media (max-width:560px){
  .cm-step{padding:18px 20px}.cm-step b{font-size:26px}.cm-step span{font-size:15px}
  .cm-audio{left:52%;padding-right:10px;gap:8px;font-size:10px}.cm-audio .cm-vol{display:none}
  .cm-tag{padding:7px 12px;border-radius:10px}
  .cm-badge{padding:9px 22px}
  .cm-upcard{width:74%;padding:14px}
}
@media (prefers-reduced-motion:reduce){.cm-how *{animation:none!important;transition:none!important}}