/* ===== s21 ===== */
@scope (.s21) {
  :scope{
    --navy:#0e0d2c;
    --gold-border:#e1caa5;
    --field-bg:rgba(7,28,55,0.10);
    --ph:#5e6163;
    --canvas-w:1920px;
    --h:1122;
    --font-body:"Assistant","Heebo",system-ui,sans-serif;
    --font-head:"Heebo","Assistant",sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{background:#fff;font-family:var(--font-body);}

  /* scaled/stage convention (matches base.css) */
  .scaled{position:relative;width:100%;overflow:hidden;height:calc(100vw * var(--h) / 1920);}
  .scaled > .stage{position:absolute;top:0;right:0;width:var(--canvas-w);height:calc(var(--h) * 1px);transform-origin:top right;transform:scale(calc(100vw / var(--canvas-w)));}

  .yd5{position:absolute;inset:0;background:#fff;}

  /* ===== FAQ ===== */
  .yd5__title{position:absolute;left:534px;top:0;width:854px;height:120px;
    text-align:center;font-family:var(--font-head);font-weight:400;font-size:50px;line-height:60px;color:var(--navy);}
  .yd5__title b{font-weight:900;}

  .yd5-q{position:absolute;left:534px;width:854px;height:62px;background:#f2f2f2;}
  .yd5-q__txt{position:absolute;right:81px;top:0;height:62px;display:flex;align-items:center;
    font-family:var(--font-head);font-weight:400;font-size:23px;color:#000;direction:rtl;}
  .yd5-q__plus{position:absolute;right:16px;top:16px;width:30px;height:30px;}
  .yd5-q__plus::before,.yd5-q__plus::after{content:"";position:absolute;background:var(--navy);}
  .yd5-q__plus::before{left:14px;top:0;width:2px;height:30px;}
  .yd5-q__plus::after{left:0;top:14px;width:30px;height:2px;}

  /* ===== FOOTER (navy slab, sits behind banner) ===== */
  .yd5-foot{position:absolute;left:0;top:824px;width:1920px;height:298px;background:var(--navy);}
  .yd5-foot__copy{position:absolute;left:0;top:177px;width:1920px;text-align:center;
    font-family:var(--font-head);font-weight:400;font-size:16px;color:#fff;direction:rtl;}
  .yd5-foot__brand{position:absolute;left:0;top:205px;width:1920px;height:24px;
    display:flex;justify-content:center;align-items:center;gap:8px;direction:rtl;}
  .yd5-foot__brand span{font-family:var(--font-head);font-weight:400;font-size:16px;color:#fff;}
  .yd5-foot__brand img{width:75px;height:16px;display:block;}

  /* ===== CTA BANNER (floats over navy) ===== */
  .yd5-cta{position:absolute;left:309px;top:695px;width:1301px;height:269px;
    background:rgba(255,255,255,0.92);border:10px solid var(--gold-border);z-index:5;}
  .yd5-cta__h{position:absolute;left:0;top:22px;width:100%;text-align:center;
    font-family:var(--font-head);font-weight:900;font-size:44px;line-height:52px;color:var(--navy);direction:rtl;}
  .yd5-cta__sub{position:absolute;left:0;top:76px;width:100%;text-align:center;
    font-family:var(--font-body);font-weight:400;font-size:20px;color:#000;direction:rtl;}

  .yd5-cta__row{position:absolute;top:145px;left:0;width:100%;height:54px;}
  .yd5-field{position:absolute;top:0;height:52px;background:var(--field-bg);
    border:1px solid rgba(0,0,0,0.14);display:flex;align-items:center;direction:rtl;}
  .yd5-field span{font-family:var(--font-head);font-weight:400;font-size:19px;color:var(--ph);
    padding-right:16px;}
  .yd5-field--name{right:2px;width:335px;}
  .yd5-field--phone{right:364px;width:338px;}
  .yd5-field--src{right:725px;width:337px;}
  .yd5-field--src .yd5-chev{position:absolute;left:8px;top:14px;width:24px;height:24px;}
  .yd5-field--src .yd5-chev img{width:24px;height:24px;display:block;}

  .yd5-btn{position:absolute;top:-1px;right:1069px;width:134px;height:54px;background:var(--navy);
    display:flex;align-items:center;justify-content:center;}
  .yd5-btn span{font-family:var(--font-head);font-weight:700;font-size:20px;color:#fff;}

  .yd5-cta__foot{position:absolute;left:0;top:220px;width:100%;text-align:center;
    font-family:var(--font-head);font-weight:400;font-size:17px;color:#000;direction:rtl;}

  /* ===== tablet ===== */

/* ============================================================
   RESPONSIVE — tablet ≤1199 / mobile ≤767
   Figma mobile: FAQ list, CTA card straddling the navy footer.
   ============================================================ */

/* ===== TABLET 768–1199 ===== */

/* ===== MOBILE ≤767 — 1:1 with the Figma mobile frame ===== */

/* ============================================================
   RESPONSIVE — tablet ≤1199 / mobile ≤767
   Figma mobile: FAQ list, CTA card straddling the navy footer.
   ============================================================ */
@media (max-width:1199px){
  .scaled{height:auto;overflow:visible}
  .scaled > .stage{position:static;width:100%;height:auto;transform:none}
  .yd5{position:static;padding:0}
  .yd5__title,.yd5-q,.yd5-foot,.yd5-cta,.yd5-cta__row,.yd5-field,.yd5-btn{position:static}

  .yd5__title{width:auto;max-width:720px;height:auto;margin:0 auto;padding:0 24px;
    font-size:34px;line-height:44px}

  .yd5-q{position:relative;left:auto!important;top:auto!important;width:auto;max-width:720px;
    height:auto;min-height:62px;margin:0 auto 12px;padding:12px 60px 12px 24px;
    display:flex;align-items:center;background:#f2f2f2}
  .yd5__title + .yd5-q{margin-top:27px}
  .yd5-q__txt{position:static;right:auto;height:auto;width:100%;
    justify-content:flex-start;text-align:right;font-size:17px;line-height:24px}
  .yd5-q__plus{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:20px;height:20px}
  .yd5-q__plus::before{left:9px;top:0;width:2px;height:20px}
  .yd5-q__plus::after{left:0;top:9px;width:20px;height:2px}

  /* CTA card — floats over the navy footer exactly like the desktop banner */
  .yd5-cta{position:relative;z-index:2;left:auto;top:auto;right:auto;
    width:auto;max-width:720px;height:auto;
    margin:52px auto 0;padding:26px 30px 32px;border-width:8px;background:#fff;
    display:flex;flex-wrap:wrap}
  .yd5-cta__h{position:static;width:100%;flex:1 1 100%;font-size:30px;line-height:40px;margin:0}
  .yd5-cta__sub{position:static;width:100%;flex:1 1 100%;font-size:18px;line-height:28px;margin:15px 0 0}
  .yd5-cta__row{position:static;width:100%;flex:1 1 100%;height:auto;display:flex;flex-wrap:wrap}
  .yd5-field{position:relative;right:auto!important;width:100%!important;flex:1 1 100%;
    height:52px;margin:17px 0 0}
  .yd5-cta__row .yd5-field:first-child{margin-top:22px}
  .yd5-field span{font-size:17px}
  .yd5-field--src{justify-content:space-between;padding-left:12px}
  .yd5-field--src .yd5-chev{position:static;width:24px;height:24px;flex:0 0 24px}
  .yd5-btn{position:relative;right:auto;top:auto;width:150px;height:54px;flex:0 0 auto;
    margin:22px auto 0;order:9}
  .yd5-cta__foot{position:static;width:100%;flex:1 1 100%;font-size:15px;line-height:22px;margin:16px 0 0}

  /* navy footer slab starts 299px above the bottom of the CTA card (Figma) */
  .yd5-foot{position:relative;z-index:1;left:auto;top:auto;right:auto;
    width:auto;height:auto;margin:-299px 0 0;padding:325px 20px 21px}
  .yd5-foot__copy,.yd5-foot__brand{position:static;width:100%;top:auto;left:auto}
  .yd5-foot__copy{font-size:15px;line-height:22px}
  .yd5-foot__brand{margin-top:8px}
}

/* ===== TABLET 768–1199 ===== */
@media (min-width:768px) and (max-width:1199px){
  .yd5-cta{gap:0 16px}
  .yd5-cta__row .yd5-field:first-child,.yd5-cta__row .yd5-field:nth-child(2){
    flex:0 1 calc(50% - 8px);width:calc(50% - 8px)!important;margin-top:22px}
  .yd5-field--src{flex:1 1 100%}
}

/* ===== MOBILE ≤767 — 1:1 with the Figma mobile frame ===== */
@media (max-width:767px){
  .yd5__title{padding:0 15px;font-size:28px;line-height:38px}
  .yd5__title + .yd5-q{margin-top:27px}
  .yd5-q{margin:0 15px 12px;min-height:62px;padding:10px 56px 10px 20px}
  .yd5-q__txt{font-size:15px;line-height:21px}
  .yd5-q__plus{right:16px}
  .yd5-cta{margin:52px 16px 0;padding:23px 28px 34px}
  .yd5-cta__h{font-size:24px;line-height:32px}
  .yd5-cta__sub{font-size:16px;line-height:24px;margin-top:15px}
  .yd5-field{height:52px;margin-top:17px}
  .yd5-cta__row .yd5-field:first-child{margin-top:21px}
  .yd5-field span{font-size:16px}
  .yd5-btn{width:134px;height:54px;margin-top:21px}
  .yd5-cta__foot{display:none}
  .yd5-foot{padding:325px 20px 21px}
  .yd5-foot__copy{font-size:14px;line-height:20px}
}

/* ===== Figma mobile 5647:20493 — corrected type scale ===== */
@media (max-width:767px){
  .yd5__title{font-size:32px;line-height:38px;}
  .yd5-q__txt{font-size:18px;line-height:21px;}
  .yd5-cta__h{font-size:28px;line-height:32px;}
  .yd5-cta__sub{font-size:18px;line-height:24px;}
  .yd5-foot__copy{font-size:13px;line-height:18px;}
}
}