/** Shopify CDN: Minification failed

Line 334:2 Unexpected "}"

**/

.fitra-landing-frame,.fitra-landing-frame *{box-sizing:border-box}
.fitra-landing-frame{width:min(390px,100%);margin-inline:auto;overflow:hidden;background:#FBF9F5;color:#17303B;font-family:"Tajawal",Arial,sans-serif;direction:rtl;text-align:right}
.fitra-landing-frame img{max-width:100%}
.fitra-landing-frame .s3v6-equation,.fitra-landing-frame .formula,.fitra-landing-frame .math{direction:ltr}
.s7 {
    padding: 30px 0 42px;
  }

  .heading {
    padding: 0 20px;
    margin-bottom: 4px;
  }

  .heading h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.28;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #17303B;
  }

  /* Product is not inside a card. It floats directly on the page. */
  .product-stage {
    position: relative;
    height: 444px;
    margin-top: -4px;
    padding-bottom: 34px; /* protected zone so the info card never covers rings */
  }

  .product-stage::before {
    content: "";
    position: absolute;
    inset: 52px 30px 60px;
    border-radius: 50%;
    background: rgba(23,107,122,.075);
    filter: blur(34px);
    transform: scale(.88);
  }

  .product {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 4px;
    width: 108%;
    max-width: none;
    transform: translateX(-50%);
    display: block;
    filter:
      drop-shadow(0 14px 18px rgba(17,86,98,.10))
      drop-shadow(0 3px 3px rgba(23,48,59,.06));
    user-select: none;
    -webkit-user-drag: none;
  }

  /*
    One integrated floating panel, inspired by a booking-sheet UI.
    It overlaps only the protected empty zone below the product.
  */
  .content-card {
    position: relative;
    z-index: 5;
    width: 100%;
    margin: 6px 0 0;
    padding: 18px 16px 16px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(23,48,59,.065);
    border-radius: 30px 30px 0 0;
    box-shadow:
      0 18px 42px rgba(23,48,59,.10),
      0 2px 8px rgba(23,48,59,.045);
  }

  .handle {
    width: 38px;
    height: 4px;
    border-radius: 99px;
    margin: -6px auto 15px;
    background: #E4E9EA;
  }

  .total {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 12px;
    direction: rtl;
  }

  .total-number {
    font-size: 55px;
    line-height: .82;
    font-weight: 850;
    letter-spacing: -0.04em;
    color: #115662;
  }

  .total-copy {
    max-width: 150px;
    padding-bottom: 1px;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
    color: #17303B;
  }

  .divider {
    height: 1px;
    margin: 18px 0 13px;
    background: rgba(23,48,59,.085);
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
    direction: rtl;
  }

  .stat {
    position: relative;
    min-width: 0;
    padding: 9px 2px 8px;
    text-align: center;
  }

  .stat + .stat::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    right: 0;
    width: 1px;
    background: rgba(23,48,59,.075);
  }

  .stat strong {
    display: block;
    font-size: 19px;
    line-height: 1;
    font-weight: 800;
    color: #17303B;
  }

  .stat span {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1;
    font-weight: 650;
    color: #6A7D84;
  }

  /* Multiplication is the only highlighted count. */
  .stat.focus {
    margin: -3px 3px;
    padding: 11px 3px 9px;
    border-radius: 17px;
    background: #EAF4F6;
    box-shadow: inset 0 0 0 1px rgba(23,107,122,.10);
  }

  .stat.focus::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 28px;
    height: 3px;
    border-radius: 99px;
    background: #176B7A;
    transform: translate(-50%, -50%);
  }

  .stat.focus strong {
    font-size: 23px;
    color: #115662;
  }

  .stat.focus span {
    font-weight: 800;
    color: #115662;
  }

  @media (max-width: 350px) {
    .heading h2 { font-size: 25px; }
    .product-stage { height: 402px; }
    .total-number { font-size: 49px; }
    .total-copy { font-size: 14px; }
  }

  @media (min-width: 600px) {
    body { padding: 24px 0; }
    .mobile-page {
      min-height: calc(100vh - 48px);
      border-radius: 28px;
      box-shadow: 0 18px 60px rgba(0,0,0,.12);
    }
  }

  
  /* Continuation of the SAME white floating card */
  .details-divider{
    height:1px;
    margin:22px -16px 18px;
    background:rgba(23,48,59,.075);
  }

  .media-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 12px;
    direction:rtl;
    width:100%;
    align-items:stretch;
  }

  .media-item{
    margin:0;
    position:relative;
    min-width:0;
    overflow:hidden;
    border-radius:20px;
    background:#FFFFFF;
    border:1px solid rgba(23,48,59,.055);
    box-shadow:
      0 13px 27px rgba(23,48,59,.105),
      0 3px 7px rgba(23,48,59,.045);
    display:flex;
    flex-direction:column;
  }

  .media-image{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:#F8EEE2;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .media-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
  }

  .media-copy{
    min-height:72px;
    flex:1;
    padding:11px 11px 12px;
    text-align:right;
    background:#FFFFFF;
    color:#17303B;
  }

  .media-copy strong{
    display:block;
    font-size:12px;
    line-height:1.45;
    font-weight:800;
    color:#17303B;
  }

  .media-copy span{
    display:block;
    margin-top:4px;
    font-size:10px;
    line-height:1.45;
    font-weight:600;
    color:#6B7C83;
  }

  .multiplication-focus{
    margin:28px -16px -16px;
    padding:22px 18px 24px;
    background:
      linear-gradient(180deg,rgba(234,244,246,.78),rgba(234,244,246,.48));
    border-top:1px solid rgba(23,107,122,.09);
  }

  .multiplication-head{
    display:flex;
    align-items:flex-end;
    gap:11px;
  }

  .multiplication-number{
    flex:0 0 auto;
    font-size:58px;
    line-height:.78;
    font-weight:900;
    letter-spacing:-.045em;
    color:#115662;
  }

  .multiplication-title{
    padding-bottom:2px;
    font-size:15px;
    line-height:1.35;
    font-weight:800;
    color:#17303B;
  }

  .multiplication-copy{
    margin:13px 0 0;
    font-size:12.5px;
    line-height:1.75;
    font-weight:600;
    color:#536971;
  }

  @media (max-width:350px){
    .media-grid{gap:12px 10px}
    .media-copy{min-height:68px;padding:10px 9px 11px}
    .media-copy strong{font-size:11px}
    .media-copy span{font-size:9.4px}
    .multiplication-number{font-size:52px}
  }
.media-copy strong{font-size:11px}
    .media-copy span{font-size:9px}
    .multiplication-number{font-size:52px}
  }



/* ===== S8 ===== */

  *{box-sizing:border-box}
  html,body{
    margin:0;
    padding:0;
    background:#ECECEC;
    font-family:"Tajawal","Arial",sans-serif;
    color:#17303B;
  }

  body{
    min-height:100vh;
    display:flex;
    justify-content:center;
  }

  .mobile-page{
    width:min(390px,100vw);
    min-height:100vh;
    overflow:hidden;
    background:#FBF9F5;
  }

  .s8{
    position:relative;
    padding:48px 0 54px;
  }

  /* transition from the visually rich S7 into a quieter decision section */
  .s8::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(23,48,59,.09),transparent);
  }

  .intro{
    padding:0 20px;
  }

  h2{
    margin:0;
    max-width:320px;
    font-size:29px;
    line-height:1.28;
    letter-spacing:-.025em;
    font-weight:850;
    color:#17303B;
  }

  .lead{
    margin:15px 0 0;
    font-size:15px;
    line-height:1.9;
    font-weight:500;
    color:#5C7078;
  }

  .lead strong{
    font-weight:800;
    color:#17303B;
  }

  /* FIT ZONE: editorial list, not cards */
  .fit-zone{
    margin-top:34px;
    padding:0 20px;
  }

  .zone-title{
    margin:0 0 16px;
    font-size:18px;
    line-height:1.35;
    font-weight:850;
    color:#115662;
  }

  .fit-list{
    position:relative;
    margin:0;
    padding:0 23px 0 0;
    list-style:none;
  }

  .fit-item{
    position:relative;
    padding:0 0 18px;
    font-size:14px;
    line-height:1.72;
    font-weight:650;
    color:#314A54;
  }

  .fit-item:last-child{padding-bottom:0}

  .fit-item::before{
    content:"✓";
    position:absolute;
    right:-23px;
    top:1px;
    width:15px;
    height:15px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#176B7A;
    color:#fff;
    font-size:9px;
    font-weight:900;
    box-shadow:0 3px 9px rgba(23,107,122,.14);
  }

  .fit-item + .fit-item{
    padding-top:12px;
  }

  /* NON-FIT ZONE: full-width flat band, deliberately not a floating card */
  .nonfit-zone{
    margin-top:38px;
    padding:27px 20px 28px;
    background:
      linear-gradient(180deg,#F8F0E9 0%,#F5ECE4 100%);
    border-top:1px solid rgba(154,94,54,.09);
    border-bottom:1px solid rgba(154,94,54,.09);
  }

  .nonfit-zone .zone-title{
    margin-bottom:15px;
    color:#7D4D32;
  }

  .nonfit-list{
    margin:0;
    padding:0;
    list-style:none;
  }

  .nonfit-item{
    display:grid;
    grid-template-columns:22px 1fr;
    gap:10px;
    align-items:start;
    padding:13px 0;
    font-size:14px;
    line-height:1.72;
    font-weight:650;
    color:#4D4E4A;
  }

  .nonfit-item + .nonfit-item{
    padding-top:10px;
  }

  .nonfit-mark{
    width:18px;
    height:18px;
    margin-top:2px;
    border-radius:50%;
    border:1.5px solid rgba(125,77,50,.42);
    position:relative;
  }

  .nonfit-mark::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:7px;
    height:1.5px;
    border-radius:99px;
    background:#8A5A40;
    transform:translate(-50%,-50%);
  }

  /* Closing editorial statement */
  .decision{
    position:relative;
    margin:35px 20px 0;
    padding:3px 18px 3px 0;
  }

  .decision::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    width:4px;
    border-radius:99px;
    background:#176B7A;
  }

  .decision p{
    margin:0;
    max-width:325px;
    font-size:19px;
    line-height:1.65;
    letter-spacing:-.012em;
    font-weight:850;
    color:#17303B;
  }

  .decision p strong{
    color:#115662;
  }

  @media(max-width:350px){
    .s8{padding-top:42px}
    h2{font-size:26px}
    .lead{font-size:14px}
    .fit-item,.nonfit-item{font-size:13px}
    .decision p{font-size:18px}
  }

  @media(min-width:600px){
    body{padding:24px 0}
    .mobile-page{
      min-height:calc(100vh - 48px);
      border-radius:28px;
      box-shadow:0 18px 60px rgba(0,0,0,.12);
    }
  }


/* ===== S9-S11 ===== */


  *{box-sizing:border-box}
  html,body{
    margin:0;
    padding:0;
    background:#ececec;
    font-family:"Tajawal","Arial",sans-serif;
    color:#17303B;
  }
  body{
    display:flex;
    justify-content:center;
    min-height:100vh;
  }
  .mobile-page{
    width:min(390px,100vw);
    min-height:100vh;
    overflow:hidden;
    background:#FBF9F5;
  }

  .s9{padding:50px 0 58px}

  .intro{
    padding:0 20px;
  }
  .intro h2{
    margin:0;
    font-size:28px;
    line-height:1.42;
    letter-spacing:-.025em;
    font-weight:850;
    color:#17303B;
  }
  .intro p{
    margin:15px 0 0;
    font-size:14.5px;
    line-height:1.85;
    color:#62757C;
    font-weight:600;
  }
  .flow{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin-top:18px;
    color:#176B7A;
    font-size:13px;
    font-weight:850;
  }
  .flow i{
    width:18px;
    height:1px;
    display:inline-block;
    background:rgba(23,107,122,.30);
  }

  /* ONE digital-system stage, not four independent cards */
  .system-stage{
    position:relative;
    margin-top:30px;
    padding:26px 0 28px;
    background:
      radial-gradient(circle at 12% 10%,rgba(255,255,255,.10),transparent 26%),
      linear-gradient(160deg,#176B7A 0%,#115662 72%,#0F4C56 100%);
    color:#fff;
    overflow:hidden;
  }
  .system-stage::before{
    content:"";
    position:absolute;
    width:160px;height:160px;
    left:-70px;top:38%;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.07);
  }
  .system-stage::after{
    content:"";
    position:absolute;
    width:210px;height:210px;
    right:-125px;top:-80px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.07);
  }

  .resource{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:132px 1fr;
    gap:16px;
    align-items:center;
    padding:18px 20px 22px;
  }
  .resource:nth-child(even){
    grid-template-columns:1fr 132px;
  }
  .resource:nth-child(even) .resource-preview{order:2}
  .resource:nth-child(even) .resource-copy{order:1}

  .resource + .resource{
    margin-top:5px;
  }

  /* visual path only */
  .resource::after{
    content:"";
    position:absolute;
    right:84px;
    bottom:-8px;
    width:1px;
    height:18px;
    background:linear-gradient(rgba(255,255,255,.30),rgba(255,255,255,0));
  }
  .resource:last-child::after{display:none}

  .resource-preview{
    position:relative;
    height:158px;
    border-radius:19px;
    background:#FAF8F3;
    box-shadow:
      0 18px 32px rgba(0,0,0,.18),
      0 3px 8px rgba(0,0,0,.09);
    transform:rotate(-2.3deg);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.28);
  }
  .resource:nth-child(even) .resource-preview{
    transform:rotate(2.3deg);
  }
  .sheet-top{
    height:31px;
    background:#EAF4F6;
    border-bottom:1px solid rgba(23,107,122,.08);
  }
  .sheet-dot{
    position:absolute;
    top:12px;
    right:12px;
    width:38px;
    height:7px;
    border-radius:10px;
    background:#176B7A;
    opacity:.72;
  }
  .sheet-body{padding:14px 12px}
  .line{
    height:6px;
    border-radius:10px;
    background:#DDE5E5;
    margin-bottom:9px;
  }
  .line.w70{width:70%}
  .line.w85{width:85%}
  .line.w55{width:55%}
  .mini-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    margin-top:14px;
  }
  .mini{
    height:36px;
    border-radius:8px;
    background:#EDF3F2;
    border:1px solid rgba(23,107,122,.06);
  }
  .resource:nth-child(2) .mini:nth-child(2),
  .resource:nth-child(3) .mini:nth-child(3),
  .resource:nth-child(4) .mini:nth-child(1){
    background:#D8EBEE;
  }

  .resource-copy h3{
    margin:0;
    font-size:18px;
    line-height:1.45;
    font-weight:850;
    color:#fff;
  }
  .resource-copy .question{
    margin:7px 0 0;
    font-size:13px;
    font-weight:850;
    line-height:1.5;
    color:#D9EEF1;
  }
  .resource-copy .desc{
    margin:6px 0 0;
    font-size:11.5px;
    line-height:1.7;
    font-weight:550;
    color:rgba(255,255,255,.75);
  }
  .resource-copy .value{
    display:inline-flex;
    align-items:center;
    margin-top:10px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.13);
    font-size:12px;
    font-weight:850;
    color:#fff;
  }

  /* one summary after all four resources */
  .system-summary{
    margin:8px 20px 0;
    padding:20px 18px 18px;
    border-radius:22px;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.11);
    backdrop-filter:blur(7px);
    text-align:center;
  }
  .system-summary h3{
    margin:0;
    font-size:18px;
    font-weight:850;
    color:#fff;
  }
  .system-summary .summary-flow{
    margin:11px 0 0;
    font-size:12px;
    line-height:1.7;
    font-weight:800;
    color:#DCECEF;
  }

  /* value bridge */
  .value-bridge{
    padding:34px 20px 33px;
    background:#fff;
    text-align:center;
  }
  .value-bridge .eyebrow{
    font-size:13px;
    font-weight:750;
    color:#6C7D83;
  }
  .value-bridge .old-value{
    margin-top:7px;
    font-size:46px;
    line-height:1;
    letter-spacing:-.04em;
    font-weight:900;
    color:#17303B;
  }

  /* the offer becomes its own visual moment */
  .offer{
    position:relative;
    padding:36px 20px 32px;
    background:
      radial-gradient(circle at 50% 0,rgba(234,244,246,.96),rgba(234,244,246,0) 47%),
      #FBF9F5;
  }
  .offer-title{
    margin:0;
    font-size:22px;
    line-height:1.45;
    font-weight:850;
    color:#17303B;
  }


  .bundle{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin:25px 0 25px;
    direction:rtl;
  }

  .bundle-item{
    position:relative;
    width:148px;
    height:174px;
    overflow:hidden;
    border-radius:24px;
    text-align:center;
    background:#fff;
    box-shadow:
      0 17px 34px rgba(23,48,59,.09),
      0 3px 8px rgba(23,48,59,.04);
    border:1px solid rgba(23,48,59,.055);
  }

  .bundle-visual{
    height:126px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 9px 3px;
  }

  .kit-image{
    width:121%;
    height:121%;
    object-fit:contain;
    display:block;
    filter:drop-shadow(0 7px 8px rgba(23,48,59,.10));
  }

  .bundle-label{
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:5px 9px 10px;
    font-size:13px;
    line-height:1.35;
    font-weight:850;
    color:#17303B;
  }

  .bundle-item.digital{
    background:linear-gradient(180deg,#F1F8F9 0%,#EAF4F6 100%);
  }

  .bundle-item.digital .bundle-label{
    color:#115662;
  }

  /* Temporary visual for the four digital resources, until real covers are supplied */
  .digital-stack{
    position:relative;
    width:105px;
    height:102px;
  }

  .digital-sheet{
    position:absolute;
    width:64px;
    height:82px;
    border-radius:13px;
    background:#fff;
    border:1px solid rgba(23,107,122,.10);
    box-shadow:0 8px 18px rgba(17,86,98,.11);
    display:grid;
    place-items:center;
  }
  .digital-sheet svg{
    width:27px;
    height:27px;
    stroke:#176B7A;
    stroke-width:1.8;
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .digital-sheet.s1{right:31px;top:4px;transform:rotate(-8deg);opacity:.72}
  .digital-sheet.s2{right:10px;top:10px;transform:rotate(8deg);opacity:.82}
  .digital-sheet.s3{right:37px;top:19px;transform:rotate(-2deg);opacity:.91}
  .digital-sheet.s4{right:17px;top:23px;transform:rotate(4deg);z-index:2}
  .digital-sheet.s4::after{
    content:"";
    position:absolute;
    right:9px;
    left:9px;
    bottom:11px;
    height:4px;
    border-radius:99px;
    background:#DCECEF;
  }

  /* Geometrically centered plus: drawn with CSS instead of a font glyph */
  .plus{
    position:relative;
    flex:0 0 auto;
    width:31px;
    height:31px;
    border-radius:50%;
    background:#176B7A;
    box-shadow:0 7px 15px rgba(23,107,122,.19);
  }
  .plus::before,
  .plus::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:12px;
    height:2px;
    border-radius:99px;
    background:#fff;
    transform:translate(-50%,-50%);
  }
  .plus::after{
    transform:translate(-50%,-50%) rotate(90deg);
  }

  .price-block{
    text-align:center;
    padding:6px 0 0;
  }
  .price{
    margin:0;
    font-size:44px;
    line-height:1.05;
    letter-spacing:-.045em;
    font-weight:900;
    color:#115662;
  }

  /* Three purchase facts in one horizontal trust row */
  .purchase-facts{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    margin:20px auto 0;
    max-width:350px;
    direction:rtl;
  }

  .fact{
    min-width:0;
    text-align:center;
    padding:0 2px;
  }

  .fact-icon{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    margin:0 auto 7px;
    border-radius:10px;
    background:#EAF4F6;
  }
  .fact-icon svg{
    width:17px;
    height:17px;
    fill:none;
    stroke:#176B7A;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .fact span{
    display:block;
    font-size:10.5px;
    line-height:1.45;
    font-weight:750;
    color:#5C7078;
  }

  .whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px;
    margin:18px auto 0;
    max-width:332px;
    font-size:12.5px;
    line-height:1.75;
    font-weight:650;
    color:#445B64;
  }
  .wa-highlight{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-weight:850;
    color:#1FA855;
  }
  .wa-icon{
    width:19px;
    height:19px;
    display:inline-grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    background:#25D366;
  }
  .wa-icon svg{
    width:11px;
    height:11px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .scarcity{
    margin:18px auto 0;
    max-width:338px;
    padding:13px 15px;
    border-radius:16px;
    background:#F5ECE4;
    border:1px solid rgba(154,94,54,.10);
    font-size:12.5px;
    line-height:1.55;
    font-weight:800;
    color:#7C4F36;
    text-align:center;
  }

  .cta{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:54px;
    margin-top:18px;
    border:0;
    border-radius:17px;
    background:#176B7A;
    box-shadow:0 11px 25px rgba(23,107,122,.20);
    color:#fff;
    font-family:inherit;
    font-size:16px;
    font-weight:850;
    text-decoration:none;
  }

  @media(max-width:350px){
    .intro h2{font-size:25px}
    .resource{grid-template-columns:116px 1fr;gap:12px;padding-inline:16px}
    .resource:nth-child(even){grid-template-columns:1fr 116px}
    .resource-preview{height:145px}
    .resource-copy h3{font-size:16px}
    .old-value{font-size:42px!important}
    .bundle-item{width:132px;height:164px}.bundle-visual{height:117px}.bundle-label{height:47px;font-size:12px}.digital-stack{transform:scale(.92)}
    .price{font-size:40px}
  }
  @media(min-width:600px){
    body{padding:24px 0}
    .mobile-page{
      min-height:calc(100vh - 48px);
      border-radius:28px;
      box-shadow:0 18px 60px rgba(0,0,0,.12);
    }
  }



  *{box-sizing:border-box}
  html,body{
    margin:0;
    padding:0;
    background:#ececec;
    font-family:"Tajawal","Arial",sans-serif;
    color:#17303B;
  }

  body{
    min-height:100vh;
    display:flex;
    justify-content:center;
  }

  .mobile-page{
    width:min(390px,100vw);
    min-height:100vh;
    overflow:hidden;
    background:#FBF9F5;
  }

  .s10{
    padding:48px 0 58px;
  }

  .intro{
    padding:0 20px;
  }

  .intro h2{
    margin:0;
    font-size:29px;
    line-height:1.25;
    font-weight:850;
    letter-spacing:-.025em;
    color:#17303B;
  }

  .price-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:16px;
    flex-wrap:wrap;
  }

  .price{
    font-size:22px;
    line-height:1;
    font-weight:900;
    color:#115662;
  }

  .cod{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 11px;
    border-radius:999px;
    background:#EAF4F6;
    color:#115662;
    font-size:12px;
    font-weight:800;
  }

  .cod svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:#176B7A;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  /* One clear order surface */
  .order-panel{
    margin-top:26px;
    padding:22px 18px 19px;
    background:#fff;
    border-top:1px solid rgba(23,48,59,.055);
    border-bottom:1px solid rgba(23,48,59,.055);
    box-shadow:0 14px 36px rgba(23,48,59,.055);
  }

  .form-label{
    margin:0 0 14px;
    font-size:14px;
    font-weight:850;
    color:#17303B;
  }

  .field-stack{
    display:grid;
    gap:11px;
  }

  .field{
    width:100%;
    height:52px;
    border:1px solid rgba(23,48,59,.12);
    border-radius:15px;
    background:#FCFBF8;
    padding:0 14px;
    font:inherit;
    color:#17303B;
    outline:none;
  }

  .field:focus{
    border-color:#176B7A;
    box-shadow:0 0 0 3px rgba(23,107,122,.08);
  }

  .phone-note{
    display:grid;
    grid-template-columns:30px 1fr;
    gap:10px;
    align-items:start;
    margin-top:15px;
    padding:13px 14px;
    border-radius:16px;
    background:#F3FAF6;
    border:1px solid rgba(37,211,102,.14);
  }

  .wa-icon{
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#25D366;
  }

  .wa-icon svg{
    width:16px;
    height:16px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .phone-note p{
    margin:0;
    font-size:11.5px;
    line-height:1.7;
    font-weight:650;
    color:#4E655C;
  }

  .submit{
    width:100%;
    min-height:55px;
    margin-top:16px;
    border:0;
    border-radius:17px;
    background:#176B7A;
    color:#fff;
    font-family:inherit;
    font-size:16px;
    font-weight:850;
    box-shadow:0 12px 25px rgba(23,107,122,.18);
    cursor:pointer;
  }

  .submit-note{
    margin:13px 2px 0;
    font-size:11.5px;
    line-height:1.7;
    font-weight:650;
    color:#64767D;
  }

  /* What happens next — no timeline line, no card grid */
  .after{
    padding:42px 20px 0;
  }

  .after h3{
    margin:0;
    font-size:22px;
    line-height:1.35;
    font-weight:850;
    color:#17303B;
  }

  .steps{
    margin-top:22px;
    display:grid;
    gap:20px;
  }

  .step{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:12px;
    align-items:start;
  }

  .num{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:#EAF4F6;
    color:#115662;
    font-size:16px;
    font-weight:900;
    box-shadow:0 7px 16px rgba(23,107,122,.08);
  }

  .step-copy{
    padding-top:1px;
  }

  .step-copy h4{
    margin:0;
    font-size:15px;
    line-height:1.35;
    font-weight:850;
    color:#17303B;
  }

  .step-copy p{
    margin:5px 0 0;
    font-size:12.5px;
    line-height:1.75;
    font-weight:600;
    color:#5D7178;
  }

  .step.whatsapp .num{
    background:#F0FAF4;
    color:#1FA855;
  }

  .step.shipping .num{
    background:#F5F0E9;
    color:#8A5A40;
  }

  .step.receive .num{
    background:#EEF6F8;
    color:#115662;
  }

  @media(max-width:350px){
    .intro h2{font-size:26px}
    .price{font-size:20px}
    .field{height:50px}
    .after h3{font-size:20px}
  }

  @media(min-width:600px){
    body{padding:24px 0}
    .mobile-page{
      min-height:calc(100vh - 48px);
      border-radius:28px;
      box-shadow:0 18px 60px rgba(0,0,0,.12);
    }
  }



  html{
    scroll-behavior:smooth;
  }

  /* Seamless transition between S9 and S10 */
  .s9{
    padding-bottom:0;
  }

  .s10{
    position:relative;
    padding-top:54px;
  }

  .s10::before{
    content:"";
    position:absolute;
    top:0;
    right:0;
    left:0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(23,48,59,.09),transparent);
  }

  .form-label{
    margin-bottom:15px;
    font-size:14px;
    line-height:1.65;
  }

  /* Collapsed by default; opens only when the user requests it */
  .after{
    padding:34px 20px 0;
  }

  .after-accordion{
    margin:0;
    border-radius:20px;
    background:#FFFFFF;
    border:1px solid rgba(23,48,59,.07);
    box-shadow:0 12px 28px rgba(23,48,59,.055);
    overflow:hidden;
  }

  .after-accordion summary{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:64px;
    padding:18px 17px;
    cursor:pointer;
    user-select:none;
    font-size:17px;
    line-height:1.4;
    font-weight:850;
    color:#17303B;
  }

  .after-accordion summary::-webkit-details-marker{
    display:none;
  }

  .accordion-icon{
    position:relative;
    flex:0 0 auto;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#EAF4F6;
  }

  .accordion-icon::before,
  .accordion-icon::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:11px;
    height:1.8px;
    border-radius:99px;
    background:#176B7A;
    transform:translate(-50%,-50%);
    transition:transform .22s ease, opacity .22s ease;
  }

  .accordion-icon::after{
    transform:translate(-50%,-50%) rotate(90deg);
  }

  .after-accordion[open] .accordion-icon::after{
    transform:translate(-50%,-50%) rotate(0deg);
    opacity:0;
  }

  .accordion-body{
    padding:0 17px 20px;
    border-top:1px solid rgba(23,48,59,.06);
  }

  .after-accordion .steps{
    margin-top:20px;
  }

  @media(max-width:350px){
    .after-accordion summary{
      font-size:16px;
      min-height:60px;
    }
  }


/* ===== S11 SUPPORT ===== */
.s11{
    position:relative;
    padding:52px 20px 58px;
  }

  .s11::before{
    content:"";
    position:absolute;
    top:0;
    right:20px;
    left:20px;
    height:1px;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(23,48,59,.09),
      transparent
    );
  }

  .support-mark{
    position:relative;
    width:58px;
    height:58px;
    margin:0 0 18px auto;
    display:grid;
    place-items:center;
    border-radius:19px;
    background:
      linear-gradient(145deg,#EAF4F6 0%,#F4F9FA 100%);
    box-shadow:
      0 12px 28px rgba(23,107,122,.09),
      inset 0 0 0 1px rgba(23,107,122,.07);
  }

  .support-mark svg{
    width:30px;
    height:30px;
    fill:none;
    stroke:#176B7A;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  h2{
    margin:0;
    font-size:28px;
    line-height:1.3;
    font-weight:850;
    letter-spacing:-.025em;
    color:#17303B;
  }

  .support-copy{
    margin:15px 0 0;
    font-size:14px;
    line-height:1.9;
    font-weight:600;
    color:#5D7178;
  }

  .replacement{
    position:relative;
    margin-top:26px;
    padding:21px 18px 20px;
    border-radius:22px;
    background:
      linear-gradient(180deg,#EEF7F8 0%,#EAF4F6 100%);
    border:1px solid rgba(23,107,122,.09);
    box-shadow:0 12px 28px rgba(23,48,59,.055);
  }

  .replacement-icon{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    margin-bottom:12px;
    border-radius:12px;
    background:#176B7A;
  }

  .replacement-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .replacement p{
    margin:0;
    font-size:17px;
    line-height:1.7;
    font-weight:850;
    color:#17303B;
  }

  .replacement strong{
    color:#115662;
  }

  @media(max-width:350px){
    .s11{padding-top:46px}
    h2{font-size:25px}
    .support-copy{font-size:13px}
    .replacement p{font-size:16px}
  }

  @media(min-width:600px){
    body{padding:24px 0}
    .mobile-page{
      min-height:calc(100vh - 48px);
      border-radius:28px;
      box-shadow:0 18px 60px rgba(0,0,0,.12);
    }
  }


  /* S11 follows S10 as the final reassurance section */
  .s11{
    margin-top:42px;
  }

  .s11::before{
    right:20px;
    left:20px;
  }

  .replacement-icon svg{
    width:20px;
    height:20px;
    stroke-width:1.9;
  }


  /* ===== FLOW TIGHTENING: S9 → S10 → S11 ===== */

  /* S9 CTA already says "ابدأ طلبك", so S10 begins directly with price/form */
  .s10{
    padding-top:22px !important;
    padding-bottom:0 !important;
  }

  .s10::before{
    display:none !important;
  }

  .s10 > .intro{
    padding-top:0;
  }

  .s10 .price-row{
    margin-top:0;
  }

  .s10 .order-panel{
    margin-top:18px;
  }

  /* Bring the collapsed "what happens next" control closer to the form */
  .s10 .after{
    padding-top:22px;
    padding-bottom:0;
  }

  /* S11 should follow the accordion almost immediately */
  .s11{
    margin-top:0 !important;
    padding-top:30px !important;
    padding-bottom:52px;
  }

  .s11::before{
    top:0;
    right:20px;
    left:20px;
  }

  @media(max-width:350px){
    .s10{padding-top:18px !important}
    .s11{padding-top:26px !important}
  }



/* ===== FINAL MERGE OVERRIDES ===== */

  /* ===== MERGED PAGE NORMALIZATION ===== */
  html{
    scroll-behavior:smooth;
    background:#ECECEC;
  }

  body{
    margin:0;
    min-height:100vh;
    display:flex;
    justify-content:center;
    background:#ECECEC;
  }

  .mobile-page{
    width:min(390px,100vw);
    min-height:100vh;
    overflow:hidden;
    background:#FBF9F5;
  }

  /* Make every section feel part of one continuous page */
  #s7, #s8, #s9, #s10, #s11{
    scroll-margin-top:16px;
  }

  /* S7 → S8 */
  #s8{
    padding-top:46px;
  }

  #s8::before{
    right:20px;
    left:20px;
  }

  /* S8 → S9 */
  #s9{
    position:relative;
    margin-top:12px;
    padding-top:48px;
  }

  #s9::before{
    content:"";
    position:absolute;
    top:0;
    right:20px;
    left:20px;
    height:1px;
    background:linear-gradient(
      90deg,
      transparent,
      rgba(23,48,59,.09),
      transparent
    );
  }

  /* Prevent desktop wrapper rules from creating multiple cards */
  @media(min-width:600px){
    body{
      padding:24px 0;
    }
    .mobile-page{
      min-height:calc(100vh - 48px);
      border-radius:28px;
      box-shadow:0 18px 60px rgba(0,0,0,.12);
    }
  }



  /* =========================================================
     FINAL SECTION RHYTHM — S7 → S11
     No divider lines. Small teal eyebrow marks a new chapter.
     ========================================================= */

  /* Remove the old separator-line language between sections */
  #s8::before,
  #s9::before,
  #s10::before,
  #s11::before{
    display:none !important;
  }

  /* Reduce "page break" feeling between sections */
  #s7{
    padding-bottom:18px !important;
  }

  #s8{
    padding-top:24px !important;
    padding-bottom:18px !important;
  }

  #s9{
    margin-top:0 !important;
    padding-top:24px !important;
  }

  /* Shared eyebrow language */
  .section-kicker{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    width:auto;
    max-width:none;
    margin:0 !important;
    padding:0 !important;
    color:#176B7A !important;
    font-size:12.5px !important;
    line-height:1.45 !important;
    font-weight:850 !important;
    letter-spacing:0 !important;
  }

  .section-kicker::before{
    content:"";
    flex:0 0 auto;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#176B7A;
    box-shadow:0 0 0 4px rgba(23,107,122,.075);
  }

  /* S7 → S8:
     question becomes the eyebrow; the audience statement becomes the visual lead */
  #s8 .intro{
    padding:0 20px;
  }

  #s8 .lead{
    margin-top:10px !important;
    max-width:345px;
    font-size:18px !important;
    line-height:1.72 !important;
    font-weight:700 !important;
    color:#17303B !important;
  }

  #s8 .lead strong{
    font-weight:850 !important;
    color:#17303B !important;
  }

  #s8 .fit-zone{
    margin-top:27px !important;
  }

  #s8 .nonfit-zone{
    margin-top:30px !important;
  }

  /* Softer ending so it does not fight the S9 headline */
  #s8 .decision{
    margin-top:27px !important;
    padding-right:15px !important;
  }

  #s8 .decision::before{
    width:3px !important;
  }

  #s8 .decision p{
    font-size:17px !important;
    line-height:1.65 !important;
    max-width:335px !important;
  }

  /* S8 → S9:
     eyebrow first, then a smaller main headline */
  #s9 .intro{
    padding:0 20px;
  }

  #s9 .intro .section-kicker{
    margin-bottom:9px !important;
  }

  #s9 .intro h2{
    margin:0 !important;
    max-width:345px;
    font-size:23px !important;
    line-height:1.48 !important;
    letter-spacing:-.018em !important;
    font-weight:850 !important;
    color:#17303B !important;
  }

  #s9 .flow{
    margin-top:14px !important;
  }

  #s9 .system-stage{
    margin-top:24px !important;
  }

  /* S9 → S10 is transactional continuity, not a new chapter */
  #s10{
    padding-top:20px !important;
  }

  /* S10 → S11: compact final reassurance, without separator line */
  #s11{
    margin-top:0 !important;
    padding-top:26px !important;
  }

  @media(max-width:350px){
    #s7{padding-bottom:15px !important}
    #s8{padding-top:20px !important;padding-bottom:15px !important}
    #s9{padding-top:21px !important}
    #s8 .lead{font-size:16.5px !important}
    #s8 .decision p{font-size:16px !important}
    #s9 .intro h2{font-size:21px !important}
  }


  /* =========================================================
     STRONGER SECTION TAG SYSTEM
     ========================================================= */

  .section-kicker{
    display:none !important;
  }

  .section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:calc(100% - 2px);
    padding:9px 13px 9px 12px;
    margin:0;
    border-radius:999px;
    border:1px solid rgba(23,107,122,.13);
    background:
      linear-gradient(
        180deg,
        rgba(234,244,246,.98) 0%,
        rgba(226,241,244,.94) 100%
      );
    box-shadow:
      0 8px 18px rgba(23,107,122,.08),
      inset 0 1px 0 rgba(255,255,255,.82);
    color:#115662;
    font-size:12.5px;
    line-height:1.35;
    font-weight:850;
  }

  .section-tag::before{
    content:"";
    flex:0 0 auto;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#176B7A;
    box-shadow:0 0 0 4px rgba(23,107,122,.08);
  }

  #s7 .heading{
    padding:22px 20px 4px !important;
    margin:0 !important;
  }

  #s8 .intro .section-tag{
    margin-bottom:12px;
  }

  #s8 .lead{
    margin-top:0 !important;
  }

  #s9 .intro .section-tag{
    margin-bottom:12px;
  }

  #s9 .intro h2{
    margin-top:0 !important;
  }

  #s11 .support-mark{
    display:none !important;
  }

  #s11 .support-tag{
    gap:9px;
    margin-bottom:14px;
  }

  #s11 .support-tag::before{
    display:none;
  }

  .tag-icon{
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#176B7A;
    box-shadow:0 5px 12px rgba(23,107,122,.16);
  }

  .tag-icon svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:#fff;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  #s11 .support-copy{
    margin-top:0 !important;
  }

  #s8{
    padding-top:22px !important;
  }

  #s9{
    padding-top:22px !important;
  }

  #s11{
    padding-top:24px !important;
  }

  @media(max-width:350px){
    .section-tag{
      font-size:12px;
      padding:8px 12px 8px 11px;
    }

    #s7 .heading{
      padding-top:19px !important;
    }
  }



.pre-s4{
  --page:#FBF9F5;
  --surface:#FFFFFF;
  --ink:#17303B;
  --muted:#607680;
  --brand:#176B7A;
  --brand-dark:#115662;
  --brand-soft:#EAF4F6;
  --warm:#9A5E36;
  --warm-soft:#F7EEE7;
  --line:#E6ECEC;
}
.pre-s4 *{box-sizing:border-box}
.pre-s4 .page{
  width:min(390px,100vw);
  min-height:100vh;
  background:var(--page);
  overflow:hidden;
}
.pre-s4 .s4{padding:54px 18px 64px}
.pre-s4 .kicker{
  display:flex;align-items:center;gap:8px;
  color:var(--brand);
  font-size:12px;font-weight:800;
  margin-bottom:10px;
}
.pre-s4 .kicker:before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--brand);
}
.pre-s4 h1{
  margin:0;
  font-size:27px;
  line-height:1.36;
  letter-spacing:-.35px;
  font-weight:800;
}
.pre-s4 .intro-line{
  width:54px;height:3px;border-radius:99px;
  background:var(--brand);
  margin:17px 0 28px auto;
}
.pre-s4 .stack{display:grid;gap:24px}
/* Shared floating card */
.pre-s4 .system-card{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:var(--surface);
  border:1px solid rgba(23,48,59,.055);
  box-shadow:
    0 22px 48px rgba(31,55,65,.095),
    0 6px 16px rgba(31,55,65,.045);
}
.pre-s4 .media{
  position:relative;
  height:260px;
  overflow:hidden;
}
.pre-s4 .media::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:70px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.20) 28%,
    rgba(255,255,255,.82) 74%,
    #fff 100%);
  pointer-events:none;
}
.pre-s4 .photo{
  width:100%;height:100%;object-fit:cover;display:block;
}
.pre-s4 .media-label{
  position:absolute;
  z-index:3;
  top:15px;right:15px;
  display:flex;align-items:center;gap:7px;
  padding:8px 11px;
  border-radius:13px;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 5px 15px rgba(23,48,59,.06);
  backdrop-filter:blur(8px);
}
.pre-s4 .media-label .label-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--brand);
}
.pre-s4 .media-label strong{
  font-size:13px;font-weight:800;color:var(--brand-dark)
}
.pre-s4 .card-body{
  position:relative;
  z-index:4;
  margin-top:-12px;
  padding:0 18px 22px;
}
.pre-s4 .rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pre-s4 .row{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:30px;
}
.pre-s4 .ico{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--brand-soft);
  color:var(--brand);
}
.pre-s4 .ico svg{
  width:17px;height:17px;
  stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.pre-s4 .row p{
  margin:0;
  font-size:12.8px;
  line-height:1.48;
  color:var(--muted);
  white-space:nowrap;
}
.pre-s4 .row strong{color:var(--ink);font-weight:800}
/* Digital temporary visual — intentionally generic, not fake final covers */
.pre-s4 .digital-media{
  background:
    radial-gradient(circle at 76% 17%,rgba(23,107,122,.12),transparent 28%),
    linear-gradient(145deg,#F4FAFB 0%,#EAF4F6 52%,#F8F4EF 100%);
}
.pre-s4 .digital-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.pre-s4 .phone{
  position:absolute;
  width:126px;height:220px;
  left:28px;top:25px;
  background:#fff;
  border:7px solid #17303B;
  border-radius:25px;
  box-shadow:0 17px 34px rgba(23,48,59,.16);
  transform:rotate(-4deg);
}
.pre-s4 .phone:before{
  content:"";
  position:absolute;
  top:7px;left:50%;transform:translateX(-50%);
  width:38px;height:5px;border-radius:99px;background:#D7DEE0;
}
.pre-s4 .screen-head{
  height:44px;
  margin:23px 9px 9px;
  border-radius:12px;
  background:linear-gradient(135deg,#176B7A,#2E8896);
}
.pre-s4 .screen-line{
  height:6px;border-radius:99px;background:#E8EEF0;
  margin:8px 12px;
}
.pre-s4 .screen-line.short{width:55%}
.pre-s4 .screen-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;
  margin:12px;
}
.pre-s4 .screen-grid i{
  display:block;height:48px;border-radius:10px;background:#EFF6F7;
}
.pre-s4 .resource{
  position:absolute;
  width:116px;height:144px;
  right:23px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(23,48,59,.07);
  box-shadow:0 13px 26px rgba(23,48,59,.11);
  padding:13px;
}
.pre-s4 .resource.r1{top:22px;transform:rotate(5deg);z-index:1}
.pre-s4 .resource.r2{top:47px;right:53px;transform:rotate(-2deg);z-index:2}
.pre-s4 .resource.r3{top:76px;right:18px;transform:rotate(3deg);z-index:3}
.pre-s4 .resource .band{
  width:34px;height:8px;border-radius:99px;background:var(--brand);
  margin-bottom:14px;
}
.pre-s4 .resource.r2 .band{background:#5C7890}
.pre-s4 .resource.r3 .band{background:var(--warm)}
.pre-s4 .resource .ln{height:6px;border-radius:99px;background:#E9EFF0;margin:7px 0}
.pre-s4 .resource .ln.s{width:62%}
.pre-s4 .resource .box{height:44px;border-radius:11px;background:#EEF6F7;margin-top:13px}
.pre-s4 .resource.r2 .box{background:#F0F2F5}
.pre-s4 .resource.r3 .box{background:var(--warm-soft)}
.pre-s4 .link-chip{
  position:absolute;
  right:144px;bottom:31px;
  display:flex;align-items:center;gap:7px;
  padding:8px 10px;
  background:#fff;border-radius:999px;
  box-shadow:0 8px 20px rgba(23,48,59,.09);
  color:var(--brand);font-weight:800;font-size:10px;
}
.pre-s4 .link-chip:before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);
}
/* divider between cards */
.pre-s4 .bridge{
  display:flex;align-items:center;justify-content:center;
  height:20px;position:relative;
}
.pre-s4 .bridge:before{
  content:"";
  position:absolute;top:0;bottom:0;width:1.5px;
  background:linear-gradient(var(--brand-soft),var(--brand));
}
.pre-s4 .bridge span{
  position:relative;
  z-index:2;
  width:9px;height:9px;border-radius:50%;
  background:var(--brand);
  border:3px solid var(--page);
}
/* final merge statement */
.pre-s4 .merge{
  margin-top:26px;
  text-align:center;
  padding:22px 16px 0;
  position:relative;
}
.pre-s4 .merge:before{
  content:"";
  display:block;
  width:48px;height:3px;border-radius:99px;
  background:var(--brand);
  margin:0 auto 15px;
}
.pre-s4 .merge p{
  margin:0 auto;
  max-width:330px;
  font-size:16px;
  line-height:1.8;
  font-weight:700;
}
.pre-s4 .merge strong{color:var(--brand)}
@media (max-width:360px){.pre-s4 .s4{padding-inline:14px}
.pre-s4 h1{font-size:25px}
.pre-s4 .media{height:244px}
.pre-s4 .row p{font-size:12px}
.pre-s4 .phone{left:20px}}

.pre-s5{
  --page:#FBF9F5;
  --surface:#FFFFFF;
  --ink:#17303B;
  --muted:#607680;
  --brand:#176B7A;
  --brand-dark:#115662;
  --brand-soft:#EAF4F6;
  --warm:#9A5E36;
  --warm-soft:#F7EEE7;
  --line:#E4EBEC;
}
.pre-s5 *{box-sizing:border-box}
.pre-s5 .page{
  width:min(390px,100vw);
  min-height:100vh;
  background:var(--page);
  overflow:hidden;
}
.pre-s5 .s5{padding:54px 18px 62px}
.pre-s5 .kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  font-size:12px;
  font-weight:800;
  color:var(--brand);
}
.pre-s5 .kicker:before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--brand);
}
.pre-s5 h2{
  margin:0;
  font-size:28px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:-.35px;
}
.pre-s5 .rule{
  width:54px;height:3px;border-radius:99px;
  background:var(--brand);
  margin:17px 0 27px auto;
}
/* Main session image */
.pre-s5 .session-card{
  overflow:hidden;
  border-radius:29px;
  background:#fff;
  border:1px solid rgba(23,48,59,.055);
  box-shadow:
    0 22px 48px rgba(31,55,65,.085),
    0 6px 16px rgba(31,55,65,.04);
}
.pre-s5 .photo{
  position:relative;
  height:286px;
  overflow:hidden;
  background:#EEE5DC;
}
.pre-s5 .photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 50%;
}
.pre-s5 .photo:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;
  height:58px;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,.36) 45%,
    #fff 100%
  );
  pointer-events:none;
}
.pre-s5 .session-copy{
  position:relative;
  z-index:2;
  margin-top:-5px;
  padding:0 18px 19px;
}
.pre-s5 .session-hint{
  margin:0;
  text-align:center;
  font-size:12.5px;
  line-height:1.7;
  color:var(--muted);
  font-weight:600;
}
/* roles */
.pre-s5 .roles{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin-top:17px;
}
.pre-s5 .roles:before{
  content:"";
  position:absolute;
  top:-17px;
  left:50%;
  transform:translateX(-50%);
  width:1px;height:17px;
  background:var(--line);
}
.pre-s5 .role{
  padding:15px 12px 14px;
  border-radius:21px;
  min-height:190px;
}
.pre-s5 .role.parent{
  background:linear-gradient(180deg,#FBF4EE 0%,#FFF 100%);
  border:1px solid #F0DED1;
}
.pre-s5 .role.child{
  background:linear-gradient(180deg,#EEF7F8 0%,#FFF 100%);
  border:1px solid #D8E9EC;
}
.pre-s5 .role-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
}
.pre-s5 .role-icon{
  width:29px;height:29px;
  border-radius:10px;
  display:grid;place-items:center;
  background:#fff;
  box-shadow:0 4px 11px rgba(23,48,59,.05);
}
.pre-s5 .parent .role-icon{color:var(--warm)}
.pre-s5 .child .role-icon{color:var(--brand)}
.pre-s5 .role-icon svg{
  width:16px;height:16px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pre-s5 .role h3{
  margin:0;
  font-size:16px;
  font-weight:800;
}
.pre-s5 .parent h3{color:var(--warm)}
.pre-s5 .child h3{color:var(--brand)}
.pre-s5 .steps{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.pre-s5 .steps li{
  position:relative;
  padding-right:13px;
  font-size:12.1px;
  line-height:1.58;
  color:#536A74;
}
.pre-s5 .steps li:before{
  content:"";
  position:absolute;
  right:0;
  top:.63em;
  width:5px;height:5px;border-radius:50%;
  background:currentColor;
  opacity:.5;
}
/* closing */
.pre-s5 .closing{
  margin-top:26px;
  padding:21px 17px 0;
  text-align:center;
  position:relative;
}
.pre-s5 .closing:before{
  content:"";
  display:block;
  width:42px;height:3px;
  border-radius:99px;
  background:var(--brand);
  margin:0 auto 15px;
}
.pre-s5 .closing p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}
.pre-s5 .closing strong{
  display:block;
  margin-top:7px;
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  font-weight:800;
}
@media (max-width:360px){.pre-s5 .s5{padding-inline:14px}
.pre-s5 h2{font-size:25px}
.pre-s5 .photo{height:270px}
.pre-s5 .roles{gap:9px}
.pre-s5 .role{padding-inline:10px}
.pre-s5 .steps li{font-size:11.6px}}

.pre-s6{
  --page:#FBF9F5;
  --ink:#17303B;
  --muted:#607680;
  --brand:#176B7A;
  --brand-dark:#115662;
  --brand-soft:#EAF4F6;
  --warm:#9A5E36;
  --warm-soft:#F7EEE7;
  --line:#DCE6E8;
  --blue:#2C7FC0;
}
.pre-s6 *{box-sizing:border-box}
.pre-s6 .page{
  width:min(390px,100vw);
  min-height:100vh;
  background:var(--page);
  overflow:hidden;
}
.pre-s6 .s6{padding:56px 20px 64px}
.pre-s6 h2{
  margin:0;
  font-size:28px;
  line-height:1.34;
  font-weight:800;
  letter-spacing:-.35px;
}
.pre-s6 .title-rule{
  width:54px;height:3px;border-radius:99px;
  margin:17px 0 28px auto;
  background:var(--brand);
}
/* QUESTION */
.pre-s6 .question{text-align:center}
.pre-s6 .question p{margin:0}
.pre-s6 .q-now{font-size:16px;font-weight:800}
.pre-s6 .small{margin-top:3px!important;font-size:12px;color:var(--muted)}
.pre-s6 .q-later{
  margin-top:4px!important;
  font-size:16px;
  line-height:1.55;
  font-weight:800;
  color:var(--brand);
}
/* NOW / LATER VISUAL */
.pre-s6 .compare{
  display:grid;
  grid-template-columns:1fr 46px 1fr;
  align-items:center;
  gap:7px;
  margin:24px 0 18px;
}
.pre-s6 .moment{
  text-align:center;
}
.pre-s6 .moment-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 3px 10px rgba(23,48,59,.04);
  font-size:11px;
  font-weight:800;
  margin-bottom:10px;
}
.pre-s6 .now .moment-label{color:var(--warm)}
.pre-s6 .later .moment-label{color:var(--brand)}
.pre-s6 .fact{
  width:86px;height:112px;
  margin:auto;
  border:6px solid var(--blue);
  border-radius:15px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 11px 23px rgba(40,98,135,.08);
}
.pre-s6 .eq{font-size:25px;line-height:1;font-weight:800;color:#222}
.pre-s6 .bar{width:49px;height:2px;background:#222;margin:8px 0 7px}
.pre-s6 .answer{
  font-size:23px;
  font-weight:800;
  color:#3B7A64;
}
.pre-s6 .later .answer{color:var(--warm)}
.pre-s6 .time-link{
  position:relative;
  height:2px;
  background:linear-gradient(90deg,rgba(154,94,54,.35),rgba(23,107,122,.45));
}
.pre-s6 .time-link:after{
  content:"";
  position:absolute;
  left:-2px;top:-4px;
  width:8px;height:8px;
  border-left:2px solid var(--brand);
  border-bottom:2px solid var(--brand);
  transform:rotate(45deg);
}
.pre-s6 .core-copy{
  margin:0 auto;
  max-width:335px;
  text-align:center;
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
}
.pre-s6 .core-copy strong{color:var(--ink)}
.pre-s6 .divider{
  display:flex;align-items:center;gap:10px;
  margin:34px 0 26px;
}
.pre-s6 .divider:before,.pre-s6 .divider:after{
  content:"";
  flex:1;height:1px;
  background:linear-gradient(to left,transparent,var(--line),transparent);
}
.pre-s6 .divider i{
  width:6px;height:6px;border-radius:50%;
  background:var(--brand);opacity:.55;
}
/* RESEARCH RAIL */
.pre-s6 .rail-wrap{
  margin-inline:-20px;
  overflow:hidden;
  padding-block:10px 14px;
}
.pre-s6 .rail{
  display:flex;
  gap:13px;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:20px;
  padding:2px 20px 12px;
  direction:rtl;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.pre-s6 .rail::-webkit-scrollbar{display:none}
.pre-s6 .slide{
  direction:rtl;
  flex:0 0 82%;
  scroll-snap-align:start;
  padding:18px 16px 17px;
  border-radius:24px;
  background:#FFFFFF;
  border:1px solid rgba(23,48,59,.075);
  box-shadow:
    0 18px 38px rgba(31,55,65,.085),
    0 5px 14px rgba(31,55,65,.035);
}
.pre-s6 .slide h3{
  margin:0 0 12px;
  font-size:18px;
  line-height:1.5;
  font-weight:800;
}
.pre-s6 .study-copy{
  margin:0;
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
}
.pre-s6 .study-copy strong{color:var(--ink)}
.pre-s6 .study-result{
  margin:13px 0 0;
  font-size:12.4px;
  line-height:1.8;
  color:var(--muted);
}
.pre-s6 .study-result strong{color:var(--ink)}
/* MAKI */
.pre-s6 .maki-visual{
  margin:21px -2px 17px;
}
.pre-s6 .maki-flow{
  display:grid;
  grid-template-columns:1fr 32px 1fr;
  align-items:center;
  gap:8px;
}
.pre-s6 .node{
  min-height:63px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:9px;
  font-size:11.2px;
  line-height:1.5;
  font-weight:800;
}
.pre-s6 .node.base{
  background:var(--warm-soft);
  color:var(--warm);
}
.pre-s6 .node.match{
  background:var(--brand-soft);
  color:var(--brand-dark);
}
.pre-s6 .maki-arrow{
  height:2px;
  position:relative;
  background:linear-gradient(90deg,rgba(154,94,54,.3),rgba(23,107,122,.5));
}
.pre-s6 .maki-arrow:after{
  content:"";
  position:absolute;
  left:-1px;top:-4px;
  width:8px;height:8px;
  border-left:2px solid var(--brand);
  border-bottom:2px solid var(--brand);
  transform:rotate(45deg);
}
.pre-s6 .growth{
  position:relative;
  height:78px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.pre-s6 .growth:before{
  content:"";
  position:absolute;
  top:-15px;left:50%;
  width:1px;height:17px;
  background:var(--line);
}
.pre-s6 .growth span{
  width:25px;
  border-radius:7px 7px 3px 3px;
  background:rgba(23,107,122,.15);
}
.pre-s6 .growth span:nth-child(1){height:25px}
.pre-s6 .growth span:nth-child(2){height:41px;background:rgba(23,107,122,.28)}
.pre-s6 .growth span:nth-child(3){height:61px;background:rgba(23,107,122,.58)}
.pre-s6 .growth-label{
  margin-top:7px;
  text-align:center;
  color:var(--brand-dark);
  font-size:12px;
  font-weight:800;
}
/* BURNS */
.pre-s6 .burns-visual{margin:20px -2px 16px}
.pre-s6 .students{
  display:grid;
  grid-template-columns:repeat(10,11px);
  justify-content:center;
  gap:6px;
}
.pre-s6 .students span{
  width:11px;height:11px;border-radius:50%;
  background:#D9BCA6;
}
.pre-s6 .students span:nth-child(3n){background:#C99D7C}
.pre-s6 .students-label{
  margin-top:9px;
  text-align:center;
  font-size:11.5px;
  font-weight:800;
  color:var(--warm);
}
.pre-s6 .branch{
  position:relative;
  width:265px;
  max-width:100%;
  height:91px;
  margin:11px auto 0;
}
.pre-s6 .branch .stem{
  position:absolute;
  left:50%;top:0;
  width:1px;height:19px;background:#D2C0B4;
}
.pre-s6 .branch .left,.pre-s6 .branch .right{
  position:absolute;top:18px;
  width:39%;height:25px;
  border-top:1px solid #D2C0B4;
}
.pre-s6 .branch .left{
  left:11%;
  border-left:1px solid #D2C0B4;
  border-radius:13px 0 0 0;
}
.pre-s6 .branch .right{
  right:11%;
  border-right:1px solid #D2C0B4;
  border-radius:0 13px 0 0;
}
.pre-s6 .branch .dot{
  position:absolute;
  top:39px;
  width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--warm);
}
.pre-s6 .branch .a{left:8%}
.pre-s6 .branch .b{right:8%}
.pre-s6 .branch-label{
  position:absolute;
  bottom:0;left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:11.2px;
  font-weight:800;
  color:var(--ink);
}
.pre-s6 .retention{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:2px;
}
.pre-s6 .retention span{
  font-size:11.7px;
  font-weight:800;
  color:var(--warm);
}
.pre-s6 .retention i{
  width:6px;height:6px;border-radius:50%;
  background:var(--warm);opacity:.55;
}
/* pagination dots */
.pre-s6 .dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:15px;
}
.pre-s6 .dot-indicator{
  width:7px;height:7px;
  border-radius:50%;
  border:0;
  padding:0;
  background:#C7D3D7;
  transition:.22s ease;
}
.pre-s6 .dot-indicator.active{
  width:22px;
  border-radius:999px;
  background:var(--brand);
}
/* SYSTEM FLOW */
.pre-s6 .system-flow{
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid var(--line);
  text-align:center;
}
.pre-s6 .system-flow p{
  margin:0 0 11px;
  font-size:12.4px;
  color:var(--muted);
}
.pre-s6 .flow{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.pre-s6 .flow span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10.5px;
  font-weight:800;
}
.pre-s6 .flow span:not(:last-child):after{
  content:"←";
  color:#97A8AD;
}
/* SOURCES */
.pre-s6 .sources{
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:17px;
  background:rgba(255,255,255,.72);
  overflow:hidden;
}
.pre-s6 .sources summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 15px;
  color:var(--brand-dark);
  font-size:12.7px;
  font-weight:800;
}
.pre-s6 .sources summary::-webkit-details-marker{display:none}
.pre-s6 .chevron{
  flex:0 0 auto;
  width:28px;height:28px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--brand-soft);
  color:var(--brand);
}
.pre-s6 .chevron svg{
  width:15px;height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .22s ease;
}
.pre-s6 .sources[open] .chevron svg{transform:rotate(180deg)}
.pre-s6 .sources-body{padding:0 15px 14px}
.pre-s6 .source{
  padding:10px 0;
  border-top:1px solid #EEF2F3;
  font-size:11.15px;
  line-height:1.72;
  color:var(--muted);
}
.pre-s6 .source strong{color:var(--ink)}
@media (max-width:360px){.pre-s6 .s6{padding-inline:15px}
.pre-s6 h2{font-size:25px}
.pre-s6 .rail-wrap{margin-inline:-15px}
.pre-s6 .rail{padding-inline:15px;scroll-padding-inline:15px}
.pre-s6 .slide{flex-basis:84%;padding:17px 14px 16px}
.pre-s6 .compare{grid-template-columns:1fr 34px 1fr}
.pre-s6 .fact{width:79px;height:105px}
.pre-s6 .students{grid-template-columns:repeat(10,10px);gap:5px}}


/* =========================================================
   S4 → S11 INTEGRATION RHYTHM
   Preserve internal section designs; normalize only chapter cues,
   external spacing, and copy-governance cleanup.
   ========================================================= */
#s4,#s5,#s6{scroll-margin-top:16px;}
.pre-s4,.pre-s5,.pre-s6{font-family:"Tajawal",system-ui,sans-serif;color:#17303B;}

/* Same floating tag language already used by S7/S8/S9/S11. */
#s4 .pre-section-tag,
#s5 .pre-section-tag,
#s6 .pre-section-tag{margin-bottom:13px;}

/* Avoid standalone-page gaps when sections sit in one continuous page. */
#s4{padding:28px 18px 24px !important;}
#s5{padding:22px 18px 24px !important;}
#s6{padding:22px 20px 20px !important;}

/* S4 keeps its existing composition but now behaves as a chapter in a page. */
#s4 .s4-title{
  margin:0;
  font-size:27px;
  line-height:1.36;
  letter-spacing:-.35px;
  font-weight:800;
}
#s4 .intro-line{margin-top:15px !important;margin-bottom:24px !important;}
#s4 .stack{gap:21px !important;}
#s4 .merge{margin-top:22px !important;padding-top:18px !important;}

/* S4 → S5: short handoff; the photograph changes the rhythm immediately. */
#s5 .rule{margin-top:15px !important;margin-bottom:24px !important;}
#s5 .roles{margin-top:16px !important;}
#s5 .closing{margin-top:25px !important;padding-top:18px !important;}

/* S5 → S6: proof chapter stays open/flat, not wrapped in another outer card. */
#s6 .title-rule{margin-top:15px !important;margin-bottom:24px !important;}
#s6 .divider{margin-top:26px !important;margin-bottom:24px !important;}
#s6 .system-flow{margin-top:30px !important;padding-top:25px !important;}
#s6 .sources{margin-top:18px !important;}

/* S6 → S7: no divider line, only a compact breathing space before the product chapter. */
#s7 .heading{padding-top:20px !important;}

@media(max-width:360px){
  #s4{padding:24px 14px 21px !important;}
  #s5{padding:20px 14px 21px !important;}
  #s6{padding:20px 15px 18px !important;}
  #s4 .s4-title{font-size:25px;}
}


/* =========================================================
   S5 REFINED — flat editorial photo + elevated role cards
   Integrated into the existing S4→S11 rhythm.
   ========================================================= */
#s5 .visual-group{
  position:relative;
}

/* Main photograph belongs to the page, not to an elevated card. */
#s5 .photo{
  position:relative;
  height:286px;
  overflow:hidden;
  border-radius:29px;
  background:#EEE5DC;
  border:0 !important;
  box-shadow:none !important;
}
#s5 .photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 50%;
}
#s5 .photo::after{
  content:none !important;
  display:none !important;
}

/* The two functional explanations are the elevated layer. */
#s5 .roles{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin:-16px 10px 0 !important;
}
#s5 .roles::before{
  content:none !important;
  display:none !important;
}
#s5 .role{
  min-height:195px;
  padding:16px 12px 15px;
  border-radius:21px;
  box-shadow:
    0 15px 28px rgba(31,55,65,.075),
    0 4px 10px rgba(31,55,65,.035);
}
#s5 .role.parent{
  background:linear-gradient(180deg,#FBF4EE 0%,#FFF 82%);
  border:1px solid #F0DED1;
}
#s5 .role.child{
  background:linear-gradient(180deg,#EEF7F8 0%,#FFF 82%);
  border:1px solid #D8E9EC;
}
#s5 .role-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
}
#s5 .steps li{
  font-size:12.15px;
  line-height:1.62;
  font-weight:500;
}

/* Keep the closing statement open on the page, not in another card. */
#s5 .closing{
  margin-top:28px !important;
  padding:20px 13px 0 !important;
}

@media(max-width:360px){
  #s5 .photo{height:270px;}
  #s5 .roles{
    gap:9px;
    margin:-16px 7px 0 !important;
  }
  #s5 .role{padding-inline:10px;}
  #s5 .steps li{font-size:11.6px;}
}



/* ===== S3 V6 namespaced styles ===== */

.fitra-s3{
  --bg:#FBF9F5;
  --ink:#17303B;
  --muted:#52656D;
  --teal:#176B7A;
  --teal2:#2D8796;
  --line:#B9D9DF;
  --warm:#9A5E36;
  --warm2:#C97D4B;
  --blueSoft:#EAF4F6;
  --warmSoft:#F7EFE8;
}




.page{
  width:min(100%,390px);
  padding:30px 16px 34px;
  overflow:hidden;
}

/* =========================
   SECTION INTRO
========================= */
.s3v6-header{padding:0 7px 8px}

.s3v6-section-tag{
  width:max-content;
  max-width:100%;
  margin:0 0 14px auto;
  padding:8px 14px 7px;
  border:1px solid #CFE5E9;
  border-radius:999px;
  background:rgba(234,244,246,.78);
  box-shadow:0 7px 17px rgba(23,107,122,.045);
  color:var(--teal);
  font-size:11.8px;
  line-height:1;
  font-weight:800;
}

.s3v6-title{
  margin:0;
  font-size:30px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.035em;
}
.s3v6-title span{display:block;color:var(--teal)}

/* =========================
   EDITORIAL PATH
========================= */
.s3v6-path{
  position:relative;
  height:1230px;
  margin-top:8px;
}

.s3v6-path:before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 91px,
    rgba(23,107,122,.026) 92px,
    transparent 93px
  );
  pointer-events:none;
}

.s3v6-route{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.s3v6-station{position:absolute;z-index:3}
.s3v6-copy{max-width:178px}

.s3v6-step{
  display:flex;
  gap:7px;
  align-items:center;
  margin-bottom:3px;
  color:var(--teal);
  font-weight:800;
}
.s3v6-step b{
  direction:ltr;
  font-size:12px;
  color:var(--warm2);
}
.s3v6-step span{font-size:17px}
.s3v6-copy p{
  margin:0;
  color:var(--muted);
  font-size:13.3px;
  line-height:1.65;
  font-weight:500;
}

/*
  الصور ما زالت Editorial، لكن أقل ارتفاعًا عن الصفحة:
  - Shadow أخف
  - دوران أهدأ
  - لا Pins
*/
.s3v6-photo{
  position:absolute;
  overflow:hidden;
  padding:3px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:20px;
  background:rgba(255,255,255,.88);
  box-shadow:
    0 8px 20px rgba(23,48,59,.065),
    0 1px 3px rgba(23,48,59,.035);
}
.s3v6-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:16px;
}
.s3v6-pin{display:none}

/* 01 */
.s3v6-s1{top:18px;right:8px;width:342px;height:154px}
.s3v6-s1 .s3v6-copy{position:absolute;right:0;top:17px;width:160px}
.s3v6-s1 .s3v6-photo{
  left:0;
  top:0;
  width:156px;
  height:140px;
  transform:rotate(-1deg);
}
.s3v6-s1 .s3v6-photo img{object-position:52% 52%}

/* 02 */
.s3v6-s2{top:188px;right:0;width:350px;height:158px}
.s3v6-s2 .s3v6-copy{position:absolute;left:0;top:22px;width:176px}
.s3v6-s2 .s3v6-photo{
  right:2px;
  top:0;
  width:142px;
  height:146px;
  transform:rotate(.9deg);
}
.s3v6-s2 .s3v6-photo img{object-position:50% 48%}

/* 03 */
.s3v6-s3{top:360px;right:6px;width:344px;height:166px}
.s3v6-s3 .s3v6-copy{position:absolute;right:0;top:25px;width:155px}
.s3v6-s3 .s3v6-photo{
  left:0;
  top:0;
  width:170px;
  height:152px;
  transform:rotate(-.8deg);
}
.s3v6-s3 .s3v6-photo img{object-position:49% 50%}

/* 04 — نقطة القرار والتفرع */
.s3v6-s4{
  top:536px;
  left:0;
  right:0;
  height:352px;
  text-align:center;
}
.s3v6-s4 .s3v6-copy{
  position:absolute;
  top:0;
  left:50%;
  width:310px;
  max-width:310px;
  transform:translateX(-50%);
}
.s3v6-s4 .s3v6-step{justify-content:center}
.s3v6-s4 .s3v6-step span{font-size:19px}
.s3v6-s4 .s3v6-copy p{font-size:13.4px;line-height:1.62}

.s3v6-s4 .s3v6-branchA,
.s3v6-s4 .s3v6-branchB{
  position:absolute;
  width:166px;
  height:160px;
}
.s3v6-s4 .s3v6-branchA{right:4px;top:108px;transform:rotate(.6deg)}
.s3v6-s4 .s3v6-branchB{left:4px;top:124px;transform:rotate(-.6deg)}
.s3v6-s4 .s3v6-branchA .s3v6-photo,
.s3v6-s4 .s3v6-branchB .s3v6-photo{
  inset:0;
  width:100%;
  height:100%;
  box-shadow:
    0 9px 22px rgba(23,48,59,.075),
    0 1px 3px rgba(23,48,59,.035);
}
.s3v6-s4 .s3v6-branchA img{object-position:60% 50%}
.s3v6-s4 .s3v6-branchB img{object-position:51% 50%}

.s3v6-branch-mark{
  position:absolute;
  top:87px;
  left:50%;
  width:12px;
  height:12px;
  border:2px solid var(--bg);
  border-radius:50%;
  background:var(--teal);
  transform:translateX(-50%);
  box-shadow:
    0 0 0 6px rgba(23,107,122,.075),
    0 3px 8px rgba(23,107,122,.11);
}

/* 05 */
.s3v6-s5{top:918px;right:0;width:350px;height:162px}
.s3v6-s5 .s3v6-copy{position:absolute;left:0;top:22px;width:178px}
.s3v6-s5 .s3v6-photo{
  right:2px;
  top:0;
  width:145px;
  height:148px;
  transform:rotate(.8deg);
}
.s3v6-s5 .s3v6-photo img{object-position:53% 50%}

/* 06 */
.s3v6-s6{top:1085px;right:4px;width:350px;height:140px}
.s3v6-s6 .s3v6-copy{position:absolute;inset:0;width:100%;max-width:none}
.s3v6-s6 .s3v6-step{justify-content:flex-start;margin-bottom:8px}
.s3v6-s6 .s3v6-step span{font-size:17px}

.s3v6-outcomes{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:3px;
  padding-top:12px;
}
.s3v6-outcomes:before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:42px;
  height:1px;
  background:var(--line);
  transform:translateX(-50%);
}
.s3v6-outcome{min-height:88px;padding:8px 7px 4px;text-align:center}
.s3v6-outcome + .s3v6-outcome{border-right:1px solid rgba(190,219,225,.72)}
.s3v6-outcome-icon{
  width:38px;
  height:38px;
  margin:0 auto 7px;
  border-radius:50%;
  display:grid;
  place-items:center;
}
.s3v6-outcome-icon svg{
  width:21px;
  height:21px;
  stroke-width:2;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.s3v6-outcome.s3v6-stable .s3v6-outcome-icon{background:var(--blueSoft);color:var(--teal)}
.s3v6-outcome.s3v6-return .s3v6-outcome-icon{background:var(--warmSoft);color:var(--warm)}
.s3v6-outcome p{
  margin:0;
  color:var(--muted);
  font-size:12.6px;
  line-height:1.55;
  font-weight:600;
}

/* =========================
   SIMPLE RECAP ONLY
   Research proof moves to S6
========================= */
.s3v6-footer{
  margin-top:7px;
  padding:19px 8px 0;
  text-align:center;
}
.s3v6-footer:before{
  content:"";
  display:block;
  width:42px;
  height:2px;
  margin:0 auto 13px;
  border-radius:99px;
  background:rgba(23,107,122,.55);
}
.s3v6-recap{
  margin:0;
  color:var(--teal);
  font-size:12.8px;
  line-height:1.85;
  font-weight:800;
}

@media(max-width:355px){
  .page{padding-inline:12px}
  .s3v6-title{font-size:28px}
  .s3v6-section-tag{font-size:11.3px}
  .s3v6-path{
    transform:scale(.965);
    transform-origin:top center;
    margin-bottom:-43px;
  }
}


/* ===== S3 integrated into the S4–S11 page ===== */
.fitra-s3{
  width:100%;
  min-height:0;
  padding:36px 16px 22px;
  overflow:hidden;
  background:transparent;
  color:#17303B;
  font-family:"Tajawal",Tahoma,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.fitra-s3, .fitra-s3 *{box-sizing:border-box;}
/* The recap closes S3; S4's floating tag opens the next idea without a large dead zone. */
.fitra-s3 .s3v6-footer{padding-bottom:0;}
.fitra-s3 + .pre-s4 .s4{padding-top:36px;}



/* FITRA S7 CONTINUITY PATCH */
.fitra-landing-frame #s7 {
  background: rgb(250, 249, 245);
}

.fitra-landing-frame #s7 .product-stage {
  height: auto;
  margin-top: -4px;
  padding-bottom: 0;
  overflow: hidden;
}

.fitra-landing-frame #s7 .product-stage::before {
  display: none;
}

.fitra-landing-frame #s7 .product {
  position: relative;
  z-index: 2;
  left: auto;
  top: auto;
  width: 100%;
  max-width: 100%;
  transform: none;
  display: block;
  filter: none;
}

.fitra-landing-frame #s7 .content-card {
  z-index: 5;
  margin: -18px 0 0;
  border-radius: 30px 30px 0 0;
}

/* FITRA S10 RELEASIT EMBED */
.fitra-landing-frame #s10 .fitra-releasit-block,
.fitra-landing-frame #s10 .rsi-app-block-container,
.fitra-landing-frame #s10 .rsi-form-wrapper-embedded {
  width: 100% !important;
  max-width: none !important;
}

.fitra-landing-frame #s10 ._rsi_main_form_element {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  font-family: Tajawal, Arial, sans-serif !important;
  direction: rtl !important;
}

.fitra-landing-frame #s10 .rsi-form-header,
.fitra-landing-frame #s10 .rsi-form-spacer,
.fitra-landing-frame #s10 .rsi-product-details-wrapper,
.fitra-landing-frame #s10 .rsi-shipping-rates-wrapper,
.fitra-landing-frame #s10 .rsi-custom-text {
  display: none !important;
}

.fitra-landing-frame #s10 .rsi-form-content-wrapper,
.fitra-landing-frame #s10 .rsi-form-page-wrapper,
.fitra-landing-frame #s10 .rsi-form-page-content,
.fitra-landing-frame #s10 .rsi-layout-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.fitra-landing-frame #s10 .rsi-text-input-wrapper {
  margin: 0 0 11px !important;
}

.fitra-landing-frame #s10 .rsi-text-input-label {
  display: none !important;
}

.fitra-landing-frame #s10 .rsi-text-input-row {
  width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  overflow: hidden !important;
  border: 1px solid rgba(23,48,59,.12) !important;
  border-radius: 15px !important;
  background: #FCFBF8 !important;
  box-shadow: none !important;
}

.fitra-landing-frame #s10 .rsi-text-input-icon {
  width: 44px !important;
  min-width: 44px !important;
  height: 100% !important;
  color: #176B7A !important;
  background: #F4F8F7 !important;
}

.fitra-landing-frame #s10 .rsi-text-input-icon .rsi-icon {
  width: 22px !important;
  height: 22px !important;
}

.fitra-landing-frame #s10 .rsi-text-input-field {
  width: 100% !important;
  height: 100% !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #17303B !important;
  box-shadow: none !important;
  font-family: Tajawal, Arial, sans-serif !important;
  font-size: 14px !important;
  text-align: right !important;
  -webkit-text-fill-color: #17303B !important;
}

.fitra-landing-frame #s10 .rsi-text-input-row:focus-within {
  border-color: #176B7A !important;
  box-shadow: 0 0 0 3px rgba(23,107,122,.08) !important;
}

.fitra-landing-frame #s10 .rsi-custom-button-wrapper,
.fitra-landing-frame #s10 .rsi-custom-button-row {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fitra-landing-frame #s10 .rsi-submit_button {
  width: 100% !important;
  min-height: 55px !important;
  margin: 5px 0 0 !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: #176B7A !important;
  color: #fff !important;
  box-shadow: 0 12px 25px rgba(23,107,122,.18) !important;
  font-family: Tajawal, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

.fitra-landing-frame #s10 .fitra-app-placeholder {
  margin: 0;
  color: #64767D;
  font-size: 13px;
}

/* FITRA S10 BUTTON LABEL */
.fitra-landing-frame #s10 .rsi-submit_button .rsi-custom-button-content span {
  font-size: 0 !important;
}
.fitra-landing-frame #s10 .rsi-submit_button .rsi-custom-button-content span::after {
  content: "أرسل طلبك";
  font-family: Tajawal, Arial, sans-serif;
  font-size: 16px;
  font-weight: 850;
}

/* FITRA S10 FORM COMPACT */
.fitra-landing-frame #s10 .rsi-layout-wrapper {
  gap: 11px !important;
}
.fitra-landing-frame #s10 .rsi-layout-wrapper > div:nth-child(-n+5) {
  display: none !important;
}
.fitra-landing-frame #s10 .rsi-text-input-wrapper {
  margin: 0 !important;
}

/* FITRA S10 FIELD ORDER */
.fitra-landing-frame #s10 .rsi-layout-wrapper > div:nth-child(6) { order: 1; }
.fitra-landing-frame #s10 .rsi-layout-wrapper > div:nth-child(7) { order: 2; }
.fitra-landing-frame #s10 .rsi-layout-wrapper > div:nth-child(9) { order: 3; }
.fitra-landing-frame #s10 .rsi-layout-wrapper > div:nth-child(8) { order: 4; }
.fitra-landing-frame #s10 .rsi-layout-wrapper > div:nth-child(10) { order: 5; }


/* FITRA MOBILE STICKY CTA */
.fitra-mobile-sticky-cta {
  display: none;
}

@media (max-width: 749px) {
  .fitra-mobile-sticky-cta {
    position: fixed;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 16px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 13px 20px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: #176b7a;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(23, 107, 122, 0.32);
    font-family: 'Tajawal', Arial, sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  .fitra-mobile-sticky-cta:hover,
  .fitra-mobile-sticky-cta:focus-visible {
    color: #ffffff;
    background: #115a67;
    text-decoration: none;
  }

  .fitra-mobile-sticky-cta.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    pointer-events: none;
  }
}