:root{--bg:#F6F6F3;--panel:#FFFFFF;--line:#E4E3DD;--line-2:#EEEDE8;--text:#16181D;--muted:#6A6960;--faint:#9A998F;--accent:#C6F432;--ink:#0D0E12;
  --font:'Readex Pro',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;color-scheme:light}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--text);font:400 14px/1.6 var(--font)}
.in{max-width:760px;margin:0 auto;padding-inline:20px}
.top{background:var(--panel);border-bottom:1px solid var(--line)}
.top .in{height:52px;display:flex;align-items:center;gap:10px}
.logo{font-size:16px;font-weight:600}
.tag{font-size:12px;color:var(--ink);background:var(--accent);padding:2px 8px;border-radius:4px}
.main{padding-top:28px;padding-bottom:56px;display:grid;gap:22px}
.intro h1{font-size:20px;font-weight:600;line-height:1.4}
.intro p{color:var(--muted);margin-top:6px;max-width:56ch}
.group{background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.group h2{font-size:12.5px;font-weight:500;color:var(--muted);padding:10px 16px;border-bottom:1px solid var(--line-2);background:#FAFAF7}
.row{display:grid;grid-template-columns:1fr 16px;align-items:center;gap:14px;padding:13px 16px;text-decoration:none;color:inherit;border-top:1px solid var(--line-2);min-height:56px}
.group h2+.row{border-top:0}
.row b{display:block;font-size:14.5px;font-weight:500}
.row small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
/* physical arrow: in Arabic "go" points left */
.row i{width:16px;height:16px;background:currentColor;opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.row:active{background:#FAFAF7}
@media (hover:hover){.row:hover{background:#FAFAF7}.row:hover i{opacity:1}}
.row:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.try-in{display:grid;grid-template-columns:1fr auto;gap:20px;padding:14px 16px;align-items:center}
.try ol{padding-inline-start:18px;display:grid;gap:6px;color:var(--muted)}
.try ol b{color:var(--text);font-weight:500}
.qr{display:grid;justify-items:center;gap:4px}
.qr #qr{width:112px;height:112px;padding:6px;border:1px solid var(--line);border-radius:6px;background:#fff}
.qr #qr svg{display:block;width:100%;height:100%}
.qr small{font-size:11.5px;color:var(--faint)}
@media (max-width:560px){
  .in{padding-inline:14px}
  .main{padding-top:20px;gap:16px}
  .intro h1{font-size:18px}
  .try-in{grid-template-columns:1fr}
  .qr{justify-self:start}
}
.group>.row:first-child{border-top:0}