/* Concept Lab v4 — integrated with the complete current HardBoxIran homepage */
.hbi-concept-integrated{margin:0;background:#0a0b0c;color:#fff}.cl-hero{position:relative;min-height:780px;overflow:hidden;background:#0b0c0d;color:#fff}.cl-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.55);transform:scale(1.02)}.cl-hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,8,.36),rgba(6,7,8,.72) 48%,rgba(6,7,8,.93) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.54))}.cl-hero .hbi-editable-hero__header{position:relative;z-index:8;max-width:1440px;margin:auto;padding-inline:clamp(24px,4vw,64px);background:transparent!important}.cl-shell{position:relative;z-index:4;max-width:1440px;margin:auto;padding:150px clamp(24px,4vw,64px) 70px;display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(34px,5vw,84px);align-items:center;direction:rtl}.cl-copy{max-width:670px}.cl-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#d9b158;text-decoration:none;font-size:14px;font-weight:800}.cl-eyebrow:before{content:"";width:34px;height:2px;background:#e51f47}.cl-copy h1{font-size:clamp(48px,5vw,78px);line-height:1.26;margin:26px 0 18px;letter-spacing:-1.6px;color:#fff}.cl-copy p{color:#d0d3d5;font-size:17px;line-height:2.15;max-width:650px;margin:0}.cl-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:28px}.cl-features a{border:1px solid rgba(255,255,255,.13);background:rgba(17,19,21,.55);backdrop-filter:blur(14px);border-radius:14px;padding:13px 14px;color:#ece9e3;text-decoration:none;font-size:12px}.cl-features a:before{content:"✦";color:#d9b158;margin-left:8px}.cl-actions{display:flex;gap:10px;margin-top:22px}.cl-actions a{min-height:50px;padding:0 20px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-size:13px;font-weight:900}.cl-primary{background:linear-gradient(135deg,#e4b95d,#b8842f);color:#17120b}.cl-secondary{border:1px solid rgba(255,255,255,.2);background:rgba(14,16,17,.62);color:#fff}.cl-product-stage{border:1px solid rgba(255,255,255,.12);border-radius:28px;overflow:hidden;background:rgba(9,10,11,.72);backdrop-filter:blur(18px);box-shadow:0 36px 80px rgba(0,0,0,.42);min-height:560px}.cl-stage-head{height:70px;padding:0 22px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.08)}.cl-stage-head span{font:700 9px Arial;letter-spacing:1.8px;color:#8d9499}.cl-stage-head b{font-size:15px}.cl-stage-body{height:430px;position:relative;background:radial-gradient(circle at 50% 50%,rgba(216,172,76,.18),transparent 38%),#0c0e10;overflow:hidden}.cl-stage-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:34px;filter:brightness(.9) saturate(.84);opacity:.78}.cl-stage-body canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}.cl-stage-note{position:absolute;z-index:3;bottom:13px;right:14px;border:1px solid rgba(255,255,255,.1);background:rgba(8,9,10,.72);padding:7px 10px;border-radius:999px;color:#a6adb1;font-size:9px}.cl-tabs{min-height:60px;display:flex;align-items:center;gap:7px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.06)}.cl-tabs button,.cl-tabs a{border:1px solid #34383b;background:#111315;color:#b8bdc1;border-radius:999px;padding:9px 12px;font:800 10px inherit;text-decoration:none;cursor:pointer}.cl-tabs button.is-active{background:#d9ac52;color:#161109;border-color:#d9ac52}.cl-tabs a{margin-right:auto;color:#e1b65c}.cl-scroll{position:absolute;z-index:5;bottom:18px;right:50%;transform:translateX(50%);font-size:10px;color:#9ba1a5}.hbi-concept-integrated .hbi-scroll-story{margin-top:0}
@media(max-width:1080px){.cl-shell{grid-template-columns:1fr;padding-top:130px}.cl-copy{max-width:none;text-align:center}.cl-eyebrow{justify-content:center}.cl-copy p{margin:auto}.cl-features{max-width:760px;margin:28px auto 0}.cl-actions{justify-content:center}.cl-product-stage{max-width:820px;width:100%;margin:auto}.cl-hero{min-height:auto;padding-bottom:45px}}
@media(max-width:760px){.cl-hero .hbi-editable-hero__header{padding-inline:14px}.cl-shell{padding:112px 14px 48px;gap:26px}.cl-copy h1{font-size:40px;line-height:1.3}.cl-copy p{font-size:13px}.cl-features{grid-template-columns:1fr 1fr}.cl-actions{display:grid;grid-template-columns:1fr}.cl-product-stage{min-height:440px;border-radius:20px}.cl-stage-body{height:320px}.cl-stage-head{height:58px}.cl-tabs{flex-wrap:wrap}.cl-tabs a{margin-right:0;width:100%;text-align:center}.cl-scroll{display:none}}

/* v5 QA pass: stable product showcase replaces uncalibrated WebGL in hero. */
.cl-stage-body--stable{background:linear-gradient(145deg,#14171a,#090b0c);isolation:isolate}
.cl-product-visual{position:absolute;inset:0;margin:0;opacity:0;transform:scale(.985);transition:opacity .35s ease,transform .55s cubic-bezier(.2,.7,.2,1);pointer-events:none;overflow:hidden}
.cl-product-visual.is-active{opacity:1;transform:scale(1);pointer-events:auto}
.cl-product-visual:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,8,9,.04) 20%,rgba(7,8,9,.68) 100%),radial-gradient(circle at 60% 38%,transparent 0 22%,rgba(3,4,5,.18) 70%)}
.cl-product-visual img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:saturate(.9) contrast(1.04) brightness(.9)}
.cl-product-visual figcaption{position:absolute;z-index:2;right:20px;bottom:20px;display:grid;gap:3px;text-shadow:0 2px 18px #000}
.cl-product-visual figcaption span{font:700 9px Arial;letter-spacing:1.7px;color:#d9b158}
.cl-product-visual figcaption b{font-size:18px;color:#fff}
.cl-product-visual figcaption small{font-size:10px;color:#c4c9cc}
.cl-stage-note{background:rgba(7,9,10,.78);backdrop-filter:blur(12px);border-color:rgba(255,255,255,.13)}
.cl-product-stage{min-height:540px}
.cl-stage-body{height:410px}
.cl-hero{min-height:760px}
.cl-hero-bg{filter:saturate(.82) brightness(.72);object-position:center 45%}
.cl-hero-veil{background:linear-gradient(90deg,rgba(4,5,6,.20),rgba(4,5,6,.48) 48%,rgba(4,5,6,.83) 100%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.42))}
.cl-copy p{color:#e0e2e3}
.cl-features a{background:rgba(12,14,15,.72)}
@media(max-width:1080px){.cl-hero-bg{filter:saturate(.82) brightness(.62)}.cl-hero-veil{background:linear-gradient(180deg,rgba(4,5,6,.5),rgba(4,5,6,.84))}.cl-shell{padding-top:118px}}
@media(max-width:760px){.cl-stage-body{height:300px}.cl-product-stage{min-height:420px}.cl-product-visual figcaption{right:14px;bottom:14px}.cl-product-visual figcaption b{font-size:15px}.cl-hero{min-height:auto}.cl-copy h1{font-size:38px}}


/* v5.1 BRIGHT PASS — clearer premium light treatment for the full first view */
.hbi-concept-integrated{background:#f6f3ee;color:#171717}
.cl-hero{background:linear-gradient(180deg,#f7f4ee 0%,#efe7dc 100%);color:#171717}
.cl-hero-bg{filter:saturate(.92) brightness(1.08) contrast(.95);opacity:.52;object-position:center 42%}
.cl-hero-veil{background:
  linear-gradient(90deg,rgba(247,243,235,.72),rgba(247,243,235,.83) 46%,rgba(247,243,235,.95) 100%),
  linear-gradient(180deg,rgba(255,255,255,.05),rgba(237,231,220,.22))}
.cl-copy h1{color:#151515;text-shadow:none}
.cl-copy p{color:#4f5961}
.cl-eyebrow{color:#bb8729}
.cl-eyebrow:before{background:#d61b3f}
.cl-features a{
  border:1px solid rgba(29,31,33,.08);
  background:rgba(255,255,255,.76);
  color:#252c31;
  box-shadow:0 16px 36px rgba(49,39,18,.06);
  backdrop-filter:blur(14px)
}
.cl-features a:before{color:#d2a044}
.cl-actions{margin-top:24px}
.cl-primary{box-shadow:0 14px 28px rgba(191,141,37,.18)}
.cl-secondary{border:1px solid rgba(17,18,19,.13);background:#fff;color:#161616}
.cl-product-stage{
  border:1px solid rgba(28,24,20,.08);
  background:rgba(255,255,255,.8);
  box-shadow:0 34px 70px rgba(37,29,15,.12)
}
.cl-stage-head{background:rgba(255,255,255,.74);border-bottom:1px solid rgba(16,18,20,.08)}
.cl-stage-head span{color:#7b858c}
.cl-stage-head b{color:#171717}
.cl-stage-body{background:radial-gradient(circle at 50% 38%,rgba(224,182,77,.2),transparent 34%),linear-gradient(180deg,#f8f6f1,#ece5d9)}
.cl-stage-body--stable{background:linear-gradient(145deg,#fbf8f2,#ebe4d8)}
.cl-stage-fallback{filter:brightness(1.03) saturate(.95);opacity:.92}
.cl-product-visual:before{background:linear-gradient(180deg,rgba(255,255,255,.02) 12%,rgba(13,15,17,.22) 100%),radial-gradient(circle at 56% 38%,rgba(255,255,255,.08),rgba(0,0,0,.08) 68%)}
.cl-product-visual img{filter:saturate(.98) contrast(1.04) brightness(1.04)}
.cl-product-visual figcaption{padding:10px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(14,16,17,.02),rgba(14,16,17,.25));backdrop-filter:blur(8px)}
.cl-product-visual figcaption span{color:#efc671}
.cl-product-visual figcaption b{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.32)}
.cl-product-visual figcaption small{color:#eef0f2}
.cl-tabs{min-height:66px;border-top:1px solid rgba(16,18,20,.08);background:rgba(255,255,255,.56)}
.cl-tabs button,.cl-tabs a{border-color:#ded5c6;background:#fff;color:#535a60}
.cl-tabs button:hover{border-color:#d3b26f;color:#1e2124}
.cl-tabs button.is-active{background:#ddb057;color:#151009;border-color:#ddb057}
.cl-tabs a{color:#b88425;border-color:#eadcb7;background:#fff7e7}
.cl-stage-note{background:rgba(255,255,255,.88);color:#5e666d;border-color:rgba(18,18,18,.08)}
.cl-scroll{color:#7e878d}

/* brighter, clearer header for concept-lab */
.hbi-concept-integrated .hbi-editable-hero__header{
  border-bottom:1px solid rgba(22,24,26,.09)!important;
  background:rgba(255,255,255,.34)!important;
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
  border-radius:0 0 18px 18px!important;
}
.hbi-concept-integrated .hbi-editable-hero__brand-copy,
.hbi-concept-integrated .hbi-editable-hero__brand-copy a,
.hbi-concept-integrated .hbi-editable-hero__nav a{color:#1a1d20!important;text-shadow:none!important}
.hbi-concept-integrated .hbi-editable-hero__brand-copy a:last-child{color:#b78121!important}
.hbi-concept-integrated .hbi-editable-hero__nav a:hover,
.hbi-concept-integrated .hbi-editable-hero__nav a:focus-visible,
.hbi-concept-integrated .hbi-editable-hero__nav a.is-active{color:#000!important}
.hbi-concept-integrated .hbi-editable-hero__actions>a:first-child{color:#1b1e20!important}
.hbi-concept-integrated .hbi-editable-hero__actions .is-catalog{box-shadow:0 12px 24px rgba(183,11,39,.16)}
.hbi-concept-integrated .hbi-editable-hero__menu-button{background:rgba(255,255,255,.7)!important;color:#131619!important;border:1px solid rgba(15,16,18,.08)!important}
.hbi-concept-integrated .app-topbar{
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid rgba(18,20,22,.09)!important;
  box-shadow:0 10px 28px rgba(10,10,10,.08)!important
}
.hbi-concept-integrated .app-topbar__brand span,
.hbi-concept-integrated .app-topbar__nav a{color:#202326!important}
.hbi-concept-integrated .app-topbar__nav a:hover,
.hbi-concept-integrated .app-topbar__nav a.is-active,
.hbi-concept-integrated .app-topbar__nav a[aria-current="page"]{color:#000!important}
.hbi-concept-integrated .app-mobile-menu{
  background:rgba(255,255,255,.98)!important;
  border:1px solid rgba(18,20,22,.09)!important;
  box-shadow:0 22px 56px rgba(10,10,10,.12)!important
}
.hbi-concept-integrated .app-mobile-menu a{color:#202326!important;border-bottom:1px solid rgba(18,20,22,.07)!important}
.hbi-concept-integrated .app-mobile-menu a:hover,
.hbi-concept-integrated .app-mobile-menu a:focus-visible,
.hbi-concept-integrated .app-mobile-menu a.is-active{background:rgba(0,0,0,.035)!important;color:#000!important}
.hbi-concept-integrated .app-menu-btn{background:rgba(255,255,255,.8)!important;color:#15181b!important;border:1px solid rgba(18,20,22,.08)!important}

@media(max-width:1080px){
  .cl-hero-bg{filter:saturate(.92) brightness(.98) contrast(.96);opacity:.5}
  .cl-hero-veil{background:linear-gradient(180deg,rgba(247,243,235,.72),rgba(247,243,235,.9))}
}
@media(max-width:760px){
  .cl-copy h1{font-size:36px;line-height:1.32}
  .cl-copy p{font-size:14px;line-height:2}
  .cl-product-stage{border-radius:18px}
  .cl-product-visual figcaption{right:12px;left:12px;bottom:12px}
  .cl-features{grid-template-columns:1fr}
}


/* v5.2 REFINED — tighten header-to-content spacing and replace flat white hero with premium warm neutral */
.hbi-concept-integrated{background:#ece4d7;color:#171717}
.cl-hero{
  background:linear-gradient(180deg,#e9dfd0 0%,#e3d8ca 52%,#ddd2c4 100%);
  color:#171717;
}
.cl-shell{
  padding:104px clamp(24px,4vw,64px) 62px;
  align-items:start;
}
.cl-copy{padding-top:18px}
.cl-hero-bg{
  filter:saturate(.86) brightness(.84) contrast(.9);
  opacity:.36;
  object-position:center 40%;
}
.cl-hero-veil{background:
  linear-gradient(90deg,rgba(233,223,208,.42),rgba(233,223,208,.58) 46%,rgba(233,223,208,.78) 100%),
  linear-gradient(180deg,rgba(255,255,255,.05),rgba(107,89,63,.08));
}
.cl-copy h1{color:#25313f}
.cl-copy p{color:#55606a}
.cl-eyebrow{color:#aa7722}
.cl-features a{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(41,33,24,.08);
  box-shadow:0 14px 32px rgba(68,52,26,.06)
}
.cl-secondary{background:rgba(255,255,255,.82);color:#171717}
.cl-product-stage{
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(247,241,233,.9));
  border:1px solid rgba(49,37,21,.08);
  box-shadow:0 24px 60px rgba(45,34,20,.12)
}
.cl-stage-head{background:rgba(255,255,255,.78)}
.cl-stage-body{background:radial-gradient(circle at 50% 34%,rgba(219,176,79,.16),transparent 34%),linear-gradient(180deg,#eee5d8,#ddd2c4)}
.cl-stage-body--stable{background:linear-gradient(145deg,#ece2d5,#d9cebf)}
.cl-product-visual:before{background:linear-gradient(180deg,rgba(255,255,255,.01) 18%,rgba(14,15,18,.30) 100%),radial-gradient(circle at 56% 38%,rgba(255,255,255,.06),rgba(0,0,0,.10) 70%)}
.cl-tabs{background:rgba(255,255,255,.58)}
.cl-stage-note{background:rgba(255,255,255,.82)}

.hbi-concept-integrated .hbi-editable-hero__header{
  background:rgba(255,255,255,.48)!important;
  border-bottom:1px solid rgba(34,28,22,.08)!important;
}

@media(max-width:1080px){
  .cl-shell{padding-top:96px;gap:28px}
  .cl-copy{padding-top:10px}
  .cl-hero-bg{opacity:.32;filter:saturate(.84) brightness(.8) contrast(.9)}
  .cl-hero-veil{background:linear-gradient(180deg,rgba(233,223,208,.58),rgba(233,223,208,.78))}
}
@media(max-width:760px){
  .cl-shell{padding:86px 14px 44px;gap:22px}
  .cl-copy{padding-top:0}
}


/* v5.3 — spacing/composition correction from annotated desktop screenshot */
@media (min-width:1081px){
  /* Header-to-eyebrow gap tightened to roughly 1cm visually */
  .cl-shell{
    padding-top:88px;
    grid-template-columns:.86fr 1.14fr;
    gap:34px;
    align-items:start;
  }
  .cl-copy{padding-top:0;margin-top:0}
  .cl-eyebrow{margin-top:0}

  /* Make the product experience substantially larger and use the empty left area */
  .cl-product-stage{
    min-height:610px;
    width:112%;
    margin-left:-10%;
    border-radius:26px;
  }
  .cl-stage-head{height:68px;padding-inline:24px}
  .cl-stage-body{height:475px}
  .cl-tabs{min-height:67px;padding:10px 16px}

  /* Keep the title block visually aligned with the enlarged product card */
  .cl-copy h1{margin-top:18px;margin-bottom:14px}
  .cl-copy p{margin-top:0}
  .cl-features{margin-top:20px}
  .cl-actions{margin-top:16px}
}

@media (min-width:1280px){
  .cl-shell{padding-top:84px;gap:38px}
  .cl-product-stage{width:116%;margin-left:-14%;min-height:630px}
  .cl-stage-body{height:495px}
}


/* v5.4 CENTERED COMPOSITION — matches the user's Photoshop composition */
.cl-hero{min-height:720px}
.cl-shell{
  width:min(1260px,calc(100% - 64px));
  max-width:none;
  margin:0 auto;
  padding:86px 0 54px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,4.4vw,68px);
  align-items:center;
  direction:ltr;
}
.cl-product-stage,.cl-copy{direction:rtl;min-width:0}
.cl-copy{
  max-width:560px;
  width:100%;
  justify-self:center;
  padding-top:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.cl-eyebrow{align-self:flex-start}
.cl-copy h1{
  font-size:clamp(42px,4.2vw,66px);
  line-height:1.28;
  letter-spacing:-1.3px;
  margin:18px 0 16px;
  max-width:560px;
}
.cl-copy p{font-size:15px;line-height:2.05;max-width:540px}
.cl-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.cl-features a{min-height:48px;display:flex;align-items:center}
.cl-actions{margin-top:18px}
.cl-product-stage{
  width:100%;
  max-width:610px;
  min-height:500px;
  justify-self:center;
}
.cl-stage-head{height:62px}
.cl-stage-body{height:370px}
.cl-tabs{min-height:62px}
.cl-product-visual figcaption{right:18px;bottom:16px}
.cl-scroll{bottom:12px}

@media(max-width:1080px){
  .cl-shell{
    width:min(900px,calc(100% - 36px));
    padding:78px 0 46px;
    grid-template-columns:1fr;
    direction:rtl;
    gap:26px;
  }
  .cl-copy{max-width:700px;text-align:center;align-items:center;order:1}
  .cl-eyebrow{align-self:center}
  .cl-copy h1,.cl-copy p{max-width:700px}
  .cl-product-stage{max-width:700px;order:2}
  .cl-features{width:100%;max-width:650px}
  .cl-actions{justify-content:center}
}
@media(max-width:760px){
  .cl-shell{width:calc(100% - 24px);padding:74px 0 38px;gap:20px}
  .cl-copy h1{font-size:36px;line-height:1.32;margin:14px 0 12px}
  .cl-copy p{font-size:13px;line-height:2}
  .cl-features{grid-template-columns:1fr}
  .cl-product-stage{min-height:410px}
  .cl-stage-body{height:290px}
  .cl-stage-head{height:56px}
  .cl-tabs{min-height:60px}
}


/* v5.5 EXACT PHOTOSHOP COMPOSITION — fixed desktop proportions from user reference */
@media (min-width:1081px){
  .cl-hero{min-height:650px}
  .cl-shell{
    width:min(1180px,calc(100% - 96px));
    margin:0 auto;
    padding:72px 0 48px;
    grid-template-columns:minmax(0,56fr) minmax(0,44fr);
    gap:56px;
    align-items:center;
    direction:ltr;
  }
  .cl-product-stage{
    direction:rtl;
    width:100%;
    max-width:none;
    min-height:0;
    height:auto;
    margin:0;
    border-radius:22px;
    justify-self:stretch;
  }
  .cl-stage-head{height:50px;padding:0 18px}
  .cl-stage-head span{font-size:7px;letter-spacing:1.5px}
  .cl-stage-head b{font-size:12px}
  .cl-stage-body{height:350px}
  .cl-tabs{min-height:52px;padding:7px 11px;gap:6px}
  .cl-tabs button,.cl-tabs a{padding:7px 10px;font-size:9px}
  .cl-product-visual figcaption{right:14px;bottom:12px;gap:2px}
  .cl-product-visual figcaption b{font-size:14px}
  .cl-product-visual figcaption small{font-size:8px}

  .cl-copy{
    direction:rtl;
    width:100%;
    max-width:none;
    justify-self:stretch;
    align-self:center;
    padding:0;
    text-align:right;
    display:block;
  }
  .cl-eyebrow{font-size:10px;gap:8px;margin:0 0 12px}
  .cl-eyebrow:before{width:26px}
  .cl-copy h1{
    font-size:clamp(38px,3.15vw,52px);
    line-height:1.22;
    letter-spacing:-1px;
    margin:0 0 18px;
    max-width:500px;
    font-weight:900;
  }
  .cl-copy p{
    max-width:470px;
    font-size:12px;
    line-height:2;
    margin:0;
  }
  .cl-features{
    width:100%;
    max-width:480px;
    margin-top:20px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .cl-features a{
    min-height:42px;
    padding:10px 11px;
    border-radius:11px;
    font-size:10px;
  }
  .cl-actions{margin-top:14px;gap:8px}
  .cl-actions a{
    min-height:42px;
    padding:0 15px;
    border-radius:10px;
    font-size:10px;
  }
  .cl-scroll{bottom:8px}
}

@media (min-width:1400px){
  .cl-shell{width:min(1240px,calc(100% - 120px));gap:64px;padding-top:76px}
  .cl-stage-body{height:365px}
  .cl-copy h1{font-size:50px}
}


/* v5.6 REFERENCE MATCH — composition follows the user's Photoshop mockup, without changing copy */
@media (min-width:1081px){
  .cl-hero{min-height:720px}
  .cl-shell{
    width:min(1288px,calc(100% - 96px));
    max-width:none;
    margin:0 auto;
    padding:86px 0 54px;
    display:grid;
    grid-template-columns:minmax(0,41%) minmax(0,54%);
    gap:5%;
    align-items:center;
    direction:rtl;
  }
  .cl-copy{
    width:100%;
    max-width:530px;
    justify-self:start;
    padding-top:0;
    text-align:right;
  }
  .cl-eyebrow{
    margin:0 0 16px;
    font-size:11px;
    gap:9px;
  }
  .cl-copy h1{
    max-width:530px;
    margin:0 0 18px;
    font-size:clamp(46px,3.35vw,59px);
    line-height:1.22;
    letter-spacing:-1.7px;
    font-weight:950;
  }
  .cl-copy p{
    max-width:520px;
    margin:0;
    font-size:13px;
    line-height:2.05;
  }
  .cl-features{
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:28px;
  }
  .cl-features a{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:11px 14px;
    border-radius:12px;
    font-size:11px;
  }
  .cl-actions{
    justify-content:flex-start;
    margin-top:12px;
    gap:10px;
  }
  .cl-actions a{
    min-height:46px;
    padding:0 18px;
    border-radius:11px;
    font-size:11px;
  }
  .cl-product-stage{
    width:100%;
    max-width:none;
    min-height:0;
    justify-self:end;
    border-radius:20px;
    box-shadow:0 22px 50px rgba(45,34,20,.10);
  }
  .cl-stage-head{
    height:48px;
    padding:0 17px;
  }
  .cl-stage-head span{font-size:7px;letter-spacing:1.55px}
  .cl-stage-head b{font-size:12px}
  .cl-stage-body{height:382px}
  .cl-product-visual figcaption{right:14px;bottom:13px;gap:1px}
  .cl-product-visual figcaption span{font-size:7px}
  .cl-product-visual figcaption b{font-size:14px}
  .cl-product-visual figcaption small{font-size:8px}
  .cl-stage-note{font-size:7px;padding:5px 8px;bottom:10px;left:12px;right:auto}
  .cl-tabs{
    min-height:48px;
    padding:7px 12px;
    gap:6px;
  }
  .cl-tabs button,.cl-tabs a{
    padding:7px 11px;
    font-size:9px;
  }
  .cl-scroll{bottom:10px;font-size:8px}
}

@media (min-width:1400px){
  .cl-shell{
    width:min(1320px,calc(100% - 110px));
    grid-template-columns:minmax(0,40%) minmax(0,55%);
    gap:5%;
  }
  .cl-copy{max-width:545px}
  .cl-copy h1{max-width:545px;font-size:58px}
  .cl-copy p{max-width:535px}
  .cl-stage-body{height:398px}
}