/* ===== s16 ===== */
@scope (.s16) {
:scope{
  --navy:#0e0d2c; --gold:#e1caa5; --gold-line:#b09143;
  --ink:#0e0d2c; --grey:#1d1d1b; --ph:#5e6163;
  --canvas-w:1920px; --h:1461;
  --font-body:"Assistant","Heebo",system-ui,sans-serif;
  --font-num:"Heebo","Assistant",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
h1,h2,h3,h4,p,figure,blockquote{margin:0;}
body{direction:rtl;font-family:var(--font-body);background:var(--navy);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img{display:block;}

.scaled{position:relative;width:100%;overflow:hidden;height:calc(100vw * var(--h) / 1920);background:var(--navy);}
.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))) translate(-4px,0);background:var(--navy);}
.g-opt,.g-steps,.g-form,.step{display:contents;}
.stage>.g-opt>*,.stage>.g-steps .step>*,.stage>.g-form>*{position:absolute;}

/* ===== TOP CARD — options ===== */
.optcard{left:313px;top:22px;width:1298px;height:518px;background:#fff;border:0;border-radius:0;}
/* Figma 5647:19897 "Subtract": a 10px gold rectangle 1303x513 at (309,2316), square corners,
   whose top line is cut where the section title sits. */
.optcard::after{content:"";position:absolute;left:0;top:5px;width:1303px;height:513px;
  border:10px solid var(--gold);}
.optcard__title{left:536px;top:0;width:856px;text-align:center;font-size:50px;line-height:60px;
  color:var(--navy);font-weight:400;padding:0;
  background-image:linear-gradient(#fff,#fff);background-repeat:no-repeat;
  background-position:center;background-size:740px 100%;}
.optcard__title b{font-weight:800;}
.optphoto{left:995px;top:120px;width:569px;height:364px;border-radius:8px;object-fit:cover;}

.opt{color:var(--navy);text-align:right;}
.opt__h{font-size:26px;line-height:30px;font-weight:800;color:var(--navy);}
.opt__p{font-size:20px;line-height:30px;font-weight:400;color:var(--grey);}

/* ===== MIDDLE — process steps ===== */
.mid-h{position:absolute;left:312px;top:614px;width:1296px;text-align:center;font-size:50px;line-height:88px;
  color:#fff;font-weight:800;}

.st-icon{width:100px;height:100px;object-fit:contain;top:753px;}
.st-line{height:1px;background:var(--gold-line);top:891px;}
.st-chev{top:872px;width:14px;height:24px;}
.st-chev svg{width:100%;height:100%;display:block;}
.st-num{text-align:right;font-family:var(--font-num);font-size:26px;line-height:40px;
  font-weight:500;color:var(--gold);top:918px;}
.st-title{text-align:right;font-size:26px;line-height:34px;font-weight:500;color:var(--gold);top:958px;}
.st-desc{text-align:right;font-size:18px;line-height:26px;font-weight:400;color:#fff;}

/* ===== FORM CARD ===== */
/* Figma 5666:22053: 1301x269, white @90%, 10px #e1caa5 inside stroke, square corners */
.formcard{left:312px;top:1192px;width:1301px;height:269px;background:rgba(255,255,255,.9);
  border-radius:0;border:10px solid var(--gold);}
.fc-title{left:316px;top:1213px;width:1295px;text-align:center;font-size:44px;line-height:60px;
  color:var(--navy);font-weight:900;}
.fc-sub{left:308px;top:1290px;width:1295px;text-align:center;font-size:20px;line-height:26px;
  color:#000;font-weight:400;}
.fc-foot{left:279px;top:1412px;width:1295px;text-align:center;font-size:17px;line-height:22px;
  color:#000;font-weight:400;}

.fc-field{top:1337px;height:52px;background:#e9e9e9;border-radius:4px;border:0;
  display:flex;align-items:center;justify-content:flex-start;padding:0 18px;}
.fc-field span{font-size:19px;color:var(--ph);font-weight:400;}
.fc-field.dd{justify-content:space-between;padding:0 14px;}
.fc-field.dd .chev{width:22px;height:22px;color:#000;}
.fc-field.dd .chev svg{width:100%;height:100%;}
.fc-send{left:357px;top:1336px;width:134px;height:54px;background:var(--navy);border-radius:4px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;font-weight:700;}

/* ===== MOBILE / TABLET ===== */

/* ===== PHONE (≤768) — single-column, fluid type ===== */

/* ============================================================
   RESPONSIVE — tablet ≤1199 / mobile ≤767
   Figma mobile: white "tracks" card (notched title) over a
   white→navy page band, then the steps list, then the form card.
   ============================================================ */

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

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

/* ============================================================
   RESPONSIVE — tablet ≤1199 / mobile ≤767
   Figma mobile: white "tracks" card (notched title) over a
   white→navy page band, then the steps list, then the form card.
   ============================================================ */

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

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

/* ============================================================
   RESPONSIVE — tablet ≤1199 / mobile ≤767
   Figma mobile: white "tracks" card (notched title) over a
   white→navy page band, then the steps list, then the form card.
   ============================================================ */

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

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

/* ============================================================
   RESPONSIVE — tablet ≤1199 / mobile ≤767
   Figma mobile: white "tracks" card (notched title) over a
   white→navy page band, then the steps list, then the form card.
   ============================================================ */

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

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

/* ============================================================
   RESPONSIVE — tablet ≤1199 / mobile ≤767
   Figma mobile: white "tracks" card (notched title) over a
   white→navy page band, then the steps list, then the form card.
   ============================================================ */
@media (max-width:1199px){
  .scaled{height:auto;overflow:visible}
  .scaled>.stage{position:relative;z-index:0;transform:none;width:100%;height:auto;
    padding:0 24px;background:var(--navy);overflow-x:clip}
  .stage>*,.stage>.g-opt>*,.stage>.g-steps .step>*,.stage>.g-form>*{
    position:relative;left:auto!important;top:auto!important;right:auto!important;width:auto!important}

  /* ---- tracks card: white, gold frame, notched heading ---- */
  .g-opt{display:block;position:relative;background:#fff;border:1px solid var(--gold-line);
    padding:0 24px 26px;margin:0 auto;max-width:720px}
  /* full-bleed white band behind the top 40% of the card (Figma: navy starts mid-card) */
  .g-opt > .optcard{display:block!important;position:absolute!important;z-index:-1;
    top:-64px!important;left:-50vw!important;right:-50vw!important;bottom:auto;
    width:auto!important;height:calc(40% + 64px);background:#fff;border:0;border-radius:0}
  .g-opt > .optcard__title{position:relative;display:block;width:auto!important;max-width:100%;
    margin:-19px auto 0;padding:0 10px;background:#fff;text-align:center;
    font-size:32px;line-height:42px;font-weight:400;color:var(--navy)}
  .g-opt > .optphoto{display:block;width:100%!important;height:auto!important;aspect-ratio:294/188;
    object-fit:cover;border-radius:8px;margin:24px 0 0}
  .g-opt > .opt{width:auto!important;text-align:right}
  .g-opt > .opt__h{font-size:22px;line-height:32px;margin:20px 0 0}
  .g-opt > .opt__p{font-size:17px;line-height:28px;margin:7px 0 0}

  /* ---- steps ---- */
  .stage > .mid-h{display:block;width:auto!important;max-width:720px;margin:44px auto 0;
    font-size:32px;line-height:42px;color:#fff;text-align:center}
  .g-steps{display:flex;flex-direction:column;max-width:720px;margin:38px auto 0}
  .step{display:grid;grid-template-columns:70px 1fr;column-gap:16px;align-items:start;
    grid-template-areas:"icon num" "icon title" "icon desc";
    position:relative;padding-bottom:30px}
  .g-steps .step > .st-icon{grid-area:icon;width:70px!important;height:70px!important;margin:0;object-fit:contain}
  .g-steps .step > .st-num{grid-area:num;width:auto!important;text-align:right;font-size:20px;line-height:28px;color:var(--gold)}
  .g-steps .step > .st-title{grid-area:title;width:auto!important;text-align:right;font-size:24px;line-height:34px;color:var(--gold)}
  .g-steps .step > .st-desc{grid-area:desc;width:auto!important;text-align:right;font-size:17px;line-height:27px;color:#fff;margin-top:6px}
  .g-steps .step > .st-line{display:block;position:absolute!important;top:127px!important;right:35px!important;left:auto!important;
    width:1px!important;height:46px;background:var(--gold-line)}
  .g-steps .step > .st-chev{display:block;position:absolute!important;top:159px!important;right:28px!important;left:auto!important;
    width:15px!important;height:15px;transform:rotate(-90deg)}
  .step:last-child > .st-line,.step:last-child > .st-chev{display:none!important}

  /* ---- form card ---- */
  .formcard{display:none!important}
  .g-form{display:flex;flex-wrap:wrap;background:#fff;border:8px solid var(--gold);
    border-radius:0;padding:26px 30px 32px;margin:46px auto 0;max-width:720px}
  .g-form > .fc-title{flex:1 1 100%;width:100%!important;font-size:30px;line-height:40px;font-weight:900;
    margin:0;text-align:center;color:var(--navy)}
  .g-form > .fc-sub{flex:1 1 100%;width:100%!important;font-size:18px;line-height:28px;margin:15px 0 0;
    text-align:center;color:#000}
  .g-form > .fc-field{flex:1 1 100%;width:100%!important;height:52px;margin:17px 0 0;border-radius:2px}
  .g-form > .fc-sub + .fc-field{margin-top:22px}
  .g-form > .fc-field span{font-size:17px}
  .g-form > .fc-field.dd{flex-direction:row-reverse;justify-content:space-between;padding:0 16px}
  .g-form > .fc-send{flex:0 0 auto;width:150px!important;height:54px;margin:22px auto 0;border-radius:2px}
  .g-form > .fc-foot{flex:1 1 100%;width:100%!important;font-size:15px;line-height:22px;margin:16px 0 0;
    text-align:center;color:#000}
}

/* ===== TABLET 768–1199 ===== */
@media (min-width:768px) and (max-width:1199px){
  .g-steps .step > .st-line,.g-steps .step > .st-chev{display:none!important}
  .g-form{gap:0 16px}
  .g-form > .fc-sub + .fc-field,.g-form > .fc-sub + .fc-field + .fc-field{flex:0 1 calc(50% - 8px);width:calc(50% - 8px)!important;margin-top:22px}
  .g-form > .fc-field.dd{flex:1 1 100%}
}

/* ===== MOBILE ≤767 — 1:1 with the Figma mobile frame ===== */
@media (max-width:767px){
  .scaled>.stage{padding:0 15px}
  .g-opt{padding:0 20px 24px}
  .g-opt > .optcard{top:-40px!important;height:calc(40.2% + 40px)}
  .g-opt > .optcard__title{margin-top:-17px;font-size:28px;line-height:38px}
  .g-opt > .optphoto{margin-top:23px}
  .g-opt > .opt__h{font-size:20px;line-height:30px;margin-top:17px}
  .g-opt > .opt__p{font-size:16px;line-height:28px;margin-top:7px}
  .stage > .mid-h{margin-top:42px;font-size:28px;line-height:38px}
  .g-steps{margin-top:38px}
  .step{grid-template-columns:70px 1fr;column-gap:14px;padding-bottom:27px}
  .g-steps .step > .st-num{font-size:20px;line-height:28px}
  .g-steps .step > .st-title{font-size:24px;line-height:34px}
  .g-steps .step > .st-desc{font-size:16px;line-height:26px}
  .g-form{margin-top:41px;padding:23px 28px 34px;border-width:8px}
  .g-form > .fc-title{font-size:24px;line-height:32px}
  .g-form > .fc-sub{font-size:16px;line-height:24px;margin-top:15px}
  .g-form > .fc-field{height:52px;margin-top:17px}
  .g-form > .fc-sub + .fc-field{margin-top:21px}
  .g-form > .fc-field span{font-size:16px}
  .g-form > .fc-send{width:134px!important;height:54px;margin-top:21px;font-size:20px}
  .g-form > .fc-foot{display:none}
}

/* ===== Figma mobile 5647:20493 — corrected type scale ===== */
@media (max-width:767px){
  .g-opt > .optcard__title{font-size:30px;line-height:38px;}
  .g-opt > .opt__h{font-size:21px;line-height:30px;}
  .g-opt > .opt__p{font-size:18px;line-height:28px;}
  .stage > .mid-h{font-size:32px;line-height:38px;}
  .g-steps .step > .st-title{font-size:24px;line-height:36px;}
  .g-steps .step > .st-desc{font-size:18px;line-height:26px;}
  .g-form > .fc-title{font-size:28px;line-height:32px;}
  .g-form > .fc-sub{font-size:18px;line-height:24px;}
}
}