/* Payment details: same tokens as sessions, the blog and Ask (dark-first, emerald accent, RTL). */
:root{
  --bg:#060b16; --surface:#0d1524; --surface-2:#131d30;
  --fg:#dfe6ee; --fg-strong:#f4f7fa; --muted:#8f9cb0; --faint:#5d6a7e;
  --line:rgba(148,163,184,.14); --line-strong:rgba(148,163,184,.26);
  --accent:#34d399; --accent-ink:#6ee7b7; --accent-soft:rgba(52,211,153,.12); --on-accent:#03140d;
  --glow:rgba(16,185,129,.16); --shadow:0 18px 50px -20px rgba(0,0,0,.6);
  --f-display:"Readex Pro","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#fbfcfb; --surface:#ffffff; --surface-2:#f1f5f3;
  --fg:#273244; --fg-strong:#0f1724; --muted:#5f6b7d; --faint:#94a0b1;
  --line:rgba(15,23,42,.09); --line-strong:rgba(15,23,42,.16);
  --accent:#047857; --accent-ink:#047857; --accent-soft:rgba(4,120,87,.09); --on-accent:#ffffff;
  --glow:rgba(16,185,129,.10); --shadow:0 18px 50px -24px rgba(15,23,42,.25);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.latin{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
svg{flex:none}

.glow{position:fixed;inset:-30vh -20vw auto auto;width:70vw;height:70vh;background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none;z-index:0}
.shell{position:relative;z-index:1;max-width:60rem;margin-inline:auto;padding:0 20px 96px}

.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:60rem;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;height:60px;padding-inline:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600;color:var(--fg-strong)}
.brand-mark{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font-family:var(--f-mono);font-size:12px;font-weight:700}
.tools{display:flex;align-items:center;gap:6px}
.chip{height:32px;padding-inline:12px;border-radius:99px;border:1px solid var(--line-strong);font-size:13.5px;color:var(--fg)}
.chip:hover{border-color:var(--accent)}
.tool{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;color:var(--muted)}
.tool:hover{color:var(--fg-strong);background:var(--surface-2)}
.tool svg{width:19px;height:19px}

.hero{padding-block:52px 32px;max-width:40rem}
h1,h2{font-family:var(--f-display);color:var(--fg-strong);margin:0;letter-spacing:-.01em}
h1{font-weight:700;font-size:clamp(2.2rem,6vw,3.2rem);line-height:1.15}
h2{font-weight:600;font-size:1.15rem;line-height:1.4}
.lede{font-size:clamp(1rem,2.2vw,1.1rem);color:var(--muted);margin:14px 0 0;text-wrap:pretty}

.methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:16px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px}
.card-head{display:flex;align-items:center;gap:12px}
.card-head>div{flex:1;min-width:0}
.sub{margin:0;font-size:13.5px;color:var(--muted)}
.logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.logo svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.logo{background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.logo img{display:block;width:24px;height:24px}
.logo-fill img{width:100%;height:100%}
.logo-wide{width:auto;padding-inline:12px}
.logo-wide img{width:auto;height:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tag{font-size:12px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink)}

.rows{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--line)}
.row{padding-block:10px;border-bottom:1px solid var(--line)}
.row dt{font-size:12.5px;color:var(--faint);margin-bottom:2px}
.row dd{margin:0}
.copy{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;margin-inline:-10px;width:calc(100% + 20px);border-radius:10px;text-align:start;color:var(--fg-strong);font-family:var(--f-mono);font-size:14.5px;transition:background .15s}
.copy:hover{background:var(--surface-2)}
.copy span{overflow-wrap:anywhere}
.copy i{width:16px;height:16px;flex:none;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1'/%3E%3C/svg%3E") center/contain no-repeat}
.copy.done i{background:var(--accent);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E")}
.copy:hover i{background:var(--fg-strong)}

.btn{height:44px;border-radius:12px;display:grid;place-items:center;font-weight:600;font-size:15px;background:var(--accent);color:var(--on-accent);transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--fg-strong);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);filter:none}

.note{margin:28px 0 0;color:var(--muted);font-size:14.5px}

.toast{position:fixed;inset-inline:0;bottom:24px;margin-inline:auto;width:max-content;max-width:90vw;padding:10px 18px;border-radius:99px;background:var(--fg-strong);color:var(--bg);font-weight:600;font-size:14px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:none}
.note a{color:var(--accent-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}