/* Fiqrah compare section (.fqx) — "14 apps vs one Fiqrah". Tokens follow fiqrah.css (ink #202020, Jakarta/Inter, 15–24px radii). */
.fqx{--ink:#202020;--txt:#292d34;--slate:#646464;--ash:#838383;--fog:#b3b3b3;--line:#ececec;--mist:#f7f7f8;--vio:#6647f0;--vio-bg:#f2f0ff;--save:#3ddc84;--dark:#141418;--dark2:#1f1f25;--dark3:#2a2a31;
  position:relative;padding:120px 0 40px;font-family:var(--inter,Inter,system-ui,sans-serif)}
.fqx *{box-sizing:border-box}
.fqx .fqx-m{font-variant-numeric:tabular-nums;white-space:nowrap}
.fqx-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:6px 12px;border-radius:999px;background:var(--vio-bg);color:var(--vio);
  font-family:var(--mono,"Sometype Mono",monospace);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.4px;text-transform:uppercase}
.fqx-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(102,71,240,.15)}
.fqx-sub{max-width:640px;margin-left:auto;margin-right:auto}

.fqx-wrap{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:24px;align-items:start;margin-top:48px}

/* ---- list ---- */
.fqx-list{border:1px solid var(--line);border-radius:24px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(16,16,20,.03),0 12px 40px rgba(16,16,20,.05)}
.fqx-head,.fqx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 96px 44px;align-items:center;column-gap:14px;padding:0 20px 0 24px}
[dir=rtl] .fqx-head,[dir=rtl] .fqx-row{padding:0 24px 0 20px}
.fqx-head{height:46px;white-space:nowrap;background:var(--mist);border-bottom:1px solid var(--line);font-size:12px;line-height:16px;font-weight:600;letter-spacing:.2px;color:var(--ash);text-transform:uppercase}
.fqx-head span:nth-child(3){text-align:end}.fqx-head span:nth-child(4){text-align:center;color:var(--vio)}
.fqx-row{position:relative;min-height:60px;border-top:1px solid #f3f3f4;transition:background-color .2s}
.fqx-head+.fqx-row{border-top:0}
.fqx-row:hover{background:#fbfbfc}
.fqx-ft{min-width:0;font-size:15px;line-height:20px;font-weight:600;letter-spacing:-.2px;color:var(--ink);transition:color .2s}
.fqx-tip{position:relative;border-bottom:1px dashed #c4c4ca;padding-bottom:1px;outline:none}
.fqx-tt{position:absolute;z-index:5;bottom:calc(100% + 10px);inset-inline-start:-6px;width:max-content;max-width:260px;padding:10px 12px;border-radius:12px;background:var(--dark);color:#fff;
  font-size:13px;line-height:18px;font-weight:450;letter-spacing:0;white-space:normal;box-shadow:0 10px 30px rgba(0,0,0,.18);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .18s,transform .18s}
.fqx-tt::after{content:"";position:absolute;top:100%;inset-inline-start:16px;border:6px solid transparent;border-top-color:var(--dark)}
.fqx-tip:hover .fqx-tt,.fqx-tip:focus .fqx-tt,.fqx-tip.open .fqx-tt{opacity:1;transform:none}
.fqx-from{display:flex;flex-wrap:wrap;gap:6px;min-width:0;padding:8px 0}
.fqx-from i{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font-style:normal;font-size:12.5px;line-height:16px;font-weight:600;color:var(--txt);padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:10px;background:#fff;white-space:nowrap;box-shadow:0 1px 2px rgba(16,16,20,.04)}
[dir=rtl] .fqx-from i{padding:4px 4px 4px 10px}
.fqx-from img{display:block;flex:0 0 auto;width:20px;height:20px;border-radius:6px;object-fit:contain}
.fqx-pr{text-align:end;font-size:15px;line-height:20px;font-weight:600;color:var(--ink);transition:color .2s,opacity .2s}
.fqx-ok{display:flex;justify-content:center}
.fqx-ok svg{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--vio-bg);color:var(--vio);transition:background-color .2s,color .2s}

/* reveal */
.fqx.js:not(.in) .fqx-row{opacity:0;transform:translateY(10px)}
.fqx.in .fqx-row{opacity:1;transform:none;transition:opacity .5s cubic-bezier(.33,1,.68,1) calc(var(--i)*45ms),transform .5s cubic-bezier(.33,1,.68,1) calc(var(--i)*45ms),background-color .2s}

/* ---- summary (dark receipt) ---- */
.fqx-sum{position:sticky;top:96px;padding:26px;border-radius:24px;background:var(--dark);color:#fff;overflow:hidden;isolation:isolate;box-shadow:0 20px 60px rgba(16,16,20,.18)}
.fqx-sum::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,#f76808,#ff02f0 35%,#6647f0 65%,#0091ff);opacity:.9}
.fqx-lbl{font-size:13px;line-height:18px;font-weight:500;color:#9a9aa0}
.fqx-lbl b{color:#fff;font-weight:600;margin-inline-start:6px}
.fqx-cntl{color:#9a9aa0}
.fqx-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-top:6px}
.fqx-big .fqx-m{font-family:var(--jak,"Plus Jakarta Sans",sans-serif);font-size:38px;line-height:44px;font-weight:700;letter-spacing:-1.2px}
.fqx-per{font-size:14px;color:#9a9aa0;font-weight:500}
.fqx-strike{position:relative;display:inline-block;color:#d9d9de}
.fqx-strike::after{content:"";position:absolute;inset-inline-start:-4px;top:52%;height:3px;width:0;border-radius:3px;background:#ff492c;transform:rotate(-4deg);transition:width .7s cubic-bezier(.65,0,.35,1) .35s}
[dir=rtl] .fqx-strike::after{transform:rotate(4deg)}
.fqx.in .fqx-strike::after{width:calc(100% + 8px)}
.fqx-bill{padding-bottom:20px;border-bottom:1px dashed var(--dark3)}
.fqx-fq{padding:20px 0;border-bottom:1px dashed var(--dark3)}
.fqx-plans{display:flex;gap:4px;margin-top:10px;padding:4px;border-radius:12px;background:var(--dark2)}
.fqx-plans button,.fqx-cycle button{flex:1;appearance:none;border:0;cursor:pointer;font:inherit;font-size:13.5px;line-height:18px;font-weight:600;color:#b4b4bb;background:transparent;padding:8px 6px;border-radius:9px;transition:background-color .2s,color .2s}
.fqx-plans button:hover,.fqx-cycle button:hover{color:#fff}
.fqx-plans button.on{background:#fff;color:var(--ink)}
.fqx-fqp .fqx-m{color:#fff}
.fqx-cycle{display:flex;gap:6px;margin-top:12px}
.fqx-cycle button{flex:0 0 auto;padding:6px 10px;border:1px solid var(--dark3);font-size:12.5px}
.fqx-cycle button.on{border-color:#fff;color:#fff}
.fqx-cycle em{font-style:normal;color:var(--save);font-weight:500;margin-inline-start:4px}
.fqx-keep{padding-top:20px}
.fqx-keepl{font-size:13px;color:#9a9aa0;font-weight:500}
.fqx-keepv .fqx-m{display:inline-block;margin-top:2px;font-family:var(--jak,"Plus Jakarta Sans",sans-serif);font-size:44px;line-height:50px;font-weight:750;letter-spacing:-1.6px;color:var(--save)}
.fqx-keeps{margin-top:2px;font-size:13px;line-height:18px;color:#b4b4bb}
.fqx-keeps b{color:#fff}
.fqx-meter{position:relative;height:8px;margin-top:14px;border-radius:99px;background:#3a2a2a;overflow:hidden}
.fqx-meter::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,73,44,.55) 0 6px,rgba(255,73,44,.35) 6px 12px)}
.fqx-meter-fq{position:relative;display:block;height:100%;border-radius:99px;background:#fff;transition:width .6s cubic-bezier(.33,1,.68,1)}
.fqx-pts{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.fqx-pts li{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:#e4e4e8}
.fqx-pts svg{flex:0 0 auto;width:16px;height:16px;color:var(--save)}
.fqx-ctas{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.fqx-ctas .q-btn{flex:1 1 auto}
.fqx-link{font-size:14px;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#5a5a62}
.fqx-link:hover{text-decoration-color:#fff}

/* ---- also + note ---- */
.fqx-also{margin-top:28px;text-align:center}
.fqx-also p{margin:0 0 12px;font-size:14px;font-weight:600;color:var(--ink)}
.fqx-also ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.fqx-also li{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13.5px;line-height:18px;font-weight:500;color:var(--txt)}
.fqx-also svg{width:14px;height:14px;color:var(--vio)}
.fqx-note{max-width:780px;margin:22px auto 0;text-align:center;font-size:12px;line-height:18px;color:var(--fog)}

/* ---- mobile sticky savings bar ---- */
.fqx-bar{display:none}

@media (max-width:1100px){.fqx-head{white-space:normal;height:auto;min-height:46px;padding-top:8px;padding-bottom:8px}.fqx-wrap{grid-template-columns:minmax(0,1fr) 330px}.fqx-head,.fqx-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 88px 40px}}
@media (max-width:900px){
  .fqx{padding-top:88px}
  .fqx-wrap{grid-template-columns:1fr;margin-top:32px}
  .fqx-sum{position:relative;top:0}
  .fqx-head{display:none}
  .fqx-row,[dir=rtl] .fqx-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ft pr" "from pr";row-gap:8px;padding:14px 16px;min-height:0}
  .fqx-ft{grid-area:ft}.fqx-from{grid-area:from}.fqx-pr{grid-area:pr}
  .fqx-ok{display:none}
  .fqx-from{padding:0}
  .fqx-from i{font-size:12px;padding:3px 9px 3px 3px}[dir=rtl] .fqx-from i{padding:3px 3px 3px 9px}
  .fqx-from img{width:18px;height:18px;border-radius:5px}
  .fqx-tt{max-width:min(260px,70vw)}
  .fqx-bar{position:fixed;z-index:60;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:16px;background:var(--dark);color:#fff;
    box-shadow:0 12px 32px rgba(0,0,0,.25);font-size:13px;transform:translateY(140%);transition:transform .35s cubic-bezier(.33,1,.68,1);pointer-events:none}
  .fqx-bar.show{transform:none}
  .fqx-bar-l{color:#9a9aa0}.fqx-bar-v .fqx-m{font-size:17px;font-weight:700;color:var(--save)}.fqx-bar-s{color:#9a9aa0}
}
@media (max-width:420px){.fqx-big .fqx-m{font-size:32px;line-height:38px}.fqx-keepv .fqx-m{font-size:36px;line-height:42px}.fqx-sum{padding:22px 18px}}
@media (prefers-reduced-motion:reduce){.fqx .fqx-row{opacity:1;transform:none;transition:none}.fqx-strike::after{transition:none}}

/* Arabic: no mono/letter-spacing (it breaks letter joining) */
.fqx[data-lang=ar] .fqx-eyebrow{font-family:var(--ar,"IBM Plex Sans Arabic",sans-serif);letter-spacing:0;text-transform:none;font-size:13px;font-weight:600}
.fqx[data-lang=ar] .fqx-head{letter-spacing:0;text-transform:none;font-size:13px}
.fqx[data-lang=ar] .fqx-ft,.fqx[data-lang=ar] .fqx-tt,.fqx[data-lang=ar] .fqx-lbl,.fqx[data-lang=ar] .fqx-keeps,.fqx[data-lang=ar] .fqx-pts li{letter-spacing:0}