/* ============================================================================
   Create Store landing page — MoedaTech
   Ported from the design handoff "Create Store Landing (standalone)".
   Hosted at assets.moedatech.net/createstore.css — see BUILD.md.

   Every colour, size, radius, shadow and timing here is taken from the
   prototype. The prototype set them as inline styles recomputed by React on a
   2200 ms tick; here they are class rules switched by state attributes that
   createstore.js writes onto #cs:

       data-phase  0-3   hero tile micro-demos
       data-tile   0-3   hero tile carousel position (mobile only)
       data-stage  0-6   the self-building store editor
       data-beat   0-9   the "STOP!" customer scene
       data-played 0|1    scene has been scrolled into view
       data-scr    0-2   which phone is in front in the price section
       data-flip   0|1    manual toggle on hero tile 3

   Nothing here styles anything outside #cs.
   ========================================================================== */

#cs {
  /* --- colours ---------------------------------------------------------- */
  --navy: #16283D;
  --navy-deep: #0B1D33;
  --navy-mid: #22384E;

  --green-bg: #06301B;
  --green: #0A3D22;
  --green-mid: #0F5C32;
  --green-bright: #147A44;
  --green-bright2: #1E8A4C;
  --green-tick: #15A34A;
  --green-live: #22C55E;
  --green-text-light: #15803D;

  --orange: #F5761F;
  --orange-hover: #FF8A3A;
  --orange-light: #FFB36B;
  --orange-text: #C2570F;

  --red: #B42318;

  --g-f3f6fa: #F3F6FA;
  --g-f8fafc: #F8FAFC;
  --g-e4eaf1: #E4EAF1;
  --g-e1e9e3: #E1E9E3;
  --g-cfdacf: #CFDACF;
  --g-c3d0de: #C3D0DE;
  --g-8a9bb0: #8A9BB0;
  --g-49607b: #49607B;
  --light-sec: #F3F6F1;
  --body-light: #4E6656;
  --on-dark: #B9D8C4;
  --on-dark-2: #DDF0E3;
  --on-dark-3: #8FB89D;

  --wa-header: #075E54;
  --wa-bg: #EFE7DD;
  --wa-out: #DCF8C6;

  /* --- motion ----------------------------------------------------------- */
  --e-slide: cubic-bezier(.2, .8, .2, 1);
  --e-pop: cubic-bezier(.2, .9, .3, 1.2);

  /* --- derived state (set by the attributes, read all over the file) ----- */
  --shell: 1240px;

  position: relative;
  background: var(--green-bg);
  color: #F2F7F3;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

#cs[dir="rtl"] { font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; }

#cs *, #cs *::before, #cs *::after { box-sizing: border-box; }
#cs img { display: block; }
#cs button { font-family: inherit; }
#cs a { text-decoration: none; }

/* Arrow glyphs mirror in Arabic. */
#cs[dir="rtl"] .cs-arrow { transform: scaleX(-1); }

/* ---------------------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------------------ */
@keyframes cs-floatA { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(-1.5deg); } }
@keyframes cs-floatB { 0%, 100% { transform: translateY(0) rotate(4deg); }    50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes cs-bob    { 0%, 100% { transform: translateY(0); }                 50% { transform: translateY(-5px); } }
@keyframes cs-glow   { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes cs-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cs-blink  { 50% { opacity: 0; } }

/* ---------------------------------------------------------------------------
   1 · Section bar (sticky)
   The prototype had its own full nav with a logo; on the site the page already
   carries the MoedaTech header, so this keeps only the two section links and
   the CTA.
   ------------------------------------------------------------------------ */
.cs-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(6, 48, 27, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cs-bar-in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 16px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.cs-bar-links { display: flex; align-items: center; gap: 22px; font-size: 13.5px; font-weight: 600; }
.cs-bar-links a { color: var(--on-dark); }
.cs-bar-links a:hover { color: #fff; }
.cs-bar-sp { flex: 1; }
.cs-bar-cta {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  transition: background .25s;
}
.cs-bar-cta:hover { background: var(--orange-hover); color: #fff; }

/* ---------------------------------------------------------------------------
   Shared bits
   ------------------------------------------------------------------------ */
.cs-shell { max-width: var(--shell); margin: 0 auto; }

.cs-kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 7px 13px 7px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--on-dark-2);
}
#cs[dir="rtl"] .cs-kicker-pill { padding: 7px 8px 7px 13px; }
.cs-kicker-pill img { height: 18px; width: 27px; object-fit: cover; border-radius: 4px; }

.cs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  padding: 0 24px;
  border-radius: 14px;
  background: var(--orange);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 16px 40px rgba(245, 118, 31, .35);
  transition: background .25s;
}
.cs-cta:hover { background: var(--orange-hover); color: #fff; }

.cs-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: background .25s;
}
.cs-cta-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* the three browser dots */
.cs-dot-r, .cs-dot-y, .cs-dot-g { width: 9px; height: 9px; border-radius: 50%; }
.cs-dot-r { background: #F87171; }
.cs-dot-y { background: #FBBF24; }
.cs-dot-g { background: #34D399; }

.cs-caret {
  width: 2px;
  background: currentColor;
  animation: cs-blink 1s step-end infinite;
  opacity: 0;
}

/* ---------------------------------------------------------------------------
   2 · Hero
   ------------------------------------------------------------------------ */
.cs-hero { position: relative; overflow: hidden; padding: 56px 22px 70px; }
.cs-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(30, 138, 76, .55), transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 90%, rgba(245, 118, 31, .22), transparent 70%);
  animation: cs-glow 7s ease-in-out infinite;
  pointer-events: none;
}
.cs-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cs-ring-1 { inset-inline-end: -6%; top: 6%;  width: 620px; height: 620px; border: 1px solid rgba(255, 255, 255, .08); }
.cs-ring-2 { inset-inline-end: 4%;  top: 16%; width: 400px; height: 400px; border: 1px solid rgba(255, 255, 255, .06); }

.cs-hero-grid {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 48px;
  align-items: center;
}
.cs-hero-copy { animation: cs-rise .7s ease both; }
.cs-hero-copy h1 {
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -1.8px;
  font-weight: 800;
  margin: 22px 0 0;
  max-width: 14ch;
  text-wrap: balance;
}
.cs-hero-ctas { display: flex; align-items: center; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

/* --- the floating desktop mock ---------------------------------------- */
.cs-hero-stage {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-mock {
  position: relative;
  width: min(100%, 560px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .12);
  overflow: hidden;
  animation: cs-floatA 7s ease-in-out infinite;
  color: var(--navy);
}
.cs-browser {
  height: 30px;
  background: var(--g-f3f6fa);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-bottom: 1px solid var(--g-e4eaf1);
}
.cs-url {
  flex: 1;
  margin-inline-start: 10px;
  background: #fff;
  border: 1px solid var(--g-e4eaf1);
  border-radius: 6px;
  height: 18px;
  font-size: 10px;
  color: var(--g-49607b);
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-weight: 600;
  gap: 5px;
}
.cs-store-hdr {
  background: linear-gradient(120deg, var(--green), var(--green-bright));
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-store-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  border: 2px solid var(--orange);
  flex: none;
}
.cs-store-logo img { width: 100%; height: 100%; object-fit: cover; }
.cs-store-name {
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}
.cs-store-hdr > span { min-width: 0; }
.cs-store-tag { display: block; font-size: 10.5px; color: var(--on-dark); margin-top: 2px; }
.cs-req-chip {
  background: var(--orange);
  color: #fff;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  flex: none;
}
.cs-banner { position: relative; height: 110px; overflow: hidden; }
.cs-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-banner-scrim { position: absolute; inset: 0; background: linear-gradient(95deg, rgba(6, 30, 18, .9), rgba(6, 30, 18, .2) 75%); }
#cs[dir="rtl"] .cs-banner-scrim { background: linear-gradient(265deg, rgba(6, 30, 18, .9), rgba(6, 30, 18, .2) 75%); }
.cs-banner-txt { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: #fff; }
.cs-banner-kick { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: var(--orange-light); }
.cs-banner-title { font-size: 15px; font-weight: 800; margin-top: 3px; max-width: 22ch; line-height: 1.2; }

.cs-mock-cards { padding: 10px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cs-mc { border: 1px solid var(--g-e4eaf1); border-radius: 9px; overflow: hidden; }
.cs-mc-img { position: relative; aspect-ratio: 4 / 3; background: #E9EFF6 center / cover; }
.cs-mc-price {
  position: absolute;
  bottom: 4px;
  inset-inline-end: 4px;
  background: rgba(6, 30, 18, .85);
  color: #fff;
  font-size: 7.5px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
}
.cs-mc-name {
  padding: 5px 7px 7px;
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- the overlapping phone ------------------------------------------- */
.cs-hero-phone {
  position: absolute;
  inset-inline-end: -6px;
  bottom: -22px;
  width: 168px;
  aspect-ratio: 9 / 19;
  border-radius: 26px;
  background: var(--navy-deep);
  padding: 8px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .14);
  animation: cs-floatB 6s ease-in-out infinite;
  color: var(--navy);
}
.cs-phone-screen { width: 100%; height: 100%; border-radius: 20px; background: #fff; overflow: hidden; position: relative; }
.cs-notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: var(--navy-deep);
  z-index: 6;
}
.cs-hero-phone .cs-store-hdr { padding: 22px 10px 10px; gap: 7px; }
.cs-hero-phone .cs-store-logo { width: 26px; height: 26px; }
.cs-hero-phone .cs-store-name { font-size: 9px; line-height: 1.2; }
.cs-hero-phone-banner { width: 100%; height: 72px; object-fit: cover; }
.cs-hero-phone-cards { padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cs-hero-phone-cards .cs-mc-name { font-size: 6.5px; padding: 4px 5px 5px; }
.cs-hero-phone-cards .cs-mc { border-radius: 7px; }
.cs-phone-cta {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  background: var(--orange);
  color: #fff;
  text-align: center;
  font-size: 8px;
  font-weight: 800;
  padding: 7px;
  border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   2b · The four feature tiles with live micro-demos
   ------------------------------------------------------------------------ */
.cs-tiles-vp { position: relative; max-width: var(--shell); margin: 44px auto 0; overflow: visible; }
.cs-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
  transition: transform .7s var(--e-slide);
}
.cs-tile {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 18px;
  padding: 16px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
  transition: transform .35s, box-shadow .35s;
}
.cs-tile:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0, 0, 0, .36); }
.cs-tile-sp { flex: 1; }
.cs-tile-t {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.25;
  margin-top: 12px;
  color: var(--navy);
}

/* tile 1 — the URL types itself, then "Live" pops in */
.cs-t1-bar {
  background: var(--g-f3f6fa);
  border: 1px solid var(--g-e4eaf1);
  border-radius: 10px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--g-49607b);
  overflow: hidden;
}
.cs-t1-url {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  transition: max-width 1.6s steps(26);
}
.cs-t1-caret { height: 13px; width: 1.5px; background: var(--navy); opacity: 0; }
.cs-t1-sp { flex: 1; }
.cs-t1-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green-text-light);
  font-size: 10.5px;
  font-weight: 800;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .4s cubic-bezier(.2, .9, .3, 1.3), transform .4s cubic-bezier(.2, .9, .3, 1.3);
}
.cs-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-live); }

#cs[data-phase="1"] .cs-t1-url,
#cs[data-phase="2"] .cs-t1-url,
#cs[data-phase="3"] .cs-t1-url { max-width: 100%; }
#cs[data-phase="1"] .cs-t1-caret { opacity: 1; animation: cs-blink 1s step-end infinite; }
#cs[data-phase="2"] .cs-t1-live,
#cs[data-phase="3"] .cs-t1-live { opacity: 1; transform: scale(1); }

/* tile 2 — inventory rows slide into the store column */
.cs-t2 { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 6px; align-items: center; }
.cs-t2-col { display: flex; flex-direction: column; gap: 4px; }
.cs-t2-h { font-size: 9px; font-weight: 800; letter-spacing: .8px; margin-bottom: 2px; }
.cs-t2-h.inv { color: var(--g-8a9bb0); }
.cs-t2-h.sto { color: var(--green-mid); }
.cs-t2-row {
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 5px;
}
.cs-t2-row.inv { border: 1px dashed #CBD6E2; background: var(--g-f8fafc); opacity: 1; transition: opacity .4s; }
.cs-t2-row.sto {
  border: 1px solid #CFE3D5;
  background: #fff;
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .4s, transform .5s var(--e-slide);
}
#cs[dir="rtl"] .cs-t2-row.sto { transform: translateX(14px); }
.cs-t2-thumb { width: 14px; height: 12px; border-radius: 3px; background: #E9EFF6 center / cover; flex: none; }
.cs-t2-name { font-size: 8.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-t2-row.inv .cs-t2-name { color: var(--g-8a9bb0); }
.cs-t2-price { margin-inline-start: auto; font-size: 8px; font-weight: 800; color: var(--green-mid); white-space: nowrap; flex: none; }

#cs[data-phase="2"] .cs-t2-row.inv,
#cs[data-phase="3"] .cs-t2-row.inv { opacity: .35; }
#cs[data-phase="2"] .cs-t2-row.sto,
#cs[data-phase="3"] .cs-t2-row.sto { opacity: 1; transform: translateX(0); }

/* tile 3 — EN/ع toggle flips a mini store header */
.cs-t3 { display: flex; flex-direction: row; align-items: center; gap: 10px; }
.cs-t3-sw {
  position: relative;
  width: 74px;
  height: 30px;
  border-radius: 999px;
  background: var(--navy);
  cursor: pointer;
  flex: none;
  border: 0;
  padding: 0;
}
.cs-t3-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--orange);
  transition: left .45s var(--e-slide);
}
.cs-t3-labels {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
}
.cs-t3-labels span { transition: opacity .3s; }
.cs-t3-en { opacity: 1; }
.cs-t3-ar { opacity: .5; }
.cs-t3-hdr {
  flex: 1;
  min-width: 0;
  background: linear-gradient(120deg, var(--green), var(--green-bright));
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
.cs-t3-logo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  border: 1.5px solid var(--orange);
  flex: none;
}
.cs-t3-logo img { width: 100%; height: 100%; object-fit: cover; }
.cs-t3-name {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-t3-cta { background: var(--orange); color: #fff; font-size: 9px; font-weight: 800; padding: 4px 8px; border-radius: 6px; flex: none; }
/* the two language versions of the header text live in the DOM together */
.cs-t3-name .ar, .cs-t3-cta .ar { display: none; }

#cs.cs-t3-flipped .cs-t3-knob { left: 47px; }
#cs.cs-t3-flipped .cs-t3-en { opacity: .5; }
#cs.cs-t3-flipped .cs-t3-ar { opacity: 1; }
#cs.cs-t3-flipped .cs-t3-hdr { direction: rtl; }
#cs.cs-t3-flipped .cs-t3-name .en, #cs.cs-t3-flipped .cs-t3-cta .en { display: none; }
#cs.cs-t3-flipped .cs-t3-name .ar, #cs.cs-t3-flipped .cs-t3-cta .ar { display: inline; }

/* tile 4 — incoming message, then the green reply */
.cs-t4 { position: relative; height: 62px; }
.cs-t4-in, .cs-t4-out { position: absolute; font-size: 10px; padding: 7px 9px; }
.cs-t4-in {
  inset-inline-start: 0;
  top: 0;
  max-width: 62%;
  background: var(--g-f3f6fa);
  border: 1px solid var(--g-e4eaf1);
  border-radius: 10px 10px 10px 3px;
  font-weight: 700;
  color: var(--navy);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s, transform .45s;
}
.cs-t4-out {
  inset-inline-end: 0;
  bottom: 0;
  background: var(--green-mid);
  color: #fff;
  border-radius: 10px 10px 3px 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px) scale(.8);
  transition: opacity .45s .15s, transform .45s .15s var(--e-pop);
}
#cs[data-phase="1"] .cs-t4-in,
#cs[data-phase="2"] .cs-t4-in,
#cs[data-phase="3"] .cs-t4-in { opacity: 1; transform: translateY(0); }
#cs[data-phase="2"] .cs-t4-out,
#cs[data-phase="3"] .cs-t4-out { opacity: 1; transform: translateY(0) scale(1); }

/* ---------------------------------------------------------------------------
   3 · "STOP!" — the customer scene
   10 beats x 2200 ms. data-beat is only written once data-played="1", which
   createstore.js sets when the stage top passes 45% of the viewport.
   ------------------------------------------------------------------------ */
.cs-stop { background: var(--light-sec); color: var(--navy); padding: 90px 22px; }
.cs-stop-hd { max-width: var(--shell); margin: 0 auto; display: flex; justify-content: center; text-align: center; }
.cs-stop-word {
  font-size: clamp(64px, 11vw, 132px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -4px;
  color: var(--navy);
}
#cs[dir="rtl"] .cs-stop-word { letter-spacing: normal; }
.cs-stop-hd h2 {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -.8px;
  font-weight: 800;
  margin: 14px 0 0;
  color: var(--navy);
}
.cs-stop-hd p { font-size: 15px; color: var(--body-light); font-weight: 600; margin: 6px 0 0; }

.cs-scene {
  position: relative;
  margin-top: 40px;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* --- the desktop store behind the phone (fades in from beat 5) --------- */
.cs-scene-desk {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 760px);
  border-radius: 16px 16px 0 0;
  background: #fff;
  box-shadow: 0 30px 70px rgba(6, 48, 27, .18), 0 0 0 1px var(--g-e1e9e3);
  overflow: hidden;
  opacity: 0;
  transition: opacity .6s;
}
#cs[data-beat="5"] .cs-scene-desk,
#cs[data-beat="6"] .cs-scene-desk,
#cs[data-beat="7"] .cs-scene-desk,
#cs[data-beat="8"] .cs-scene-desk,
#cs[data-beat="9"] .cs-scene-desk { opacity: 1; }

.cs-scene-desk .cs-browser { height: 26px; }
.cs-scene-desk .cs-dot-r, .cs-scene-desk .cs-dot-y, .cs-scene-desk .cs-dot-g { width: 8px; height: 8px; }
.cs-scene-desk .cs-url { height: 15px; font-size: 9px; margin-inline-start: 8px; padding: 0 7px; }
.cs-desk-path::after { content: ""; }
#cs[data-beat="6"] .cs-desk-path::after { content: "/lokotrack-lt106"; }
#cs[data-beat="7"] .cs-desk-path::after,
#cs[data-beat="8"] .cs-desk-path::after,
#cs[data-beat="9"] .cs-desk-path::after { content: "/request"; }

.cs-desk-body { position: relative; height: 300px; }
.cs-desk-pane { position: absolute; inset: 0; opacity: 0; transition: opacity .5s; }
#cs[data-beat="5"] .cs-desk-0 { opacity: 1; }
#cs[data-beat="6"] .cs-desk-1 { opacity: 1; }
#cs[data-beat="7"] .cs-desk-2,
#cs[data-beat="8"] .cs-desk-2,
#cs[data-beat="9"] .cs-desk-2 { opacity: 1; }

.cs-desk-0 .cs-store-hdr { padding: 12px 14px; gap: 9px; }
.cs-desk-0 .cs-store-logo { width: 30px; height: 30px; }
.cs-desk-0 .cs-store-name { font-size: 11px; }
.cs-desk-0 .cs-req-chip { font-size: 9px; padding: 5px 9px; }
.cs-desk-grid { padding: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cs-desk-grid > div { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: #E9EFF6 center / cover; }

.cs-desk-1 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; padding: 12px; }
.cs-desk-1-img { border-radius: 10px; overflow: hidden; position: relative; }
.cs-desk-1-img img { width: 100%; height: 100%; object-fit: cover; }
.cs-desk-1-price {
  position: absolute;
  bottom: 8px;
  inset-inline-end: 8px;
  background: rgba(6, 30, 18, .85);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 5px;
}
.cs-desk-1-col { display: flex; flex-direction: column; gap: 5px; color: var(--navy); }
.cs-desk-1-name { font-size: 12px; font-weight: 800; }
.cs-desk-1-lbl { font-size: 8.5px; font-weight: 800; color: var(--g-49607b); letter-spacing: .6px; margin-top: 4px; }
.cs-desk-doc {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--g-f8fafc);
  border: 1px solid var(--g-e4eaf1);
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 8.5px;
  font-weight: 700;
}
.cs-desk-doc b { margin-inline-start: auto; color: var(--orange-text); font-size: 7.5px; font-weight: 800; }

.cs-desk-2 { display: grid; place-items: center; color: var(--navy); }
.cs-desk-2 .ok {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #EAF6EF;
  display: inline-grid;
  place-items: center;
}
.cs-desk-2 .lbl { font-size: 13px; font-weight: 800; margin-top: 8px; }

/* --- the mode pill ----------------------------------------------------- */
.cs-mode {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
  transition: background .5s;
}
.cs-mode img { height: 14px; width: auto; display: none; }
/* The skin normalises images with a selector that beats `.cs-mode img`,
   which put the logo back next to the red "Today". An ID takes it back;
   the green-half rules below are (1,2,1) and still win over this. */
#cs .cs-mode img { display: none; }
.cs-mode .new { display: none; }
#cs[data-beat="3"] .cs-mode, #cs[data-beat="4"] .cs-mode, #cs[data-beat="5"] .cs-mode,
#cs[data-beat="6"] .cs-mode, #cs[data-beat="7"] .cs-mode, #cs[data-beat="8"] .cs-mode,
#cs[data-beat="9"] .cs-mode { background: var(--green-mid); }
#cs[data-beat="3"] .cs-mode img, #cs[data-beat="4"] .cs-mode img, #cs[data-beat="5"] .cs-mode img,
#cs[data-beat="6"] .cs-mode img, #cs[data-beat="7"] .cs-mode img, #cs[data-beat="8"] .cs-mode img,
#cs[data-beat="9"] .cs-mode img { display: block; }
#cs[data-beat="3"] .cs-mode .new, #cs[data-beat="4"] .cs-mode .new, #cs[data-beat="5"] .cs-mode .new,
#cs[data-beat="6"] .cs-mode .new, #cs[data-beat="7"] .cs-mode .new, #cs[data-beat="8"] .cs-mode .new,
#cs[data-beat="9"] .cs-mode .new { display: inline; }
#cs[data-beat="3"] .cs-mode .old, #cs[data-beat="4"] .cs-mode .old, #cs[data-beat="5"] .cs-mode .old,
#cs[data-beat="6"] .cs-mode .old, #cs[data-beat="7"] .cs-mode .old, #cs[data-beat="8"] .cs-mode .old,
#cs[data-beat="9"] .cs-mode .old { display: none; }

/* --- the phone, which flips 180deg on beat 3 -------------------------- */
.cs-scene-phone {
  position: relative;
  width: 210px;
  aspect-ratio: 9 / 18.5;
  border-radius: 32px;
  background: var(--navy-deep);
  padding: 8px;
  box-shadow: 0 40px 80px rgba(6, 48, 27, .35), 0 0 0 1px rgba(255, 255, 255, .14);
  color: var(--navy);
  transform: rotateY(0deg);
  transition: transform .8s cubic-bezier(.4, 0, .2, 1), background .4s;
  transform-style: preserve-3d;
  perspective: 900px;
}
.cs-scene-phone > .cs-phone-screen {
  border-radius: 25px;
  transform: rotateY(0deg);
  transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}
#cs[data-beat="3"] .cs-scene-phone, #cs[data-beat="4"] .cs-scene-phone, #cs[data-beat="5"] .cs-scene-phone,
#cs[data-beat="6"] .cs-scene-phone, #cs[data-beat="7"] .cs-scene-phone, #cs[data-beat="8"] .cs-scene-phone,
#cs[data-beat="9"] .cs-scene-phone { transform: rotateY(180deg); background: var(--green-mid); }
#cs[data-beat="3"] .cs-scene-phone > .cs-phone-screen, #cs[data-beat="4"] .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="5"] .cs-scene-phone > .cs-phone-screen, #cs[data-beat="6"] .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="7"] .cs-scene-phone > .cs-phone-screen, #cs[data-beat="8"] .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="9"] .cs-scene-phone > .cs-phone-screen { transform: rotateY(180deg); }

/* WhatsApp chat layer — visible on beats 0,1,2 and 4 */
.cs-chat {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s;
  background: var(--wa-bg);
  display: flex;
  flex-direction: column;
}
#cs[data-beat="0"] .cs-chat, #cs[data-beat="1"] .cs-chat,
#cs[data-beat="2"] .cs-chat, #cs[data-beat="4"] .cs-chat { opacity: 1; }
.cs-chat-hdr {
  background: var(--wa-header);
  color: #fff;
  padding: 18px 10px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
}
.cs-chat-av { width: 22px; height: 22px; border-radius: 50%; background: #CBD5E1; flex: none; }
.cs-chat-hdr > span:last-child { display: block; min-width: 0; }
.cs-chat-who { display: block; font-size: 9px; font-weight: 800; line-height: 1.15; }
.cs-chat-on { display: block; font-size: 7px; opacity: .8; }
.cs-chat-body {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  justify-content: flex-end;
}
.cs-bub {
  max-width: 84%;
  border-radius: 9px;
  font-size: 8px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
  opacity: 1;
  transform: translateY(0);
  transition: opacity .35s, transform .4s var(--e-slide);
  overflow: hidden;
}
.cs-bub-in  { align-self: flex-end;   background: #fff; padding: 6px 8px; }
.cs-bub-out { align-self: flex-start; background: var(--wa-out); padding: 4px; }
#cs[dir="rtl"] .cs-bub-in  { align-self: flex-start; }
#cs[dir="rtl"] .cs-bub-out { align-self: flex-end; }
.cs-bub-txt { padding: 6px 8px; }

/* bubbles 3-5 arrive on later beats */
.cs-bub[data-at="1"], .cs-bub[data-at="2"] { opacity: 0; transform: translateY(8px); }
#cs[data-beat="1"] .cs-bub[data-at="1"], #cs[data-beat="2"] .cs-bub[data-at="1"] { opacity: 1; transform: translateY(0); }
#cs[data-beat="2"] .cs-bub[data-at="2"] { opacity: 1; transform: translateY(0); }
/* on beat 4 the thread is replaced by the single link card */
.cs-chat-thread { display: contents; }
.cs-bub-link { display: none; }
#cs[data-beat="4"] .cs-chat-thread { display: none; }
#cs[data-beat="4"] .cs-bub-link { display: block; }

.cs-imgs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; width: 128px; }
.cs-imgs > span { aspect-ratio: 1; border-radius: 4px; background: #E9EFF6 center / cover; }
.cs-docs { display: flex; flex-direction: column; gap: 4px; width: 128px; }
.cs-doc { display: flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .05); border-radius: 6px; padding: 5px 6px; }
.cs-doc-ic {
  width: 18px;
  height: 22px;
  border-radius: 3px;
  background: #E11D48;
  color: #fff;
  font-size: 5.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex: none;
}
.cs-doc > span:last-child { display: block; min-width: 0; }
.cs-doc-n { display: block; font-size: 7.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-doc-s { display: block; font-size: 6px; opacity: .6; }
.cs-link-card { width: 132px; }
.cs-link-top {
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(120deg, var(--green), var(--green-bright));
  padding: 7px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cs-link-top span.l { width: 18px; height: 18px; border-radius: 50%; background: #fff; overflow: hidden; border: 1.5px solid var(--orange); flex: none; }
.cs-link-top span.l img { width: 100%; height: 100%; object-fit: cover; }
.cs-link-top span.n { color: #fff; font-size: 7.5px; font-weight: 800; line-height: 1.2; }
.cs-link-url {
  color: #1D4ED8;
  font-size: 7.5px;
  font-weight: 700;
  margin-top: 4px;
  text-decoration: underline;
  direction: ltr;
  text-align: start;
}

/* the later phone layers */
.cs-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.cs-layer img { width: 100%; height: 100%; object-fit: cover; }
.cs-l-splash {
  background: linear-gradient(160deg, var(--green), var(--green-bright));
  display: grid;
  place-items: center;
  transition: opacity .4s;
}
.cs-l-splash img { width: 60%; height: auto; object-fit: contain; }
.cs-l-home { transform: translateX(30px); transition: opacity .45s, transform .55s var(--e-slide); }
#cs[dir="rtl"] .cs-l-home { transform: translateX(-30px); }
.cs-l-home img { object-position: top; }
.cs-l-machine img { object-position: center 40%; }
.cs-l-req { transform: scale(.94); transition: opacity .45s, transform .5s var(--e-slide); }
.cs-l-req img { object-position: top; }

#cs[data-beat="3"] .cs-l-splash { opacity: 1; }
#cs[data-beat="5"] .cs-l-home { opacity: 1; transform: translateX(0); }
#cs[data-beat="6"] .cs-l-machine { opacity: 1; }
#cs[data-beat="7"] .cs-l-lock { opacity: 1; }
#cs[data-beat="8"] .cs-l-req { opacity: 1; transform: scale(1); }
#cs[data-beat="9"] .cs-l-end { opacity: 1; }

/* the supplier lock screen */
.cs-l-lock {
  background: linear-gradient(160deg, var(--navy-deep), var(--navy));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 34px;
  color: #fff;
}
.cs-lock-time { font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.cs-lock-date { font-size: 8px; opacity: .7; margin-top: 4px; }
.cs-notif {
  margin: 26px 8px 0;
  width: calc(100% - 16px);
  background: rgba(255, 255, 255, .96);
  color: var(--navy);
  border-radius: 12px;
  padding: 9px 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  transform: translateY(-30px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.1) .2s, opacity .4s .2s;
}
#cs[data-beat="7"] .cs-notif { transform: translateY(0); opacity: 1; }
.cs-notif img { width: 26px; height: 26px; border-radius: 7px; object-fit: cover; flex: none; }
.cs-notif-meta { display: flex; justify-content: space-between; gap: 6px; font-size: 7px; color: var(--g-8a9bb0); font-weight: 700; }
.cs-notif-t { font-size: 8.5px; font-weight: 800; margin-top: 2px; }
.cs-notif-b { font-size: 7.5px; color: var(--g-49607b); font-weight: 600; margin-top: 1px; line-height: 1.35; }

/* the green end card */
.cs-l-end {
  background: linear-gradient(160deg, var(--green), var(--green-bright));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  transition: opacity .5s;
}
.cs-end-t { font-size: 13px; font-weight: 800; line-height: 1.3; }
.cs-end-s { font-size: 9px; color: var(--on-dark-2); font-weight: 600; margin-top: 8px; line-height: 1.45; }
.cs-end-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--orange);
  display: grid;
  place-items: center;
  margin-top: 14px;
  animation: cs-bob 1.6s ease-in-out infinite;
}

/* the tap dot */
.cs-tap {
  position: absolute;
  inset-inline-start: 50%;
  top: 30%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(245, 118, 31, .55);
  border: 2px solid #fff;
  box-shadow: 0 0 0 6px rgba(245, 118, 31, .22);
  z-index: 7;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
  transition: inset-inline-start .6s var(--e-slide), top .6s var(--e-slide), opacity .3s;
  pointer-events: none;
}
#cs[data-beat="4"] .cs-tap { opacity: 1; inset-inline-start: 30%; top: 88%; }
#cs[data-beat="6"] .cs-tap { opacity: 1; inset-inline-start: 62%; top: 90%; }
#cs[data-beat="7"] .cs-tap { opacity: 1; inset-inline-start: 50%; top: 30%; }
#cs[dir="rtl"][data-beat="4"] .cs-tap { inset-inline-start: 70%; }
#cs[dir="rtl"][data-beat="6"] .cs-tap { inset-inline-start: 38%; }

/* --- caption row under the stage -------------------------------------- */
.cs-cap {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: 26px auto 0;
  padding: 0 4px;
}
.cs-cap-num { display: flex; align-items: baseline; gap: 5px; }
.cs-count {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -2.5px;
  line-height: 1;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  transition: color .4s;
}
.cs-count-l { font-size: 11px; font-weight: 800; color: var(--g-8a9bb0); letter-spacing: 1px; }
.cs-cap-txt { border-inline-start: 3px solid var(--red); padding-inline-start: 14px; transition: border-color .4s; }
.cs-cap-t { font-size: 17px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; color: var(--navy); min-height: 1.25em; }
.cs-cap-bar { margin-top: 8px; height: 3px; background: var(--g-e1e9e3); border-radius: 2px; overflow: hidden; }
.cs-cap-fill {
  height: 100%;
  width: 10%;
  background: var(--red);
  transition: width .6s var(--e-slide), background .4s;
}
#cs[data-beat="3"] .cs-count, #cs[data-beat="4"] .cs-count, #cs[data-beat="5"] .cs-count,
#cs[data-beat="6"] .cs-count, #cs[data-beat="7"] .cs-count, #cs[data-beat="8"] .cs-count,
#cs[data-beat="9"] .cs-count { color: var(--green-mid); }
#cs[data-beat="3"] .cs-cap-txt, #cs[data-beat="4"] .cs-cap-txt, #cs[data-beat="5"] .cs-cap-txt,
#cs[data-beat="6"] .cs-cap-txt, #cs[data-beat="7"] .cs-cap-txt, #cs[data-beat="8"] .cs-cap-txt,
#cs[data-beat="9"] .cs-cap-txt { border-color: var(--green-mid); }
#cs[data-beat="3"] .cs-cap-fill, #cs[data-beat="4"] .cs-cap-fill, #cs[data-beat="5"] .cs-cap-fill,
#cs[data-beat="6"] .cs-cap-fill, #cs[data-beat="7"] .cs-cap-fill, #cs[data-beat="8"] .cs-cap-fill,
#cs[data-beat="9"] .cs-cap-fill { background: var(--green-mid); }

/* --- the scroll cue, which only appears on the last beat --------------- */
.cs-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  color: var(--navy);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s, transform .5s;
  pointer-events: none;
}
#cs[data-beat="9"] .cs-cue { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cs-cue:hover { color: var(--green-mid); }
.cs-cue-t { font-size: 15px; font-weight: 800; }
.cs-cue-a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--navy);
  display: grid;
  place-items: center;
  animation: cs-bob 1.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------------------
   4 · #cs-build — "Watch your store build itself"
   data-stage 0-6. Stage n means step n is the active card; the preview shows
   everything up to and including n.
   ------------------------------------------------------------------------ */
.cs-build { background: var(--light-sec); color: var(--navy); padding: 90px 22px 40px; }
.cs-build-hd { max-width: 820px; margin: 0 auto; text-align: center; }
.cs-build-k { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--green-mid); }
.cs-build-hd h2 {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -1.2px;
  font-weight: 800;
  margin: 12px 0 0;
  text-wrap: balance;
}
.cs-build-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 48px;
  margin-top: 44px;
  align-items: start;
}

/* --- left: the sticky storefront preview ------------------------------ */
.cs-prev-wrap {
  position: sticky;
  top: 84px;
  z-index: 5;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cs-prev-zoom { width: 600px; max-width: 100%; }
.cs-prev { position: relative; }
.cs-prev-card {
  position: relative;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(6, 48, 27, .18), 0 0 0 1px var(--g-e1e9e3);
  overflow: hidden;
}
.cs-prev-card .cs-browser { height: 32px; }
.cs-prev-card .cs-url { height: 19px; font-size: 10.5px; }
.cs-prev-slug { color: var(--orange-text); font-weight: 800; }
.cs-prev-slug .set { display: none; }
#cs[data-stage="1"] .cs-prev-slug .set, #cs[data-stage="2"] .cs-prev-slug .set,
#cs[data-stage="3"] .cs-prev-slug .set, #cs[data-stage="4"] .cs-prev-slug .set,
#cs[data-stage="5"] .cs-prev-slug .set, #cs[data-stage="6"] .cs-prev-slug .set { display: inline; }
#cs[data-stage="1"] .cs-prev-slug .unset, #cs[data-stage="2"] .cs-prev-slug .unset,
#cs[data-stage="3"] .cs-prev-slug .unset, #cs[data-stage="4"] .cs-prev-slug .unset,
#cs[data-stage="5"] .cs-prev-slug .unset, #cs[data-stage="6"] .cs-prev-slug .unset { display: none; }

.cs-prev-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  color: var(--green-text-light);
  opacity: 0;
  transition: opacity .5s;
}
.cs-prev-live span.d { width: 7px; height: 7px; border-radius: 50%; background: var(--green-live); }
#cs[data-stage="5"] .cs-prev-live, #cs[data-stage="6"] .cs-prev-live { opacity: 1; }

/* header: navy until step 4 turns on the National Day gradient */
.cs-prev-hdr {
  background: var(--navy);
  transition: background .8s ease;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 13px;
}
#cs[data-stage="4"] .cs-prev-hdr, #cs[data-stage="5"] .cs-prev-hdr, #cs[data-stage="6"] .cs-prev-hdr,
#cs[data-stage="4"] .cs-prev-phone-hdr, #cs[data-stage="5"] .cs-prev-phone-hdr, #cs[data-stage="6"] .cs-prev-phone-hdr {
  background: linear-gradient(120deg, var(--green), var(--green-bright));
}
.cs-prev-ring {
  position: relative;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  transition: border-color .5s;
}
.cs-prev-ring svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  transition: opacity .4s;
}
.cs-prev-ring img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(.4);
  transition: opacity .5s, transform .6s cubic-bezier(.2, .9, .3, 1.3);
}
.cs-prev-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.3px;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 22px;
  color: #fff;
}
.cs-prev-ghost { opacity: 1; transition: opacity .3s; font-weight: 600; color: rgba(255, 255, 255, .55); position: static; }
.cs-typed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  transition: max-width 1.1s steps(18);
  vertical-align: bottom;
}
.cs-prev-name .cs-caret { height: 16px; }
.cs-prev-tag { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .72); margin-top: 3px; opacity: 0; transition: opacity .5s .6s; }
.cs-prev-req {
  background: var(--orange);
  transition: background .8s;
  color: #fff;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 11.5px;
  font-weight: 800;
  flex: none;
}

/* everything that switches on at stage >= 1 */
#cs[data-stage="1"] .cs-prev-ring svg, #cs[data-stage="2"] .cs-prev-ring svg, #cs[data-stage="3"] .cs-prev-ring svg,
#cs[data-stage="4"] .cs-prev-ring svg, #cs[data-stage="5"] .cs-prev-ring svg, #cs[data-stage="6"] .cs-prev-ring svg,
#cs[data-stage="1"] .cs-prev-ghost, #cs[data-stage="2"] .cs-prev-ghost, #cs[data-stage="3"] .cs-prev-ghost,
#cs[data-stage="4"] .cs-prev-ghost, #cs[data-stage="5"] .cs-prev-ghost, #cs[data-stage="6"] .cs-prev-ghost { opacity: 0; }
#cs[data-stage="1"] .cs-prev-ghost, #cs[data-stage="2"] .cs-prev-ghost, #cs[data-stage="3"] .cs-prev-ghost,
#cs[data-stage="4"] .cs-prev-ghost, #cs[data-stage="5"] .cs-prev-ghost, #cs[data-stage="6"] .cs-prev-ghost { position: absolute; }
#cs[data-stage="1"] .cs-prev-ring img, #cs[data-stage="2"] .cs-prev-ring img, #cs[data-stage="3"] .cs-prev-ring img,
#cs[data-stage="4"] .cs-prev-ring img, #cs[data-stage="5"] .cs-prev-ring img, #cs[data-stage="6"] .cs-prev-ring img,
#cs[data-stage="1"] .cs-ed-logo img, #cs[data-stage="2"] .cs-ed-logo img, #cs[data-stage="3"] .cs-ed-logo img,
#cs[data-stage="4"] .cs-ed-logo img, #cs[data-stage="5"] .cs-ed-logo img, #cs[data-stage="6"] .cs-ed-logo img,
#cs[data-stage="1"] .cs-prev-tag, #cs[data-stage="2"] .cs-prev-tag, #cs[data-stage="3"] .cs-prev-tag,
#cs[data-stage="4"] .cs-prev-tag, #cs[data-stage="5"] .cs-prev-tag, #cs[data-stage="6"] .cs-prev-tag,
#cs[data-stage="1"] .cs-ed-tagline, #cs[data-stage="2"] .cs-ed-tagline, #cs[data-stage="3"] .cs-ed-tagline,
#cs[data-stage="4"] .cs-ed-tagline, #cs[data-stage="5"] .cs-ed-tagline, #cs[data-stage="6"] .cs-ed-tagline { opacity: 1; transform: scale(1); }
#cs[data-stage="1"] .cs-typed, #cs[data-stage="2"] .cs-typed, #cs[data-stage="3"] .cs-typed,
#cs[data-stage="4"] .cs-typed, #cs[data-stage="5"] .cs-typed, #cs[data-stage="6"] .cs-typed { max-width: 100%; }
#cs[data-stage="1"] .cs-caret { opacity: 1; }

/* banner slot */
.cs-prev-banner {
  position: relative;
  height: 122px;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--g-f3f6fa) 0 10px, #EAEFF6 10px 20px);
}
.cs-prev-banner-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--g-8a9bb0);
  font-size: 11.5px;
  font-weight: 700;
  gap: 6px;
  opacity: 1;
  transition: opacity .3s;
}
.cs-prev-banner-ph > div { display: flex; align-items: center; gap: 7px; }
.cs-prev-banner-img {
  position: absolute;
  inset: 0;
  transform: translateX(40px);
  opacity: 0;
  transition: transform .8s var(--e-slide), opacity .6s;
}
#cs[dir="rtl"] .cs-prev-banner-img { transform: translateX(-40px); }
.cs-prev-banner-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-prev-banner-img .cs-banner-txt { inset-inline-start: 18px; }
.cs-prev-banner-img .cs-banner-kick { font-size: 9.5px; }
.cs-prev-banner-img .cs-banner-title { font-size: 17px; margin-top: 4px; }
#cs[data-stage="2"] .cs-prev-banner-ph, #cs[data-stage="3"] .cs-prev-banner-ph, #cs[data-stage="4"] .cs-prev-banner-ph,
#cs[data-stage="5"] .cs-prev-banner-ph, #cs[data-stage="6"] .cs-prev-banner-ph { opacity: 0; }
#cs[data-stage="2"] .cs-prev-banner-img, #cs[data-stage="3"] .cs-prev-banner-img, #cs[data-stage="4"] .cs-prev-banner-img,
#cs[data-stage="5"] .cs-prev-banner-img, #cs[data-stage="6"] .cs-prev-banner-img,
#cs[data-stage="2"] .cs-ed-banner-img, #cs[data-stage="3"] .cs-ed-banner-img, #cs[data-stage="4"] .cs-ed-banner-img,
#cs[data-stage="5"] .cs-ed-banner-img, #cs[data-stage="6"] .cs-ed-banner-img,
#cs[data-stage="2"] .cs-ed-replace, #cs[data-stage="3"] .cs-ed-replace, #cs[data-stage="4"] .cs-ed-replace,
#cs[data-stage="5"] .cs-ed-replace, #cs[data-stage="6"] .cs-ed-replace { opacity: 1; transform: translateX(0); }

/* machine grid */
.cs-prev-body { padding: 12px 16px 16px; }
.cs-prev-mh { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cs-prev-mh-t { font-size: 12.5px; font-weight: 800; }
.cs-prev-count {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--orange);
  transition: background .8s;
  padding: 2px 8px;
  border-radius: 999px;
  opacity: 0;
}
.cs-prev-mh-sp { flex: 1; }
.cs-prev-mh-ph { font-size: 10.5px; color: var(--g-8a9bb0); font-weight: 600; opacity: 1; transition: opacity .3s; }
.cs-prev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.cs-pc { position: relative; border-radius: 10px; overflow: hidden; }
.cs-pc-ph {
  position: absolute;
  inset: 0;
  border: 1px dashed #CBD6E2;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg, #F7F9FC 0 10px, #EEF2F7 10px 20px);
  display: grid;
  place-items: center;
  opacity: 1;
  transition: opacity .35s;
}
.cs-pc-real {
  border: 1px solid var(--g-e4eaf1);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .45s, transform .55s var(--e-slide);
}
.cs-pc-img { position: relative; aspect-ratio: 4 / 3; background: #E9EFF6 center / cover; }
.cs-pc-price {
  position: absolute;
  bottom: 5px;
  inset-inline-end: 5px;
  background: rgba(6, 30, 18, .85);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 5px;
}
.cs-pc-meta { padding: 6px 8px 8px; }
.cs-pc-n { font-size: 9.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-pc-y { font-size: 8.5px; color: var(--g-8a9bb0); margin-top: 2px; }

#cs[data-stage="3"] .cs-pc-ph, #cs[data-stage="4"] .cs-pc-ph, #cs[data-stage="5"] .cs-pc-ph, #cs[data-stage="6"] .cs-pc-ph,
#cs[data-stage="3"] .cs-prev-mh-ph, #cs[data-stage="4"] .cs-prev-mh-ph, #cs[data-stage="5"] .cs-prev-mh-ph, #cs[data-stage="6"] .cs-prev-mh-ph { opacity: 0; }
#cs[data-stage="3"] .cs-pc-real, #cs[data-stage="4"] .cs-pc-real, #cs[data-stage="5"] .cs-pc-real, #cs[data-stage="6"] .cs-pc-real,
#cs[data-stage="3"] .cs-prev-count, #cs[data-stage="4"] .cs-prev-count, #cs[data-stage="5"] .cs-prev-count, #cs[data-stage="6"] .cs-prev-count { opacity: 1; transform: translateY(0) scale(1); }
#cs[data-stage="3"] .cs-prev-count::after, #cs[data-stage="4"] .cs-prev-count::after,
#cs[data-stage="5"] .cs-prev-count::after, #cs[data-stage="6"] .cs-prev-count::after { content: "6"; }
.cs-prev-count::after { content: "0"; }

/* publish overlay — step 5 only */
.cs-pub {
  position: absolute;
  inset: 0;
  background: rgba(6, 48, 27, .72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}
#cs[data-stage="5"] .cs-pub { opacity: 1; }
.cs-pub-card {
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
  transform: scale(.85);
  transition: transform .6s var(--e-pop);
}
#cs[data-stage="5"] .cs-pub-card { transform: scale(1); }
.cs-qr {
  position: relative;
  background: #fff;
  border: 1px solid var(--g-e4eaf1);
  border-radius: 8px;
}
.cs-qr-sm { width: 104px; height: 104px; padding: 4px; }
.cs-qr img.code { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.cs-qr-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  overflow: hidden;
}
.cs-qr-sm .cs-qr-mark { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; }
.cs-qr-sm .cs-qr-mark img { width: 100%; height: 100%; object-fit: cover; }
.cs-pub-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EAF6EF;
  color: var(--green-text-light);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
}
.cs-pub-name { font-size: 16px; font-weight: 800; letter-spacing: -.3px; margin-top: 8px; color: var(--navy); }
.cs-pub-url { font-size: 12px; color: var(--g-49607b); font-weight: 600; margin-top: 3px; }
.cs-pub-btns { display: flex; gap: 6px; margin-top: 10px; }
.cs-pub-btns span { font-size: 10.5px; font-weight: 800; padding: 6px 10px; border-radius: 7px; color: #fff; }
.cs-pub-copy { background: var(--navy); }
.cs-pub-wa { background: #25D366; }

/* the phone that joins at step 6 */
.cs-prev-phone {
  position: absolute;
  inset-inline-end: -10px;
  bottom: -30px;
  width: 150px;
  aspect-ratio: 9 / 19;
  border-radius: 24px;
  background: var(--navy-deep);
  padding: 7px;
  box-shadow: 0 30px 60px rgba(6, 48, 27, .35), 0 0 0 1px rgba(255, 255, 255, .14);
  opacity: 0;
  transform: translateY(40px) rotate(4deg);
  transition: opacity .6s, transform .8s var(--e-slide);
}
#cs[data-stage="6"] .cs-prev-phone { opacity: 1; transform: translateY(0) rotate(4deg); }
.cs-prev-phone .cs-phone-screen { border-radius: 18px; }
.cs-prev-phone .cs-notch { top: 5px; width: 40px; z-index: 2; }
.cs-prev-phone-hdr { background: var(--navy); transition: background .8s; padding: 20px 9px 9px; display: flex; align-items: center; gap: 6px; }
.cs-prev-phone-logo { width: 22px; height: 22px; border-radius: 50%; background: #fff; overflow: hidden; border: 2px solid var(--orange); flex: none; }
.cs-prev-phone-logo img { width: 100%; height: 100%; object-fit: cover; }
.cs-prev-phone-name { color: #fff; font-size: 8px; font-weight: 800; line-height: 1.2; }
.cs-prev-phone-banner { width: 100%; aspect-ratio: 1; object-fit: cover; }
.cs-prev-phone-grid { padding: 7px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cs-prev-phone-grid > div { border: 1px solid var(--g-e4eaf1); border-radius: 6px; overflow: hidden; }
.cs-prev-phone-grid .cs-mc-img { border-radius: 0; }
.cs-prev-phone .cs-phone-cta { inset-inline: 7px; bottom: 7px; font-size: 7.5px; padding: 6px; border-radius: 7px; }

/* progress dots */
.cs-prev-dots { display: flex; gap: 6px; margin-top: 44px; justify-content: center; }
.cs-prev-dots span { height: 6px; width: 8px; border-radius: 999px; background: var(--g-cfdacf); transition: all .4s; }

/* --- right: the six step cards ---------------------------------------- */
.cs-steps { display: flex; flex-direction: column; }
.cs-step { min-height: 72vh; display: flex; align-items: center; padding: 20px 0; }
.cs-step-card {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 26px 28px;
  width: 100%;
  transition: all .45s;
  box-shadow: none;
  cursor: pointer;
  text-align: start;
  font: inherit;
  color: inherit;
  display: block;
}
.cs-step.is-on .cs-step-card {
  background: #fff;
  border-color: #CFE3D5;
  box-shadow: 0 24px 60px rgba(6, 48, 27, .12);
}
.cs-step-hd { display: flex; align-items: center; gap: 12px; }
.cs-step-n {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 12px;
  background: var(--g-e1e9e3);
  color: var(--body-light);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 800;
  transition: all .45s;
}
.cs-step.is-on .cs-step-n { background: var(--green-mid); color: #fff; }
.cs-step-k { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: var(--green-mid); }
.cs-step-sp { flex: 1; }
.cs-step-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #EAF6EF;
  color: var(--green-mid);
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
}
.cs-step-t {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.7px;
  line-height: 1.15;
  margin-top: 16px;
  text-wrap: balance;
}

/* the mini editor panel */
.cs-ed {
  margin-top: 18px;
  background: var(--g-f8fafc);
  border: 1px solid var(--g-e4eaf1);
  border-radius: 14px;
  padding: 14px;
  font-size: 12px;
  color: var(--navy);
  opacity: .55;
  transform: translateY(6px);
  transition: opacity .5s .1s, transform .5s .1s;
}
.cs-step.is-on .cs-ed { opacity: 1; transform: translateY(0); }
.cs-ed-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cs-ed-crumb .lbl { font-size: 10.5px; font-weight: 800; letter-spacing: 1px; color: var(--g-8a9bb0); }
.cs-ed-crumb .sep { font-size: 10.5px; color: var(--g-c3d0de); }
.cs-ed-crumb .cur { font-size: 10.5px; font-weight: 800; color: var(--g-49607b); }
.cs-ed-f { font-size: 10px; font-weight: 700; color: var(--g-8a9bb0); margin-bottom: 4px; }
.cs-ed-in {
  background: #fff;
  border: 1.5px solid var(--g-e4eaf1);
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 700;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: border-color .45s;
}
.cs-step.is-on .cs-ed-in.focus { border-color: var(--orange); }
.cs-ed-in .cs-caret { height: 14px; background: var(--navy); }

/* 1 · identity */
.cs-ed-1 { display: flex; gap: 14px; align-items: flex-start; }
.cs-ed-logo {
  position: relative;
  width: 66px;
  height: 66px;
  flex: none;
  border-radius: 50%;
  border: 2px dashed var(--g-c3d0de);
  background: #fff;
  overflow: hidden;
}
.cs-ed-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.cs-ed-logo .tab {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background: rgba(22, 40, 61, .85);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  text-align: center;
  padding: 3px 0;
}
.cs-ed-1-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-ed-tagline { font-weight: 600; color: var(--g-49607b); opacity: 0; transition: opacity .5s .8s; }
.cs-ed-sw { display: flex; gap: 6px; }
.cs-ed-sw span { width: 22px; height: 22px; border-radius: 50%; display: block; }

/* 2 · banner */
.cs-ed-slot {
  position: relative;
  aspect-ratio: 8 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px dashed var(--g-c3d0de);
  background: repeating-linear-gradient(135deg, #F7F9FC 0 10px, #EEF2F7 10px 20px);
}
.cs-ed-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; }
.cs-ed-tag {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  background: rgba(22, 40, 61, .85);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
}
.cs-ed-replace {
  position: absolute;
  bottom: 8px;
  inset-inline-start: 8px;
  background: #fff;
  color: var(--navy);
  font-size: 9.5px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity .6s;
}
.cs-ed-2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.cs-ed-2-row .cs-ed-in { font-size: 11.5px; }
.cs-ed-headline .txt { display: none; }
#cs[data-stage="2"] .cs-ed-headline .txt, #cs[data-stage="3"] .cs-ed-headline .txt,
#cs[data-stage="4"] .cs-ed-headline .txt, #cs[data-stage="5"] .cs-ed-headline .txt,
#cs[data-stage="6"] .cs-ed-headline .txt { display: inline; }

/* 3 · machines */
.cs-ed-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--g-e4eaf1);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 8px;
  color: var(--g-8a9bb0);
  font-weight: 600;
}
.cs-ed-rows { display: flex; flex-direction: column; gap: 5px; }
.cs-ed-row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1px solid var(--g-e4eaf1);
  border-radius: 8px;
  padding: 6px 8px;
}
.cs-ed-ck {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 4px;
  border: 1.5px solid var(--g-c3d0de);
  background: #fff;
  display: grid;
  place-items: center;
  transition: all .3s;
}
#cs[data-stage="3"] .cs-ed-ck, #cs[data-stage="4"] .cs-ed-ck, #cs[data-stage="5"] .cs-ed-ck, #cs[data-stage="6"] .cs-ed-ck {
  border-color: var(--green-mid);
  background: var(--green-mid);
}
.cs-ed-th { width: 26px; height: 20px; flex: none; border-radius: 4px; background: #E9EFF6 center / cover; }
.cs-ed-nm { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-ed-yd { font-size: 10.5px; color: var(--g-8a9bb0); font-weight: 600; }
.cs-ed-pr { font-size: 10.5px; font-weight: 800; }

/* 4 · theme */
.cs-ed-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-ed-theme { border-radius: 10px; overflow: hidden; border: 2px solid var(--g-e4eaf1); background: #fff; transition: border-color .4s; }
.cs-ed-theme.sel { border-color: var(--orange); }
.cs-ed-theme .sw { height: 30px; }
.cs-ed-theme .nm { padding: 6px 8px; font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.cs-ed-theme .acc { width: 8px; height: 8px; border-radius: 50%; margin-inline-start: auto; }

/* 5 · publish */
.cs-ed-pub { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--g-e4eaf1); border-radius: 10px; padding: 10px 12px; }
.cs-ed-toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--g-c3d0de); position: relative; transition: background .4s; flex: none; }
.cs-ed-toggle span { position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: inset-inline-start .4s; }
.cs-ed-pub-l { font-weight: 800; color: #8A6412; transition: color .4s; }
.cs-ed-pub-l .on { display: none; }
#cs[data-stage="5"] .cs-ed-toggle, #cs[data-stage="6"] .cs-ed-toggle { background: var(--green-live); }
#cs[data-stage="5"] .cs-ed-toggle span, #cs[data-stage="6"] .cs-ed-toggle span { inset-inline-start: 16px; }
#cs[data-stage="5"] .cs-ed-pub-l, #cs[data-stage="6"] .cs-ed-pub-l { color: var(--green-text-light); }
#cs[data-stage="5"] .cs-ed-pub-l .on, #cs[data-stage="6"] .cs-ed-pub-l .on { display: inline; }
#cs[data-stage="5"] .cs-ed-pub-l .off, #cs[data-stage="6"] .cs-ed-pub-l .off { display: none; }
.cs-ed-pub-sp { flex: 1; }
.cs-ed-pub-url { font-size: 10.5px; color: var(--g-8a9bb0); font-weight: 600; }
.cs-ed-share { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.cs-ed-share span { background: #fff; border: 1px solid var(--g-e4eaf1); border-radius: 8px; padding: 8px 4px; text-align: center; font-size: 10px; font-weight: 800; }

/* 6 · customers */
.cs-ed-seg { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--g-e4eaf1); border-radius: 10px; padding: 5px; }
.cs-ed-seg span { flex: 1; text-align: center; padding: 7px; border-radius: 7px; font-weight: 700; color: var(--g-49607b); }
.cs-ed-seg span.on { font-weight: 800; background: var(--navy); color: #fff; }
.cs-ed-note { font-size: 11px; color: var(--g-8a9bb0); font-weight: 600; margin-top: 8px; line-height: 1.5; }

/* ---------------------------------------------------------------------------
   5 · #cs-price — features + the phone stack
   ------------------------------------------------------------------------ */
.cs-price { position: relative; overflow: hidden; padding: 90px 22px 60px; }
.cs-price-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(30, 138, 76, .5), transparent 70%);
  pointer-events: none;
}
.cs-price-in {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cs-price-in h2 {
  font-size: clamp(28px, 3.3vw, 46px);
  line-height: 1.08;
  letter-spacing: -1.4px;
  font-weight: 800;
  margin: 18px 0 0;
  text-wrap: balance;
}
.cs-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; max-width: 900px; }
.cs-chip {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #E6F4EA;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .3s;
}
#cs[data-scr="0"] .cs-chip[data-i="0"],
#cs[data-scr="1"] .cs-chip[data-i="1"],
#cs[data-scr="2"] .cs-chip[data-i="2"] {
  border-color: var(--orange);
  background: rgba(245, 118, 31, .16);
  color: var(--orange-light);
}
.cs-chip-more { padding: 10px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 800; color: var(--orange-light); display: inline-flex; align-items: center; }

.cs-stack {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin-top: 40px;
  min-height: 650px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cs-stack-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 118, 31, .22), transparent 70%);
  pointer-events: none;
}
.cs-sp {
  --off: 320px;
  --side: -1;
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 280px;
  aspect-ratio: 591 / 1280;
  border-radius: 40px;
  background: #111827;
  padding: 10px;
  box-shadow: 0 50px 90px rgba(0, 0, 0, .55), inset 0 0 0 2px #2A3441, 0 0 0 1px rgba(255, 255, 255, .1);
  transform: translateX(calc(-50% + var(--side) * var(--off))) translateY(40px) rotate(calc(var(--side) * 8deg)) scale(.86);
  z-index: 1;
  opacity: .55;
  filter: brightness(.6) saturate(.7);
  transition: transform .85s var(--e-slide), opacity .6s, filter .6s;
  cursor: pointer;
  box-sizing: content-box;
  border: 0;
}
.cs-sp-in { position: absolute; inset: 10px; border-radius: 31px; overflow: hidden; background: var(--g-f3f6fa); }
.cs-sp-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }

/* rel 0 = front, rel 1 = one side, rel 2 = the other */
#cs[data-scr="0"] .cs-sp[data-i="0"], #cs[data-scr="1"] .cs-sp[data-i="1"], #cs[data-scr="2"] .cs-sp[data-i="2"] {
  transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
  z-index: 3;
  opacity: 1;
  filter: none;
}
#cs[data-scr="0"] .cs-sp[data-i="1"], #cs[data-scr="1"] .cs-sp[data-i="2"], #cs[data-scr="2"] .cs-sp[data-i="0"] { --side: 1; }
#cs[dir="rtl"][data-scr="0"] .cs-sp[data-i="1"], #cs[dir="rtl"][data-scr="1"] .cs-sp[data-i="2"], #cs[dir="rtl"][data-scr="2"] .cs-sp[data-i="0"] { --side: -1; }
#cs[dir="rtl"][data-scr="0"] .cs-sp[data-i="2"], #cs[dir="rtl"][data-scr="1"] .cs-sp[data-i="0"], #cs[dir="rtl"][data-scr="2"] .cs-sp[data-i="1"] { --side: 1; }

.cs-value { position: relative; width: min(100%, 640px); min-height: 84px; margin-top: 28px; }
.cs-value > div {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s .25s, transform .5s .25s;
  pointer-events: none;
}
#cs[data-scr="0"] .cs-value > div[data-i="0"],
#cs[data-scr="1"] .cs-value > div[data-i="1"],
#cs[data-scr="2"] .cs-value > div[data-i="2"] { opacity: 1; transform: translateY(0); }
.cs-value-k { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: var(--orange-light); }
.cs-value-l {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -.8px;
  line-height: 1.15;
  margin-top: 6px;
  text-wrap: balance;
}

.cs-sdots { display: flex; gap: 6px; margin-top: 22px; }
.cs-sdots button {
  height: 6px;
  width: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: all .4s;
  border: 0;
  padding: 0;
}
#cs[data-scr="0"] .cs-sdots button[data-i="0"],
#cs[data-scr="1"] .cs-sdots button[data-i="1"],
#cs[data-scr="2"] .cs-sdots button[data-i="2"] { width: 24px; background: var(--orange); }

.cs-plan { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 44px; }
.cs-plan-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cs-plan-p { font-size: 64px; font-weight: 800; letter-spacing: -2.6px; line-height: 1; color: #fff; }
.cs-plan-per { font-size: 18px; color: var(--on-dark); font-weight: 700; }
.cs-plan-old { font-size: 16px; color: var(--on-dark-3); text-decoration: line-through; font-weight: 600; }
.cs-plan .cs-cta { height: 58px; padding: 0 30px; margin-top: 22px; font-size: 17px; }
.cs-plan-note { font-size: 13px; color: var(--on-dark-3); font-weight: 600; margin-top: 10px; }

/* ---------------------------------------------------------------------------
   6 · Closer
   ------------------------------------------------------------------------ */
.cs-closer { background: #fff; color: var(--navy); padding: 90px 22px; }
.cs-closer-card {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  background: linear-gradient(135deg, var(--green-bg) 0%, var(--green-mid) 55%, var(--green-bright2) 100%);
  color: #fff;
  border-radius: 30px;
  padding: clamp(32px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 36px;
  align-items: center;
  box-shadow: 0 50px 110px rgba(6, 48, 27, .38), 0 0 0 1px rgba(6, 48, 27, .08);
  overflow: hidden;
}
.cs-closer-glow {
  position: absolute;
  inset-inline-end: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 118, 31, .35), transparent 70%);
  pointer-events: none;
}
.cs-closer-ring {
  position: absolute;
  inset-inline-start: -80px;
  bottom: -160px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .12);
  pointer-events: none;
}
.cs-closer-card h2 {
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -1.1px;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
}
.cs-closer-sub { font-size: 17px; color: var(--on-dark-2); line-height: 1.55; margin: 16px 0 0; max-width: 44ch; }
.cs-closer-tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
}
.cs-closer-card .cs-cta { margin-top: 18px; box-shadow: 0 16px 36px rgba(0, 0, 0, .25); }
.cs-qr-card {
  background: #fff;
  border-radius: 20px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--navy);
}
.cs-qr-lg { width: 168px; height: 168px; padding: 6px; border-radius: 10px; }
.cs-qr-lg .cs-qr-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--navy);
  display: grid;
  place-items: center;
  border: 3px solid #fff;
}
.cs-qr-lg .cs-qr-mark img { width: 26px; height: auto; }
.cs-qr-note { font-size: 12.5px; font-weight: 700; color: var(--g-49607b); text-align: center; max-width: 20ch; line-height: 1.4; }
.cs-closer-wrap { display: flex; justify-content: center; }

/* ---------------------------------------------------------------------------
   7 · Sign-off strip (the site footer follows it)
   ------------------------------------------------------------------------ */
.cs-signoff { padding: 30px 22px 44px; color: var(--on-dark-3); font-size: 13px; }
.cs-signoff-in { max-width: var(--shell); margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cs-signoff img { height: 22px; width: auto; opacity: .85; }
.cs-signoff .sp { flex: 1; }
.cs-signoff a { color: var(--on-dark-2); font-weight: 700; }

/* ---------------------------------------------------------------------------
   Responsive — the prototype drives everything off viewport width; in
   production these are the three breakpoints its numbers imply.
   ------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .cs-sp { --off: 250px; }
}

@media (max-width: 960px) {
  .cs-build-grid { grid-template-columns: 1fr; gap: 0; }
  .cs-prev-wrap { top: 72px; }
  .cs-prev-zoom { zoom: var(--cs-zoom, 1); }
  .cs-step { min-height: 46vh; }
  .cs-prev-dots { padding-bottom: 8px; }
}

@media (max-width: 759px) {
  .cs-bar-links { display: none; }
  .cs-chips { display: none; }
}

@media (max-width: 699px) {
  .cs-hero { padding: 36px 18px 48px; }
  .cs-hero-stage { min-height: 300px; padding-inline-end: 40px; }
  .cs-hero-phone { width: 112px; }
  .cs-hero-ctas .cs-cta, .cs-hero-ctas .cs-cta-ghost { flex: 1 1 100%; }
  .cs-stop, .cs-build, .cs-price, .cs-closer { padding-top: 56px; padding-bottom: 56px; }
  .cs-build { padding-bottom: 40px; }

  /* The tiles become a SWIPEABLE row.      2026-09-23
     They used to be a transform driven by a timer, which meant a phone
     visitor could only wait. This is a real scroller: the timer still
     nudges it (createstore.js), the visitor can take it over at any point,
     and 80vw tiles leave the next one peeking as the affordance. */
  .cs-tiles-vp {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* the tiles carry a drop shadow and overflow-y clips it */
    padding-bottom: 14px;
  }
  .cs-tiles-vp::-webkit-scrollbar { display: none; }
  .cs-tiles {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--cs-tilew, 80vw);
    gap: 10px;
    width: max-content;
    transform: none;
  }
  .cs-tile { padding: 12px; min-height: 136px; scroll-snap-align: start; }
  .cs-tile-t { font-size: 12.5px; }
  .cs-t2 { grid-template-columns: 1fr; }
  .cs-t2-inv, .cs-t2-arrow { display: none; }
  .cs-t3 { flex-direction: column; align-items: stretch; }

  .cs-scene { min-height: 440px; }
  .cs-desk-body { height: 210px; }
  .cs-scene-phone { width: 180px; }
  .cs-mode { top: -10px; }
  .cs-stack { min-height: 470px; }
  .cs-sp { width: 200px; --off: 150px; }
  .cs-step-card { padding: 18px 16px; }
  .cs-plan-p { font-size: 52px; }
}

@media (max-width: 479px) {
  .cs-stack { min-height: 400px; }
  .cs-sp { width: 170px; --off: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  #cs *, #cs *::before, #cs *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Generated state tables — beat captions, countdown, progress bar, step dots.
   Written by the block at the end of build_createstore.py; do not hand-edit.
   ------------------------------------------------------------------------ */
.cs-cap-t > span, .cs-count > span { display: none; }
#cs[data-beat="0"] .cs-cap-t > span[data-at="0"],
#cs[data-beat="0"] .cs-count > span[data-at="0"] { display: inline; }
#cs[data-beat="1"] .cs-cap-t > span[data-at="1"],
#cs[data-beat="1"] .cs-count > span[data-at="1"] { display: inline; }
#cs[data-beat="2"] .cs-cap-t > span[data-at="2"],
#cs[data-beat="2"] .cs-count > span[data-at="2"] { display: inline; }
#cs[data-beat="3"] .cs-cap-t > span[data-at="3"],
#cs[data-beat="3"] .cs-count > span[data-at="3"] { display: inline; }
#cs[data-beat="4"] .cs-cap-t > span[data-at="4"],
#cs[data-beat="4"] .cs-count > span[data-at="4"] { display: inline; }
#cs[data-beat="5"] .cs-cap-t > span[data-at="5"],
#cs[data-beat="5"] .cs-count > span[data-at="5"] { display: inline; }
#cs[data-beat="6"] .cs-cap-t > span[data-at="6"],
#cs[data-beat="6"] .cs-count > span[data-at="6"] { display: inline; }
#cs[data-beat="7"] .cs-cap-t > span[data-at="7"],
#cs[data-beat="7"] .cs-count > span[data-at="7"] { display: inline; }
#cs[data-beat="8"] .cs-cap-t > span[data-at="8"],
#cs[data-beat="8"] .cs-count > span[data-at="8"] { display: inline; }
#cs[data-beat="9"] .cs-cap-t > span[data-at="9"],
#cs[data-beat="9"] .cs-count > span[data-at="9"] { display: inline; }
#cs[data-beat="0"] .cs-cap-fill { width: 10%; }
#cs[data-beat="1"] .cs-cap-fill { width: 20%; }
#cs[data-beat="2"] .cs-cap-fill { width: 30%; }
#cs[data-beat="3"] .cs-cap-fill { width: 40%; }
#cs[data-beat="4"] .cs-cap-fill { width: 50%; }
#cs[data-beat="5"] .cs-cap-fill { width: 60%; }
#cs[data-beat="6"] .cs-cap-fill { width: 70%; }
#cs[data-beat="7"] .cs-cap-fill { width: 80%; }
#cs[data-beat="8"] .cs-cap-fill { width: 90%; }
#cs[data-beat="9"] .cs-cap-fill { width: 100%; }
#cs[data-stage="1"] .cs-prev-dots span:nth-child(1) { background: var(--green-mid); }
#cs[data-stage="1"] .cs-prev-dots span:nth-child(1) { width: 26px; }
#cs[data-stage="2"] .cs-prev-dots span:nth-child(1), #cs[data-stage="2"] .cs-prev-dots span:nth-child(2) { background: var(--green-mid); }
#cs[data-stage="2"] .cs-prev-dots span:nth-child(2) { width: 26px; }
#cs[data-stage="3"] .cs-prev-dots span:nth-child(1), #cs[data-stage="3"] .cs-prev-dots span:nth-child(2), #cs[data-stage="3"] .cs-prev-dots span:nth-child(3) { background: var(--green-mid); }
#cs[data-stage="3"] .cs-prev-dots span:nth-child(3) { width: 26px; }
#cs[data-stage="4"] .cs-prev-dots span:nth-child(1), #cs[data-stage="4"] .cs-prev-dots span:nth-child(2), #cs[data-stage="4"] .cs-prev-dots span:nth-child(3), #cs[data-stage="4"] .cs-prev-dots span:nth-child(4) { background: var(--green-mid); }
#cs[data-stage="4"] .cs-prev-dots span:nth-child(4) { width: 26px; }
#cs[data-stage="5"] .cs-prev-dots span:nth-child(1), #cs[data-stage="5"] .cs-prev-dots span:nth-child(2), #cs[data-stage="5"] .cs-prev-dots span:nth-child(3), #cs[data-stage="5"] .cs-prev-dots span:nth-child(4), #cs[data-stage="5"] .cs-prev-dots span:nth-child(5) { background: var(--green-mid); }
#cs[data-stage="5"] .cs-prev-dots span:nth-child(5) { width: 26px; }
#cs[data-stage="6"] .cs-prev-dots span:nth-child(1), #cs[data-stage="6"] .cs-prev-dots span:nth-child(2), #cs[data-stage="6"] .cs-prev-dots span:nth-child(3), #cs[data-stage="6"] .cs-prev-dots span:nth-child(4), #cs[data-stage="6"] .cs-prev-dots span:nth-child(5), #cs[data-stage="6"] .cs-prev-dots span:nth-child(6) { background: var(--green-mid); }
#cs[data-stage="6"] .cs-prev-dots span:nth-child(6) { width: 26px; }

/* ---------------------------------------------------------------------------
   Arabic typography
   The handoff's tracking (-1.8px on the h1, -4px on the stop word, -2.6px on
   the price) is drawn for Plus Jakarta Sans. Arabic is cursive: negative
   tracking closes the joins and the tight Latin leading clips the descenders,
   so the script gets its own numbers here. Sizes are untouched.
   ------------------------------------------------------------------------ */
#cs[dir="rtl"] h1,
#cs[dir="rtl"] h2,
#cs[dir="rtl"] .cs-stop-word,
#cs[dir="rtl"] .cs-plan-p,
#cs[dir="rtl"] .cs-step-t,
#cs[dir="rtl"] .cs-value-l,
#cs[dir="rtl"] .cs-prev-name,
#cs[dir="rtl"] .cs-cap-t { letter-spacing: normal; }

#cs[dir="rtl"] .cs-hero-copy h1 { line-height: 1.25; }
#cs[dir="rtl"] .cs-build-hd h2,
#cs[dir="rtl"] .cs-price-in h2,
#cs[dir="rtl"] .cs-closer-card h2,
#cs[dir="rtl"] .cs-stop-hd h2 { line-height: 1.3; }
#cs[dir="rtl"] .cs-step-t { line-height: 1.35; }
#cs[dir="rtl"] .cs-value-l { line-height: 1.4; }

/* Latin strings inside Arabic copy (prices, machine models, the store URL) stay
   LTR so "SAR 1,250" and "store.moedatech.net/rakaa" do not reorder. */
#cs[dir="rtl"] .cs-mc-price,
#cs[dir="rtl"] .cs-t2-price,
#cs[dir="rtl"] .cs-pc-price,
#cs[dir="rtl"] .cs-ed-pr,
#cs[dir="rtl"] .cs-desk-1-price { direction: ltr; unicode-bidi: isolate; }

/* ===========================================================================
   THEME: v4 — the site's own design system
   #cs[data-theme="v4"]

   Read off the live staging site rather than guessed:
     body            #e8dfd5 sunk / #f3efea page, ink #323232, Figtree
     primary CTA     black fill, white text, 999px pill, weight 500
     secondary CTA   #f3efea fill, black text, pill
     headings        weight 500, line-height 1.06, letter-spacing -0.03em
     cards           #fff, radius 26px, hairline #ddd3c7
     signal green    #48f08b — a block colour (dots, bars), never text:
                     it fails contrast on cream

   Only the PAGE CHROME changes. The device mocks keep their own colours: they
   depict a supplier's storefront and its theme picker, which is product
   content, not our page's skin. That line is why this file does not simply
   re-point the shared tokens.
   ========================================================================= */

#cs[data-theme="v4"] {
  --v4-bg: #f3efea;
  --v4-sunk: #e8dfd5;
  --v4-raised: #ffffff;
  --v4-dark: #101112;
  --v4-ink: #000000;
  --v4-ink-soft: #323232;
  --v4-ink-muted: #4e4e4e;
  --v4-on-dark-muted: rgba(255, 255, 255, .62);
  --v4-hairline: #ddd3c7;
  --v4-signal: #48f08b;
  --v4-navy: #20384c;
  --v4-r: 26px;

  background: var(--v4-sunk);
  color: var(--v4-ink-soft);
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
#cs[data-theme="v4"][dir="rtl"] {
  font-family: 'IBM Plex Sans Arabic', "Figtree", system-ui, sans-serif;
}

#cs[data-theme="v4"] h1,
#cs[data-theme="v4"] h2 {
  color: var(--v4-ink);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
#cs[data-theme="v4"][dir="rtl"] h1,
#cs[data-theme="v4"][dir="rtl"] h2 { letter-spacing: normal; line-height: 1.3; }

/* --- ticker: the one black strip ------------------------------------- */

/* --- section bar: sits UNDER the site header, so it must read as ours -- */
#cs[data-theme="v4"] .cs-bar {
  background: rgba(243, 239, 234, .82);
  border-bottom: 1px solid var(--v4-hairline);
}
#cs[data-theme="v4"] .cs-bar-links a { color: var(--v4-ink-muted); font-weight: 500; }
#cs[data-theme="v4"] .cs-bar-links a:hover { color: var(--v4-ink); }
#cs[data-theme="v4"] .cs-bar-cta {
  background: var(--v4-ink);
  color: #fff;
  border-radius: 999px;
  font-weight: 500;
}
#cs[data-theme="v4"] .cs-bar-cta:hover { background: var(--v4-ink-soft); color: #fff; }

/* --- buttons ---------------------------------------------------------- */
#cs[data-theme="v4"] .cs-cta {
  background: var(--v4-ink);
  color: #fff;
  border-radius: 999px;
  font-weight: 500;
  box-shadow: none;
}
#cs[data-theme="v4"] .cs-cta:hover { background: var(--v4-ink-soft); color: #fff; }
#cs[data-theme="v4"] .cs-cta-ghost {
  background: var(--v4-bg);
  border: 1px solid var(--v4-hairline);
  color: var(--v4-ink);
  border-radius: 999px;
  font-weight: 500;
}
#cs[data-theme="v4"] .cs-cta-ghost:hover { background: var(--v4-raised); color: var(--v4-ink); }
#cs[data-theme="v4"] .cs-cta svg { stroke: #fff; }

/* --- kicker pills ------------------------------------------------------ */
#cs[data-theme="v4"] .cs-kicker-pill {
  background: var(--v4-raised);
  border: 1px solid var(--v4-hairline);
  color: var(--v4-ink-soft);
  font-weight: 500;
}

/* --- hero -------------------------------------------------------------- */
#cs[data-theme="v4"] .cs-hero { background: var(--v4-sunk); }
#cs[data-theme="v4"] .cs-hero-glow {
  background: radial-gradient(ellipse 60% 50% at 70% 40%, rgba(72, 240, 139, .16), transparent 70%);
  animation: none;
}
#cs[data-theme="v4"] .cs-ring { border-color: rgba(0, 0, 0, .06); }
#cs[data-theme="v4"] .cs-mock,
#cs[data-theme="v4"] .cs-tile { border-radius: var(--v4-r); }
#cs[data-theme="v4"] .cs-mock { box-shadow: 0 30px 70px rgba(16, 17, 18, .18), 0 0 0 1px var(--v4-hairline); }
#cs[data-theme="v4"] .cs-tile {
  border: 1px solid var(--v4-hairline);
  box-shadow: 0 18px 44px rgba(16, 17, 18, .08);
}
#cs[data-theme="v4"] .cs-tile-t { color: var(--v4-ink); font-weight: 500; letter-spacing: -0.02em; }
#cs[data-theme="v4"] .cs-live-dot { background: var(--v4-signal); }

/* --- "STOP!" ----------------------------------------------------------- */
#cs[data-theme="v4"] .cs-stop { background: var(--v4-bg); }
#cs[data-theme="v4"] .cs-stop-word { color: var(--v4-ink); font-weight: 500; letter-spacing: -0.04em; }
#cs[data-theme="v4"][dir="rtl"] .cs-stop-word { letter-spacing: normal; }
#cs[data-theme="v4"] .cs-stop-hd h2 { color: var(--v4-ink); }
#cs[data-theme="v4"] .cs-stop-hd p { color: var(--v4-ink-muted); }
#cs[data-theme="v4"] .cs-scene-desk {
  border-radius: var(--v4-r) var(--v4-r) 0 0;
  box-shadow: 0 30px 70px rgba(16, 17, 18, .14), 0 0 0 1px var(--v4-hairline);
}
#cs[data-theme="v4"] .cs-cap-t { color: var(--v4-ink); font-weight: 500; letter-spacing: -0.02em; }
#cs[data-theme="v4"] .cs-count-l { color: var(--v4-ink-muted); }
#cs[data-theme="v4"] .cs-cap-bar { background: var(--v4-hairline); }
/* the countdown keeps its red -> resolved shift; on cream the "after" state is
   ink, because #48f08b as text fails contrast. The mint goes on the bar. */
#cs[data-theme="v4"][data-beat="3"] .cs-count, #cs[data-theme="v4"][data-beat="4"] .cs-count,
#cs[data-theme="v4"][data-beat="5"] .cs-count, #cs[data-theme="v4"][data-beat="6"] .cs-count,
#cs[data-theme="v4"][data-beat="7"] .cs-count, #cs[data-theme="v4"][data-beat="8"] .cs-count,
#cs[data-theme="v4"][data-beat="9"] .cs-count { color: var(--v4-ink); }
#cs[data-theme="v4"][data-beat="3"] .cs-cap-txt, #cs[data-theme="v4"][data-beat="4"] .cs-cap-txt,
#cs[data-theme="v4"][data-beat="5"] .cs-cap-txt, #cs[data-theme="v4"][data-beat="6"] .cs-cap-txt,
#cs[data-theme="v4"][data-beat="7"] .cs-cap-txt, #cs[data-theme="v4"][data-beat="8"] .cs-cap-txt,
#cs[data-theme="v4"][data-beat="9"] .cs-cap-txt { border-color: var(--v4-ink); }
#cs[data-theme="v4"][data-beat="3"] .cs-cap-fill, #cs[data-theme="v4"][data-beat="4"] .cs-cap-fill,
#cs[data-theme="v4"][data-beat="5"] .cs-cap-fill, #cs[data-theme="v4"][data-beat="6"] .cs-cap-fill,
#cs[data-theme="v4"][data-beat="7"] .cs-cap-fill, #cs[data-theme="v4"][data-beat="8"] .cs-cap-fill,
#cs[data-theme="v4"][data-beat="9"] .cs-cap-fill { background: var(--v4-signal); }
#cs[data-theme="v4"] .cs-cue { color: var(--v4-ink); }
#cs[data-theme="v4"] .cs-cue-a { background: var(--v4-ink); }
#cs[data-theme="v4"] .cs-mode { border-radius: 999px; font-weight: 500; }

/* --- the self-building editor ------------------------------------------ */
#cs[data-theme="v4"] .cs-build { background: var(--v4-sunk); }
#cs[data-theme="v4"] .cs-build-k { color: var(--v4-ink-muted); font-weight: 500; letter-spacing: .12em; }
#cs[data-theme="v4"] .cs-prev-card {
  border-radius: var(--v4-r);
  box-shadow: 0 30px 70px rgba(16, 17, 18, .14), 0 0 0 1px var(--v4-hairline);
}
#cs[data-theme="v4"] .cs-step.is-on .cs-step-card {
  background: var(--v4-raised);
  border-color: var(--v4-hairline);
  border-radius: var(--v4-r);
  box-shadow: 0 24px 60px rgba(16, 17, 18, .10);
}
#cs[data-theme="v4"] .cs-step-card { border-radius: var(--v4-r); }
#cs[data-theme="v4"] .cs-step-n { background: var(--v4-hairline); color: var(--v4-ink-muted); border-radius: 999px; }
#cs[data-theme="v4"] .cs-step.is-on .cs-step-n { background: var(--v4-ink); color: #fff; }
#cs[data-theme="v4"] .cs-step-k { color: var(--v4-ink-muted); font-weight: 500; letter-spacing: .12em; }
#cs[data-theme="v4"] .cs-step-time { background: var(--v4-bg); color: var(--v4-ink-soft); font-weight: 500; }
#cs[data-theme="v4"] .cs-step-time svg { stroke: var(--v4-ink-soft); }
#cs[data-theme="v4"] .cs-step-t { color: var(--v4-ink); font-weight: 500; letter-spacing: -0.03em; }
#cs[data-theme="v4"] .cs-ed { background: var(--v4-bg); border-color: var(--v4-hairline); border-radius: 18px; }
#cs[data-theme="v4"] .cs-prev-dots span { background: var(--v4-hairline); }
#cs[data-theme="v4"][data-stage="1"] .cs-prev-dots span:nth-child(1),
#cs[data-theme="v4"][data-stage="2"] .cs-prev-dots span:nth-child(-n+2),
#cs[data-theme="v4"][data-stage="3"] .cs-prev-dots span:nth-child(-n+3),
#cs[data-theme="v4"][data-stage="4"] .cs-prev-dots span:nth-child(-n+4),
#cs[data-theme="v4"][data-stage="5"] .cs-prev-dots span:nth-child(-n+5),
#cs[data-theme="v4"][data-stage="6"] .cs-prev-dots span:nth-child(-n+6) { background: var(--v4-ink); }

/* --- price: the one dark stage ----------------------------------------- */
#cs[data-theme="v4"] .cs-price { background: var(--v4-dark); }
#cs[data-theme="v4"] .cs-price-glow { background: none; }
#cs[data-theme="v4"] .cs-price-in h2 { color: #fff; }
#cs[data-theme="v4"] .cs-price .cs-kicker-pill {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
#cs[data-theme="v4"] .cs-chip {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .86);
  font-weight: 500;
}
#cs[data-theme="v4"][data-scr="0"] .cs-chip[data-i="0"],
#cs[data-theme="v4"][data-scr="1"] .cs-chip[data-i="1"],
#cs[data-theme="v4"][data-scr="2"] .cs-chip[data-i="2"] {
  border-color: var(--v4-signal);
  background: rgba(72, 240, 139, .14);
  color: var(--v4-signal);
}
#cs[data-theme="v4"] .cs-chip-more { color: var(--v4-signal); font-weight: 500; }
#cs[data-theme="v4"] .cs-stack-glow { background: radial-gradient(circle, rgba(72, 240, 139, .10), transparent 70%); }
#cs[data-theme="v4"] .cs-value-k { color: var(--v4-signal); font-weight: 500; letter-spacing: .12em; }
#cs[data-theme="v4"] .cs-value-l { color: #fff; font-weight: 500; letter-spacing: -0.03em; }
#cs[data-theme="v4"] .cs-sdots button { background: rgba(255, 255, 255, .3); }
#cs[data-theme="v4"][data-scr="0"] .cs-sdots button[data-i="0"],
#cs[data-theme="v4"][data-scr="1"] .cs-sdots button[data-i="1"],
#cs[data-theme="v4"][data-scr="2"] .cs-sdots button[data-i="2"] { background: var(--v4-signal); }
#cs[data-theme="v4"] .cs-plan-p { color: #fff; font-weight: 500; letter-spacing: -0.03em; }
#cs[data-theme="v4"] .cs-plan-per { color: var(--v4-on-dark-muted); font-weight: 500; }
#cs[data-theme="v4"] .cs-plan-old { color: rgba(255, 255, 255, .45); }
#cs[data-theme="v4"] .cs-plan-note { color: var(--v4-on-dark-muted); }
/* on the dark stage the primary button inverts, the way v4's own dark stages do */
#cs[data-theme="v4"] .cs-price .cs-cta { background: #fff; color: var(--v4-ink); }
#cs[data-theme="v4"] .cs-price .cs-cta:hover { background: var(--v4-bg); color: var(--v4-ink); }
#cs[data-theme="v4"] .cs-price .cs-cta svg { stroke: var(--v4-ink); }

/* --- closer ------------------------------------------------------------ */
#cs[data-theme="v4"] .cs-closer { background: var(--v4-bg); }
#cs[data-theme="v4"] .cs-closer-card {
  background: var(--v4-dark);
  border-radius: clamp(26px, 3vw, 40px);
  box-shadow: 0 50px 110px rgba(16, 17, 18, .28);
}
#cs[data-theme="v4"] .cs-closer-card h2 { color: #fff; }
#cs[data-theme="v4"] .cs-closer-sub { color: var(--v4-on-dark-muted); }
#cs[data-theme="v4"] .cs-closer-glow { background: radial-gradient(circle, rgba(72, 240, 139, .16), transparent 70%); }
#cs[data-theme="v4"] .cs-closer-tip {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .16);
  font-weight: 500;
}
#cs[data-theme="v4"] .cs-closer-card .cs-cta { background: #fff; color: var(--v4-ink); }
#cs[data-theme="v4"] .cs-closer-card .cs-cta:hover { background: var(--v4-bg); color: var(--v4-ink); }
#cs[data-theme="v4"] .cs-qr-card { border-radius: var(--v4-r); }
#cs[data-theme="v4"] .cs-qr-lg .cs-qr-mark { background: var(--v4-dark); }

/* --- sign-off ---------------------------------------------------------- */
#cs[data-theme="v4"] .cs-signoff { color: var(--v4-ink-muted); }
#cs[data-theme="v4"] .cs-signoff a { color: var(--v4-ink); }
/* the wordmark is a white PNG — it needs inverting on cream */
#cs[data-theme="v4"] .cs-signoff img { filter: invert(1); opacity: .8; }

/* ---------------------------------------------------------------------------
   Surviving the site skin
   The skin's layout pass tags any full-width block taller than 200px with
   data-v4-rhythm and inflates it to 96px top and bottom, which would undo the
   section rhythm this page is drawn with. Its rule is
   `html.v4skin body [data-v4-rhythm]` = (0,2,2) !important; `#cs > section` is
   (1,1,0), so an ID wins on specificity and load order stops mattering.
   Each section publishes its own padding as a variable so this stays one rule.
   ------------------------------------------------------------------------ */
#cs .cs-hero   { --cs-pt: 56px; --cs-pb: 70px; }
#cs .cs-stop   { --cs-pt: 90px; --cs-pb: 90px; }
#cs .cs-build  { --cs-pt: 90px; --cs-pb: 40px; }
#cs .cs-price  { --cs-pt: 90px; --cs-pb: 60px; }
#cs .cs-closer { --cs-pt: 90px; --cs-pb: 90px; }
@media (max-width: 699px) {
  #cs .cs-hero { --cs-pt: 36px; --cs-pb: 48px; }
  #cs .cs-stop, #cs .cs-price, #cs .cs-closer { --cs-pt: 56px; --cs-pb: 56px; }
  #cs .cs-build { --cs-pt: 56px; --cs-pb: 40px; }
}
#cs > section[data-v4-rhythm] {
  padding-top: var(--cs-pt) !important;
  padding-bottom: var(--cs-pb) !important;
}

/* ---------------------------------------------------------------------------
   National Day: the GREEN only
   Hisham, 2026-09-22: "go back to what our look was, just add the color."

   So this is NOT a theme. The page keeps the site's v4 system exactly —
   Figtree, black pill CTAs, cream sections, card radii, spacing, motion. The
   only thing `data-nd` does is recolour the three surfaces that v4 paints
   near-black (#101112) to the National Day green from the handoff. Set by the
   inline script in the markup for 21 Sep - 30 Sep Riyadh, then it is simply
   absent and the page is the ordinary site page again.
   ------------------------------------------------------------------------ */

#cs[data-nd] .cs-price { background: #06301B; }
#cs[data-nd] .cs-closer-card {
  background: linear-gradient(135deg, #06301B 0%, #0F5C32 55%, #1E8A4C 100%);
}
#cs[data-nd] .cs-qr-lg .cs-qr-mark { background: #06301B; }

/* --- data-nd, continued: the page ground goes green -----------------------
   Hisham, 2026-09-22: "apply the green background to the page."

   Same shape as the handoff, which is NOT green throughout: the hero sits on
   the National Day green, the two working sections ("STOP!" and the editor)
   stay light so the storefront preview and the step cards keep their contrast,
   and the price stage and closer card are already green above.

   The hero's contents invert exactly the way v4 already inverts its own dark
   stage — white headline, white pill CTA with ink text, translucent ghost —
   so this is still the site's system, on a green ground.
   ------------------------------------------------------------------------ */
#cs[data-nd] { background: #06301B; }
#cs[data-nd] .cs-hero { background: #06301B; }
#cs[data-nd] .cs-hero-glow {
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(30, 138, 76, .55), transparent 70%),
    radial-gradient(ellipse 40% 40% at 20% 90%, rgba(72, 240, 139, .14), transparent 70%);
}
#cs[data-nd] .cs-ring { border-color: rgba(255, 255, 255, .08); }

#cs[data-nd] .cs-hero-copy h1 { color: #fff; }
#cs[data-nd] .cs-hero .cs-kicker-pill {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #DDF0E3;
}
/* v4's own dark-stage inversion: the primary action becomes a white pill */
#cs[data-nd] .cs-hero .cs-cta { background: #fff; color: #000; }
#cs[data-nd] .cs-hero .cs-cta:hover { background: #f3efea; color: #000; }
#cs[data-nd] .cs-hero .cs-cta svg { stroke: #000; }
#cs[data-nd] .cs-hero .cs-cta-ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
}
#cs[data-nd] .cs-hero .cs-cta-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* ===========================================================================
   The scene phone: a real device, and a real turn
   Hisham, 2026-09-22: "the phone changing pages is not good at all, it's like
   a book and it should have a real good moving — and we need to change the
   phone template as well with a real design."

   TWO SEPARATE FAULTS

   1. The turn had no depth. `perspective` was set on `.cs-scene-phone`, which
      is the element that rotates — a transform property applies perspective to
      an element's CHILDREN, never to itself, so the rotation was a flat
      scaleX squeeze. That is exactly why it read as a page in a book, with a
      seam down the middle and the logo clipped. Perspective now lives on the
      stage, the phone keeps preserve-3d, and the turn is a genuine rotation
      through space.

   2. The device was a rounded rectangle with a 5px bar. It now has a titanium
      edge with a hairline, an inset screen, a Dynamic-Island pill and side
      buttons — all from CSS and pseudo-elements, so the markup is untouched.
   ========================================================================= */

/* depth for the turn — on the STAGE, so it applies to the phone inside it */
.cs-scene { perspective: 1400px; perspective-origin: 50% 45%; }

.cs-scene-phone {
  width: 226px;
  border-radius: 44px;
  padding: 11px;
  /* brushed titanium edge rather than a flat fill */
  background:
    linear-gradient(145deg, #3d4753 0%, #1b222b 18%, #10151b 50%, #1b222b 82%, #454f5c 100%);
  box-shadow:
    0 2px 2px rgba(255, 255, 255, .22) inset,
    0 -2px 3px rgba(0, 0, 0, .5) inset,
    0 30px 60px rgba(6, 48, 27, .30),
    0 60px 110px rgba(6, 48, 27, .22);
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.65, 0, .25, 1), background .5s;
}
/* the hairline where the glass meets the frame */
.cs-scene-phone > .cs-phone-screen {
  border-radius: 34px;
  box-shadow: 0 0 0 1.5px #05070a, 0 0 0 2.5px rgba(255, 255, 255, .07);
  background: #000;
  transition: transform .9s cubic-bezier(.65, 0, .25, 1);
}

/* side buttons: volume pair on one edge, wake on the other */
.cs-scene-phone::before,
.cs-scene-phone::after {
  content: "";
  position: absolute;
  width: 2.5px;
  border-radius: 2px;
  background: linear-gradient(180deg, #4a5462, #222a33);
  pointer-events: none;
}
.cs-scene-phone::before { left: -2.5px; top: 21%; height: 9%; box-shadow: 0 17% 0 0 transparent; }
.cs-scene-phone::after  { right: -2.5px; top: 27%; height: 13%; }

/* Dynamic Island, from the old 5px notch bar */
.cs-scene-phone .cs-notch {
  top: 12px;
  width: 62px;
  height: 19px;
  border-radius: 999px;
  background: #000;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .10);
  z-index: 9;
}
/* the camera, just off-centre in the island */
.cs-scene-phone .cs-notch::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3a4a 0%, #0b0f14 65%);
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .12);
}

/* --- the turn ----------------------------------------------------------- */
#cs[data-beat="3"] .cs-scene-phone, #cs[data-beat="4"] .cs-scene-phone,
#cs[data-beat="5"] .cs-scene-phone, #cs[data-beat="6"] .cs-scene-phone,
#cs[data-beat="7"] .cs-scene-phone, #cs[data-beat="8"] .cs-scene-phone,
#cs[data-beat="9"] .cs-scene-phone {
  transform: rotateY(180deg);
  /* the National Day green reads on the back of the device, not the front */
  background: linear-gradient(145deg, #1E8A4C 0%, #0F5C32 22%, #06301B 52%, #0F5C32 80%, #22a35c 100%);
}

/* --- screen changes: app navigation, not a page turn -------------------- */
#cs { --cs-push: 30%; }
#cs[dir="rtl"] { --cs-push: -30%; }

.cs-scene-phone .cs-layer {
  transform: translate3d(var(--cs-push), 0, 0) scale(.985);
  transition:
    opacity .34s cubic-bezier(.2, .8, .2, 1),
    transform .58s cubic-bezier(.22, .9, .24, 1);
  will-change: transform, opacity;
}
/* the chat and the splash are states of the device, not pushed screens */
.cs-scene-phone .cs-chat,
.cs-scene-phone .cs-l-splash { transform: none; transition: opacity .45s; }

#cs[data-beat="5"] .cs-l-home,
#cs[data-beat="6"] .cs-l-machine,
#cs[data-beat="7"] .cs-l-lock,
#cs[data-beat="8"] .cs-l-req,
#cs[data-beat="9"] .cs-l-end {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
/* the lock screen is the phone waking, so it rises instead of pushing across */
.cs-scene-phone .cs-l-lock { transform: translate3d(0, 6%, 0) scale(.99); }
/* and the end card settles rather than slides */
.cs-scene-phone .cs-l-end { transform: scale(.94); }

@media (max-width: 699px) {
  .cs-scene-phone { width: 194px; border-radius: 38px; padding: 9px; }
  .cs-scene-phone > .cs-phone-screen { border-radius: 30px; }
  .cs-scene-phone .cs-notch { width: 54px; height: 17px; top: 10px; }
}

/* The Dynamic Island is taller than the old 5px bar, so the two screens that
   draw their own content at the very top need to clear it. The store
   screenshots are photographs of a real app and already carry a status bar,
   so the island sitting over them is correct. */
.cs-scene-phone .cs-chat-hdr { padding-top: 38px; }
.cs-scene-phone .cs-l-lock { padding-top: 52px; }

/* ===========================================================================
   Scene phone, corrected
   Hisham, 2026-09-22: "the dynamic island is covering some of the page, and
   still the phone flipping is there — I don't want any page flip."

   1. NO ISLAND. A cutout only earns its place if nothing important sits under
      it; here every screen draws to the top edge, so it was eating content.
      The device is now a clean full-face screen — no notch, no island — and
      the two screens that needed clearance for it go back to their own
      spacing.

   2. NO FLIP. The turn is gone entirely, not softened. Beat 3 is now a state
      change rather than a rotation: the device edge warms to the National Day
      green and the splash settles in over it. Nothing rotates on this page.
   ========================================================================= */

/* --- the island goes ---------------------------------------------------- */
.cs-scene-phone .cs-notch { display: none; }
.cs-scene-phone .cs-chat-hdr { padding-top: 18px; }
.cs-scene-phone .cs-l-lock { padding-top: 34px; }

/* --- the flip goes ------------------------------------------------------ */
#cs .cs-scene-phone,
#cs[data-beat="3"] .cs-scene-phone, #cs[data-beat="4"] .cs-scene-phone,
#cs[data-beat="5"] .cs-scene-phone, #cs[data-beat="6"] .cs-scene-phone,
#cs[data-beat="7"] .cs-scene-phone, #cs[data-beat="8"] .cs-scene-phone,
#cs[data-beat="9"] .cs-scene-phone {
  transform: none;
}
#cs .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="3"] .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="4"] .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="5"] .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="6"] .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="7"] .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="8"] .cs-scene-phone > .cs-phone-screen,
#cs[data-beat="9"] .cs-scene-phone > .cs-phone-screen {
  transform: none;
}
/* the edge still warms to green on beat 3 — that is the moment now */
.cs-scene-phone { transition: background .7s cubic-bezier(.2, .8, .2, 1); }

/* the splash settles in instead of being revealed by a rotation */
.cs-scene-phone .cs-l-splash {
  transform: scale(1.04);
  transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
}
#cs[data-beat="3"] .cs-l-splash { opacity: 1; transform: scale(1); }

/* The device body keeps a real phone colour the whole way through.
   Hisham: "the phone cover is green — change it to a real phone colour."
   A handset does not change colour halfway through a story; the green belongs
   on the SCREEN (the Moedatech splash at beat 3), which is where it now
   stays. The frame is the same machined titanium at every beat. */
#cs .cs-scene-phone,
#cs[data-beat="3"] .cs-scene-phone, #cs[data-beat="4"] .cs-scene-phone,
#cs[data-beat="5"] .cs-scene-phone, #cs[data-beat="6"] .cs-scene-phone,
#cs[data-beat="7"] .cs-scene-phone, #cs[data-beat="8"] .cs-scene-phone,
#cs[data-beat="9"] .cs-scene-phone {
  background: linear-gradient(145deg, #3d4753 0%, #1b222b 18%, #10151b 50%, #1b222b 82%, #454f5c 100%);
}

/* No text wrapping: the QR caption was capped at 20ch and broke over two
   lines under a 168px code. It is five words; give it the room. */
.cs-qr-note { max-width: none; white-space: nowrap; }

/* ===========================================================================
   The self-building editor on a phone
   Hisham, 2026-09-22: "in the phone view it's not looking good at all — on
   desktop you see them beside each other, so this also needs to be in mobile."

   Desktop is a two-column relationship: the storefront pinned on the left, the
   step cards scrolling past it on the right. On a phone that becomes
   top-and-bottom — the storefront pinned as a band, the cards scrolling
   beneath it — but it was pinned with NO background, so the cards showed
   through it and the two read as one jumbled layer.

   Three fixes: the band gets its own surface and an edge, it is capped so the
   active card keeps real room, and the "which card is active" test now
   measures the space BELOW the band instead of the whole viewport — otherwise
   the card the skin calls active is the one hidden behind the storefront.
   ========================================================================= */
#cs .cs-build { --cs-build-bg: var(--light-sec); }
#cs[data-theme="v4"] .cs-build { --cs-build-bg: #e8dfd5; }

@media (max-width: 959px) {
  .cs-prev-wrap {
    top: 0;
    z-index: 8;
    padding: 14px 0 16px;
    margin-inline: -22px;              /* full-bleed so nothing peeks past it */
    padding-inline: 22px;
    background: var(--cs-build-bg);
    box-shadow: 0 14px 18px -14px rgba(16, 17, 18, .30);
  }
  /* a hairline to land the band against the content below */
  .cs-prev-wrap::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 17, 18, .14), transparent);
  }
  /* the dots belong to the band, not floating under it */
  .cs-prev-dots { margin-top: 18px; padding-bottom: 0; }

  /* the cards get the room the band is not using */
  .cs-step { min-height: 0; padding: 14px 0; scroll-margin-top: 46vh; }
  .cs-steps { padding-top: 18px; }
  .cs-step-card { padding: 20px 18px; }
  .cs-step-t { font-size: 22px; margin-top: 12px; }
}

/* The tallest card (six inventory rows) has to fit in the space the band
   leaves, or its number and kicker hide behind the band and the reader loses
   track of which step they are on. Band trimmed to 36vh and the panel tightened
   so the whole card clears. */
@media (max-width: 959px) {
  .cs-ed { padding: 12px; margin-top: 14px; }
  .cs-ed-crumb { margin-bottom: 9px; }
  .cs-ed-rows { gap: 4px; }
  .cs-ed-row { padding: 5px 8px; }
  .cs-ed-search { padding: 6px 10px; margin-bottom: 6px; }
}

/* ---------------------------------------------------------------------------
   The pinned storefront has to clear the app-install strip
   Hisham, on a phone: the strip sits fixed over the top of the page, so the
   band was pinned UNDERNEATH it — the store header and browser bar were hidden,
   and step 1's number/kicker row went with them.

   The strip already publishes its own height on the root as --mt-appbar-h and
   sets it to 0px as it dismisses, so the band just rides that. No measuring,
   no observer, and it animates down with the strip instead of snapping.
   ------------------------------------------------------------------------ */
@media (max-width: 959px) {
  .cs-prev-wrap { top: var(--mt-appbar-h, 0px); }
  .cs-step { scroll-margin-top: calc(46vh + var(--mt-appbar-h, 0px)); }
}

/* ---------------------------------------------------------------------------
   The section heading pins WITH the storefront
   Hisham: "you didn't put 'Watch your store build itself.' also with it."

   Two stacked stickies rather than a markup change: the heading pins under the
   app strip, the storefront pins under the heading. `--cs-hd-h` is published by
   createstore.js so the second offset always matches the first one's real
   height, whatever the copy wraps to in either language.

   The heading is compacted on mobile — kicker hidden, h2 down to 19px — because
   at its desktop size it would eat the room the step cards need.
   ------------------------------------------------------------------------ */
@media (max-width: 959px) {
  .cs-build-hd {
    position: sticky;
    top: var(--mt-appbar-h, 0px);
    z-index: 9;
    margin-inline: -22px;
    padding: 10px 22px 8px;
    background: var(--cs-build-bg);
    text-align: start;
  }
  .cs-build-hd .cs-build-k { display: none; }
  .cs-build-hd h2 {
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0;
    text-wrap: balance;
  }
  /* the storefront then pins directly beneath the heading */
  .cs-prev-wrap {
    top: calc(var(--mt-appbar-h, 0px) + var(--cs-hd-h, 0px));
    padding-top: 6px;
  }
  .cs-step { scroll-margin-top: calc(46vh + var(--mt-appbar-h, 0px) + var(--cs-hd-h, 0px)); }
}