/* Sub-pages: apps and developers (extends home.css) */
.page-hero{padding:130px 0 80px}
.page-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:50px;align-items:center}
.page-hero h1{font-size:clamp(32px,4.4vw,56px);font-weight:800;margin:20px 0 18px}
.page-dl{margin-top:28px}
.web-link{display:inline-block;margin-top:18px;color:rgba(255,255,255,.75);font-weight:600;font-size:14.5px}
.web-link:hover{color:#fff}
.menu a[aria-current=page]{color:var(--lime)}

/* Device mock-ups */
.devices{position:relative;min-height:360px}
.laptop{position:relative;width:92%;margin-inline-start:auto}
.laptop-screen{border-radius:16px 16px 6px 6px;background:#fff;border:10px solid #1b2b28;border-bottom-width:14px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.laptop-base{height:16px;margin:0 -6%;border-radius:0 0 16px 16px;background:linear-gradient(#cfd6d3,#9aa5a1)}
.ls-bar{height:28px;display:flex;align-items:center;gap:5px;padding:0 10px;background:#f2f5f2;border-bottom:1px solid #e3e9e4;direction:ltr}
.ls-bar i{width:8px;height:8px;border-radius:50%;background:#f26b5b}.ls-bar i:nth-child(2){background:#f4bf4f}.ls-bar i:nth-child(3){background:#61c454}
.ls-bar span{margin-inline-start:auto;font:700 10px Inter;color:#7c8f88}
.ls-body{display:grid;grid-template-columns:30% 1fr;min-height:220px}
.ls-side{padding:10px;display:grid;gap:8px;align-content:start;background:#fbfcfa;border-inline-end:1px solid #eef2ef}
.ls-side b{height:26px;border-radius:9px;background:#eef3ef}.ls-side b:first-child{background:#e3f2e9}
.ls-chat{padding:14px;display:flex;flex-direction:column;gap:8px;background:#efe9df}
.phone{position:absolute;bottom:-20px;inset-inline-start:0;width:150px;height:300px;border-radius:30px;background:#111;padding:8px;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);animation:float 6s ease-in-out infinite}
.phone-notch{position:absolute;top:12px;left:50%;width:46px;height:12px;border-radius:9px;background:#111;transform:translateX(-50%);z-index:2}
.phone-screen{height:100%;border-radius:23px;background:#efe9df;padding:34px 8px 8px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.phone-screen .bub{font-size:10px;padding:6px 9px}
.phone-push{margin-top:auto;display:flex;gap:6px;align-items:center;padding:7px;border-radius:12px;background:rgba(255,255,255,.95);font-size:9.5px;box-shadow:0 8px 18px -10px rgba(0,0,0,.5);color:var(--ink)}
.phone-push img{width:18px;height:18px;border-radius:5px}
.phone-push b{display:block}

/* Platform cards */
.app-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.app-card{display:flex;flex-direction:column;gap:10px;padding:26px 22px;border-radius:24px;background:#fff;border:1px solid var(--line);transition:transform .25s,box-shadow .25s}
.app-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.app-card.is-detected{border:2px solid var(--green);box-shadow:0 26px 60px -36px rgba(28,154,108,.8)}
.app-card h2{font-size:20px;font-weight:800}
.app-card p{color:var(--muted);font-size:14px;flex:1}
.app-card-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:var(--soft);color:var(--ink)}
.app-card-icon svg{width:26px;height:26px}
.app-card-icon.win{color:#0078d4;background:#e6f1fb}
.app-card-icon.android{color:#2f9e5b;background:#e5f5eb}
.app-card .dl{width:100%;justify-content:center}
.app-card [data-apps-slot]{min-height:58px;display:flex;align-items:center}
.mini-link{font-size:13px;font-weight:600;color:var(--teal)}
.mini-link[hidden]{display:none}
.two-col{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:start}
.install{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px;counter-reset:i}
.install li{position:relative;padding:20px 22px;padding-inline-start:70px;border-radius:20px;background:#fff;border:1px solid var(--line);counter-increment:i}
.install li:before{content:counter(i);position:absolute;inset-inline-start:20px;top:20px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--deep);color:var(--lime);font:800 15px Inter}
.install b{display:block;font-size:16.5px;margin-bottom:4px}
.install p{color:var(--muted);font-size:14.5px}
.feat-box{padding:28px;border-radius:24px;background:linear-gradient(160deg,var(--deep),#134a40);color:#fff}
.feat-box h3{font-size:20px;font-weight:800;margin-bottom:14px}
.feat-box ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.feat-box li{position:relative;padding-inline-start:28px;font-size:14.5px;color:rgba(255,255,255,.85)}
.feat-box li:before{content:"";position:absolute;inset-inline-start:0;top:5px;width:18px;height:18px;border-radius:50%;background:rgba(200,241,105,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8f169' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}

/* Developers */
.dev-hero{padding:126px 0 60px}
.dev-hero h1{font-size:clamp(32px,4.2vw,54px);font-weight:800;margin:18px 0 14px}
.dev-hero .lead{max-width:680px}
.dev-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.dev-base{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font:600 13.5px ui-monospace,Menlo,monospace;color:#d6efe3;direction:ltr}
.dev-base b{color:var(--lime)}
.dev-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:34px;align-items:start}
.dev-nav{position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;padding:16px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.dev-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line);margin-bottom:12px;color:var(--muted)}
.dev-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 4px rgba(22,132,119,.12)}
.dev-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:500 14px var(--font);color:var(--ink)}
.dev-nav h4{margin:14px 6px 6px;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
html[lang=ar] .dev-nav h4{letter-spacing:0}
.dev-nav a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--ink)}
.dev-nav a:hover,.dev-nav a.is-active{background:var(--soft);color:var(--teal)}
.dev-nav a em{font-style:normal;font:800 9.5px Inter;padding:2px 5px;border-radius:5px;min-width:34px;text-align:center}
.m-GET{background:#e2efff;color:#2459c7}.m-POST{background:#ddf3e5;color:#13804c}.m-DELETE{background:#fde4dc;color:#b23b16}
.dev-main{display:grid;gap:22px;min-width:0}
.dev-group-title{font-size:24px;font-weight:800;margin:18px 0 -6px;scroll-margin-top:100px}
.guide,.ep{padding:26px;border-radius:22px;background:#fff;border:1px solid var(--line);scroll-margin-top:100px;min-width:0}
.guide h3,.ep h3{font-size:20px;font-weight:800;margin-bottom:6px}
.guide>p,.ep>p{color:var(--muted);font-size:15px}
.guide-sections{display:grid;gap:12px;margin-top:16px}
.guide-sections div{padding:14px 16px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.guide-sections b{display:block;margin-bottom:4px}
.guide-sections p{color:var(--muted);font-size:14.5px}
.ep-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ep-head em{font-style:normal;font:800 12px Inter;padding:5px 9px;border-radius:8px}
.ep-head code{font:700 14px ui-monospace,Menlo,monospace;direction:ltr;color:var(--ink);word-break:break-all}
.chips-row{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.chips-row span{padding:3px 10px;border-radius:99px;background:var(--soft);color:var(--teal);font:700 12px Inter,Noto,sans-serif}
.chips-row .warn{background:#fdf0dc;color:#9a5b0c}
.params{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.params th{text-align:start;font-size:12px;color:var(--muted);font-weight:800;padding:8px 10px;border-bottom:1px solid var(--line)}
.params td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.params td:first-child{white-space:nowrap}
.params code{font:700 13px ui-monospace,Menlo,monospace;direction:ltr}
.params .req{color:#c2410c;font-size:11px;font-weight:800;margin-inline-start:6px}
.params .type{display:block;color:var(--muted);font:500 11.5px Inter}
.params td:last-child{color:var(--muted)}
.params .enum{display:block;margin-top:4px;font:500 12px ui-monospace,Menlo,monospace;direction:ltr;color:var(--teal)}
.code-tabs{margin-top:16px;border-radius:16px;overflow:hidden;background:var(--deep);direction:ltr}
.code-tabs nav{display:flex;gap:2px;padding:6px;background:rgba(255,255,255,.05)}
.code-tabs nav button{border:0;background:transparent;color:rgba(255,255,255,.65);font:700 12.5px Inter;padding:7px 12px;border-radius:9px;cursor:pointer}
.code-tabs nav button.is-on{background:rgba(255,255,255,.12);color:#fff}
.code-tabs nav .copy{margin-left:auto}
.code-tabs pre{margin:0;padding:16px;max-height:340px;overflow:auto;color:#d6efe3;font:500 12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:left;white-space:pre}
.table-wrap{overflow-x:auto}
@media (max-width:1080px){.page-hero-grid{grid-template-columns:1fr}.devices{max-width:560px;margin:0 auto;width:100%}.app-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}.dev-layout{grid-template-columns:1fr}.dev-nav{position:static;max-height:none}}
@media (max-width:640px){.page-hero{padding:110px 0 60px}.app-cards{grid-template-columns:1fr}.phone{width:120px;height:240px}.devices{min-height:280px}.guide,.ep{padding:20px}.install li{padding-inline-start:62px}}