/* Sign-in page: bilingual, fits one screen on desktop.
   The story panel is always the dark "night stable"; the form side follows the theme. */
.login-page{--night:#16201b;--night-2:#1e2a24;--cream:#f1ead9;--cream-2:#bfb8a6;--hay-l:#d8a543;--line-n:#2c3a33}
.login{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(380px,.8fr);height:100vh;height:100dvh;overflow:hidden}

/* bilingual pairs */
.pair{display:flex;flex-direction:column}
.pair .p2{opacity:.72;font-size:.82em;font-weight:inherit}
/* the second language keeps its own direction but lines up with the first */
html[dir="rtl"] .pair .p2{text-align:right}
html[dir="ltr"] .pair .p2{text-align:left}
.pair.inline .p2{text-align:initial}
.pair.inline{flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
.pair.inline .p2{font-weight:500}
[lang="ar"]{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",sans-serif}
[lang="en"]{font-family:"IBM Plex Sans","IBM Plex Sans Arabic",sans-serif}

/* ---------- Story panel ---------- */
.story{position:relative;overflow:hidden;background:var(--night);color:var(--cream);
  padding:clamp(22px,4.5vh,48px) clamp(28px,5vw,72px) clamp(18px,3vh,32px);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(14px,2.6vh,30px)}
.story .watermark{position:absolute;inset-inline-end:-6%;top:-4%;height:118%;width:auto;fill:#fff;opacity:.035;pointer-events:none}
.mark{display:flex;align-items:center;gap:16px;position:relative}
.mark img{border-radius:13px;width:clamp(42px,6vh,54px);height:auto}
.lockup{display:flex;flex-direction:column;line-height:1}
.logotype{font-family:"Reem Kufi",serif!important;font-weight:700;font-size:clamp(2.4rem,6.2vh,3.8rem);color:var(--cream)}
.wordmark{font-weight:500;font-size:.74rem;letter-spacing:.5em;color:var(--hay-l);margin-top:8px}
.pitch{position:relative;max-width:40rem;display:grid;gap:clamp(8px,1.6vh,16px)}
.eyebrow{margin:0;color:var(--hay-l);font-weight:600;font-size:.92rem;flex-direction:row;gap:12px;flex-wrap:wrap;align-items:baseline}
.eyebrow .p2{letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;opacity:.9}
.headline{margin:0;color:#fff;font-weight:600;font-size:clamp(1.6rem,4vh,2.45rem);line-height:1.35}
.headline .p2{font-size:.62em;font-weight:500;color:var(--cream-2);opacity:1;margin-top:6px;line-height:1.35}
.lede{margin:0;color:var(--cream-2);font-size:clamp(.88rem,1.8vh,1rem);line-height:1.65;max-width:36rem}
.lede .p2{font-size:.9em;margin-top:4px}
.features{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.6vh,26px) 26px;position:relative}
.features li{display:flex;gap:13px;align-items:flex-start}
.features .ic{flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-n);background:var(--night-2);display:grid;place-items:center;color:var(--hay-l)}
.features .ic svg{width:19px;height:19px}
.features .ft{font-size:.98rem;font-weight:600;color:#fff;line-height:1.3;margin-bottom:5px}
.features .ft .p2{color:var(--hay-l);opacity:.85;font-weight:500;font-size:.78rem;margin-top:1px}
.features .fd{font-size:.86rem;line-height:1.55;color:var(--cream-2)}
.features .fd .p2{font-size:.8rem;opacity:.75;margin-top:3px;line-height:1.45}
.credit{position:relative}
.credit .rule{display:block;width:44px;height:2px;background:var(--hay-l);margin-bottom:10px}
.credit p{margin:0;color:var(--cream);font-size:.92rem;font-weight:500}
.credit .by{color:var(--cream-2);font-weight:400}
.credit .by strong{color:var(--cream);font-weight:600}
html[dir="rtl"] .credit .by{text-align:right}
.credit .fine{font-size:.72rem;color:#7f8c85;margin-top:6px}

/* ---------- Sign-in panel ---------- */
.signin{background:var(--bg);display:flex;align-items:center;justify-content:center;padding:28px 24px;position:relative;overflow-y:auto}
.lang-switch{position:absolute;top:20px;inset-inline-end:24px}
.lang-switch a{display:inline-flex;align-items:center;gap:7px;color:var(--ink-2);font-size:.88rem;padding:6px 12px;border-radius:99px;border:1px solid var(--line)}
.lang-switch a:hover{background:var(--surface);text-decoration:none}
.lang-switch svg{width:16px;height:16px}
.signin-card{width:100%;max-width:380px;display:grid;gap:14px}
.signin-card .card-logo{display:none}
.signin-card h2{margin:0;font-weight:600;font-size:1.75rem;color:var(--ink)}
.signin-card h2 .p1[lang="en"]{font-family:"Reem Kufi","IBM Plex Sans",sans-serif;font-weight:500}
.signin-card h2 .p2{font-size:.6em;font-weight:500;margin-top:2px}
.signin-card > p.muted{margin:-8px 0 2px;font-size:.95rem}
.signin-card label{font-size:.86rem}
.signin-card input{padding:11px 13px;font-size:1rem}
.pw{position:relative}
.pw input{padding-inline-end:44px}
.reveal{position:absolute;inset-block:0;inset-inline-end:4px;background:none;border:0;color:var(--muted);cursor:pointer;padding:0 9px}
.reveal svg{width:18px;height:18px}
.btn-block{width:100%;padding:12px 16px;font-size:1rem;margin-top:2px}
.btn .arrow{width:18px;height:18px}
[dir="rtl"] .btn .arrow{transform:scaleX(-1)}
.note{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;color:var(--muted);margin:2px 0 0}
.note > svg{width:16px;height:16px;flex:none;margin-top:2px}
.iface{font-size:.76rem;margin:0}

/* Short desktop screens: drop the lede before anything overflows */
@media (min-width: 901px) and (max-height: 820px){ .lede .p2{display:none} .features .fd .p2{display:none} }
@media (min-width: 901px) and (max-height: 700px){ .lede{display:none} .features .fd{display:none} }
@media (min-width: 901px) and (max-width: 1250px){ .features{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- Small screens: normal scrolling, form first ---------- */
@media (max-width: 900px){
  .login{grid-template-columns:1fr;height:auto;overflow:visible}
  .signin{order:-1;padding:72px 20px 34px;overflow:visible}
  .signin-card .card-logo{display:block;border-radius:12px}
  .story{padding:32px 22px 28px;gap:24px}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion: no-preference){
  .signin-card{animation:rise .45s ease both}
  @keyframes rise{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
}