/* ---------- ABOUT TUQQA ---------- */
/* The nine-step deal keeps the old deck's role chips — Seller / Buyer /
   Tuqqa.com — because naming who acts in each step is the clearest part of
   that design. Everything else is built in markup rather than shipped as a
   flat image, so it translates, mirrors under RTL and reflows on a phone. */

.ab-head{background:linear-gradient(120deg,#0c3b68 0%,#155a97 55%,#1c7ac4 100%);color:#fff;position:relative;overflow:hidden}
.ab-head:after{content:"";position:absolute;inset-inline-end:-90px;top:-80px;width:440px;height:440px;background:radial-gradient(circle,rgba(238,122,43,.32),transparent 62%)}
.ab-head .wrap{padding:48px 20px 44px;position:relative;z-index:2}
.ab-head .tag{display:inline-block;background:rgba(238,122,43,.2);border:1px solid rgba(238,122,43,.55);color:#ffd0a5;font-size:12.5px;font-weight:700;padding:5px 13px;border-radius:20px;margin-bottom:16px}
.ab-head h1{font-size:35px;font-weight:800;letter-spacing:-.7px;line-height:1.2;max-width:24ch}
.ab-urdu{font-size:26px;font-weight:700;color:var(--amber);margin:12px 0 6px}
.ab-lead{color:#cfe0f0;font-size:15.5px;max-width:62ch;line-height:1.6}
.ab-stats{display:flex;gap:34px;margin-top:28px;flex-wrap:wrap}
.ab-stats b{font-size:25px;display:block;color:var(--amber)}
.ab-stats span{font-size:12.5px;color:#cfe0f0}

/* Mission */
.ab-mission{display:flex;gap:22px;align-items:center;background:linear-gradient(115deg,#f4f8fd 0%,#fff8f0 100%);
            border:1px solid #d9e3ed;border-radius:16px;padding:26px 30px;flex-wrap:wrap}
.ab-mission-mark{font-size:42px;line-height:1;flex:none}
.ab-mission>div:last-child{flex:1;min-width:260px}
.ab-mission h2{font-size:21px;color:var(--navy);font-weight:800;margin-bottom:7px;letter-spacing:-.3px}
.ab-mission p{font-size:15px;color:#42525f;line-height:1.65;max-width:70ch}

/* The nine steps */
.ab-flow{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ab-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
          column-gap:var(--ab-gap-x);row-gap:var(--ab-gap-y);padding:0;margin:0;
          --ab-gap-x:36px;--ab-gap-y:32px;--ab-arrow:#7ea6c9}
.ab-step{display:flex;flex-direction:column;gap:0;position:relative}

/* Connectors. The steps run as a serpentine — row one left to right, row two
   back the other way, row three forward again — so the arrow never has to
   jump the reader across the page. Chevrons are drawn from two borders, so
   they mirror under RTL with no glyph or image. Decorative only: the <ol>
   carries the real order.

   Each arrow's shape is a set of custom properties, so a breakpoint only has
   to say which cards point forward, back or down. */
.ab-step:after{
  content:"";position:absolute;pointer-events:none;
  width:13px;height:13px;
  border-top:3px solid var(--ab-arrow);
  border-right:3px solid var(--ab-arrow);
  /* The role chips sit above the card, so the body's centre is ~12px below
     the list item's own centre. */
  top:var(--arw-t,calc(50% + 12px));
  bottom:var(--arw-b,auto);
  inset-inline-end:var(--arw-e,calc(var(--ab-gap-x) / -2));
  inset-inline-start:var(--arw-s,auto);
  transform:var(--arw-tr,translate(50%,-50%) rotate(45deg));
}
[dir="rtl"] .ab-step:after{transform:var(--arw-tr-rtl,translate(-50%,-50%) rotate(-135deg))}

/* The two non-default shapes. Which card gets which depends on the column
   count, so they are assigned per breakpoint rather than as markup classes. */
@media(min-width:981px){
  /* 1 2 3 / 6 5 4 / 7 8 9 — read 1-9 */
  .ab-step:nth-child(1){grid-row:1;grid-column:1}
  .ab-step:nth-child(2){grid-row:1;grid-column:2}
  .ab-step:nth-child(3){grid-row:1;grid-column:3}
  .ab-step:nth-child(4){grid-row:2;grid-column:3}
  .ab-step:nth-child(5){grid-row:2;grid-column:2}
  .ab-step:nth-child(6){grid-row:2;grid-column:1}
  .ab-step:nth-child(7){grid-row:3;grid-column:1}
  .ab-step:nth-child(8){grid-row:3;grid-column:2}
  .ab-step:nth-child(9){grid-row:3;grid-column:3}

  /* middle row runs backwards */
  .ab-step:nth-child(4),.ab-step:nth-child(5){
    --arw-e:auto;--arw-s:calc(var(--ab-gap-x) / -2);
    --arw-tr:translate(-50%,-50%) rotate(-135deg);
    --arw-tr-rtl:translate(50%,-50%) rotate(45deg);
  }
  /* end of a row drops to the next */
  .ab-step:nth-child(3),.ab-step:nth-child(6){
    --arw-t:auto;--arw-b:calc(var(--ab-gap-y) / -2);--arw-e:auto;--arw-s:50%;
    --arw-tr:translate(-50%,50%) rotate(135deg);
    --arw-tr-rtl:translate(50%,50%) rotate(135deg);
  }
}

@media(max-width:980px) and (min-width:761px){
  /* the same snake, one pair per row */
  .ab-step:nth-child(1){grid-row:1;grid-column:1}
  .ab-step:nth-child(2){grid-row:1;grid-column:2}
  .ab-step:nth-child(3){grid-row:2;grid-column:2}
  .ab-step:nth-child(4){grid-row:2;grid-column:1}
  .ab-step:nth-child(5){grid-row:3;grid-column:1}
  .ab-step:nth-child(6){grid-row:3;grid-column:2}
  .ab-step:nth-child(7){grid-row:4;grid-column:2}
  .ab-step:nth-child(8){grid-row:4;grid-column:1}
  .ab-step:nth-child(9){grid-row:5;grid-column:1}

  .ab-step:nth-child(3),.ab-step:nth-child(7){
    --arw-e:auto;--arw-s:calc(var(--ab-gap-x) / -2);
    --arw-tr:translate(-50%,-50%) rotate(-135deg);
    --arw-tr-rtl:translate(50%,-50%) rotate(45deg);
  }
  .ab-step:nth-child(2),.ab-step:nth-child(4),
  .ab-step:nth-child(6),.ab-step:nth-child(8){
    --arw-t:auto;--arw-b:calc(var(--ab-gap-y) / -2);--arw-e:auto;--arw-s:50%;
    --arw-tr:translate(-50%,50%) rotate(135deg);
    --arw-tr-rtl:translate(50%,50%) rotate(135deg);
  }
}

/* One column: every card simply drops to the next. */
@media(max-width:760px){
  .ab-step{
    --arw-t:auto;--arw-b:calc(var(--ab-gap-y) / -2);--arw-e:auto;--arw-s:50%;
    --arw-tr:translate(-50%,50%) rotate(135deg);
    --arw-tr-rtl:translate(50%,50%) rotate(135deg);
  }
}

.ab-step:last-child:after{content:none}
.ab-roles{display:flex;margin-inline-start:34px}
.ab-role{font-size:11px;font-weight:750;padding:4px 13px;color:#fff;line-height:1.45}
.ab-role:first-child{border-radius:8px 0 0 0}
.ab-role:last-child{border-radius:0 8px 0 0}
.ab-role:only-child{border-radius:8px 8px 0 0}
[dir="rtl"] .ab-role:first-child{border-radius:0 8px 0 0}
[dir="rtl"] .ab-role:last-child{border-radius:8px 0 0 0}
[dir="rtl"] .ab-role:only-child{border-radius:8px 8px 0 0}
.ab-role--seller{background:var(--orange)}
.ab-role--buyer{background:#20344a}
/* Distinctly yellow, as in the original deck — var(--amber) sits too close
   to the seller orange to tell apart at chip size. */
.ab-role--tuqqa{background:#f7cf4d;color:#4a3505}

.ab-step-body{flex:1;display:flex;gap:13px;background:linear-gradient(120deg,#12588f,#1c7ac4);color:#fff;
              border-radius:14px;padding:16px 18px;box-shadow:0 5px 18px rgba(12,59,104,.14)}
.ab-step-icon{width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;
              justify-content:center;font-size:23px;flex:none}
.ab-step h3{font-size:15.5px;font-weight:750;margin-bottom:5px;line-height:1.3}
.ab-step .ab-n{color:var(--amber)}
.ab-step p{font-size:13px;color:#d8e8f6;line-height:1.55}
.ab-flow-note{margin-top:20px;font-size:12.5px;color:var(--muted);max-width:90ch;line-height:1.6}

/* Two audiences */
.ab-side-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ab-side{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px;
         box-shadow:0 4px 16px rgba(15,83,145,.05);display:flex;flex-direction:column}
.ab-side h2{font-size:20px;color:var(--navy);font-weight:800;letter-spacing:-.3px}
.ab-side>p{font-size:13.5px;color:var(--muted);margin:6px 0 16px;max-width:46ch}
.ab-side ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.ab-side li{font-size:14px;color:#42525f;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.ab-side li:before{content:"✔";font-weight:800;flex:none;line-height:1.4}
.ab-side--sell{border-top:3px solid var(--orange)}
.ab-side--sell li:before{color:var(--orange2)}
.ab-side--buy{border-top:3px solid var(--blue)}
.ab-side--buy li:before{color:var(--green)}
.ab-side .btn{align-self:flex-start}

/* What we keep private */
.ab-keep-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ab-keep-grid>div{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px 19px}
.ab-keep-grid b{display:block;font-size:14px;color:var(--navy);margin-bottom:6px}
.ab-keep-grid p{font-size:12.8px;color:var(--muted);line-height:1.6}

/* Closing call to action */
.ab-cta{background:linear-gradient(120deg,#0c3b68,#1c7ac4);color:#fff;border-radius:18px;padding:30px 34px;
        display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.ab-cta>div:first-child{flex:1;min-width:280px}
.ab-cta h2{font-size:22px;font-weight:800;margin-bottom:7px;letter-spacing:-.3px}
.ab-cta p{font-size:14px;color:#cfe0f0;max-width:58ch;line-height:1.6}
.ab-cta-btns{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:980px){
  .ab-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ab-keep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .ab-head h1{font-size:27px}
  .ab-urdu{font-size:22px}
  /* minmax(0,…) rather than a bare 1fr: a bare 1fr floors at min-content and
     can push the grid wider than the screen. */
  .ab-steps,.ab-side-grid,.ab-keep-grid{grid-template-columns:minmax(0,1fr)}
  .ab-steps{--ab-gap-y:34px}
  .ab-stats{gap:22px}
  .ab-mission,.ab-side,.ab-cta{padding:22px 20px}
}