.site{max-width:1160px;margin:0 auto;padding-inline:20px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none}.brand-name{font:800 17px/1 Overpass,system-ui,sans-serif;letter-spacing:-.01em}.site-nav{display:flex;align-items:center;gap:18px}.lang-link{font:500 14px/1.2 IBM Plex Sans Arabic,Overpass,sans-serif;color:var(--muted);text-decoration:none}.lang-link:hover{color:var(--text)}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center;padding-block:40px 56px}.eyebrow{margin:0 0 12px;font:800 12px/1.2 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}:lang(ar) .eyebrow{letter-spacing:0;font-size:14px;font-weight:700}.hero h1{margin:0;font:800 clamp(32px,4.4vw,50px)/1.04 var(--font-sans);letter-spacing:-.02em;text-wrap:balance}:lang(ar) .hero h1{line-height:1.25;letter-spacing:0;font-weight:700}.lede{max-width:52ch;margin:20px 0 30px;font-size:16px;line-height:1.6;color:var(--lede)}:lang(ar) .lede{font-size:17px;line-height:1.8}.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}.btn-lg{padding:12px 20px;font-size:15px}.perks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--muted)}.perks li:before{content:"✓";margin-inline-end:6px;color:var(--accent)}.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-block:8px 56px}.feature{padding:16px 18px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg)}.feature h2{margin:0 0 8px;font:700 15px/1.3 var(--font-sans)}.feature p{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}.how,.discipline{max-width:720px;padding-block:8px 40px}.how h2,.discipline h2{margin:0 0 14px;font:800 24px/1.2 var(--font-sans);letter-spacing:-.01em}:lang(ar) .how h2,:lang(ar) .discipline h2{letter-spacing:0;font-weight:700}.how ol{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:step}.how li{counter-increment:step;display:flex;align-items:baseline;gap:12px;font-size:15px}.how li:before{content:counter(step);display:inline-grid;place-items:center;flex:none;width:24px;height:24px;font:700 12px/1 var(--font-sans);color:var(--accent-ink);background:var(--accent);border-radius:50%}.discipline p{margin:0;max-width:62ch;font-size:15px;line-height:1.7;color:var(--lede)}.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:24px 32px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}@media(max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:16px}.features{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}@media(max-width:560px){.site{padding-inline:16px}.features{grid-template-columns:minmax(0,1fr)}.site-nav{gap:12px}.site-nav .btn,.site-nav .nav-link{display:none}}.skip-link{position:absolute;inset-inline-start:12px;top:-40px;padding:8px 12px;background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-sm);z-index:10}.skip-link:focus{top:12px}.nav-link{font:500 14px/1.2 var(--font-sans);color:var(--muted);text-decoration:none}.nav-link:hover{color:var(--text)}a:focus-visible,.btn:focus-visible,summary:focus-visible{outline:2px solid var(--edit);outline-offset:2px}.hero-demo{margin:0}.hero-demo video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;border-radius:var(--radius-lg);background:#0e1013;box-shadow:0 0 0 1px var(--border),var(--shadow-dialog)}.hero-demo figcaption,.ex figcaption{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--muted)}.flow{padding-block:0 56px}.flow h2{margin:0 0 14px;font:800 20px/1.2 var(--font-sans)}:lang(ar) .flow h2{font-weight:700}.flow ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;counter-reset:step}.flow li{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md);counter-increment:step}.flow li strong{font:800 13px/1.2 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}:lang(ar) .flow li strong{letter-spacing:0;font-size:15px}.flow li strong:before{content:counter(step) "  ";color:var(--muted);font-family:var(--font-mono)}.flow li span{font-size:13px;line-height:1.45;color:var(--lede)}.examples,.ba,.caps,.faq,.guides-teaser{padding-block:8px 56px}.examples h2,.ba h2,.caps h2,.faq h2,.guides-teaser h2{margin:0 0 8px;font:800 26px/1.2 var(--font-sans);letter-spacing:-.01em}:lang(ar) .examples h2,:lang(ar) .ba h2,:lang(ar) .caps h2,:lang(ar) .faq h2,:lang(ar) .guides-teaser h2{letter-spacing:0;font-weight:700}.section-lede{margin:0 0 20px;max-width:62ch;font-size:15px;line-height:1.6;color:var(--lede)}.ex-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;align-items:start}.ex{margin:0}.ex img{display:block;width:100%;height:auto;border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--border),var(--shadow-pop)}.ba-frame{position:relative;overflow:hidden;aspect-ratio:16 / 9;border-radius:var(--radius-lg);box-shadow:0 0 0 1px var(--border),var(--shadow-dialog)}.ba-frame img{display:block;width:100%;height:100%;object-fit:cover}.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.ba-before img{width:100%;height:100%}.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 0 1px #0004;pointer-events:none}.ba-handle:after{content:"⟷";position:absolute;top:50%;left:50%;display:grid;place-items:center;width:36px;height:36px;margin:-18px 0 0 -18px;font-size:16px;color:#111;background:#fff;border-radius:50%;box-shadow:var(--shadow-pop)}.ba-frame input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.ba-frame input[type=range]:focus-visible+.ba-handle,.ba-frame:focus-within .ba-handle{box-shadow:0 0 0 3px var(--edit)}.ba-tag{position:absolute;top:12px;padding:4px 10px;font:600 12px/1.2 var(--font-sans);color:#fff;background:#000a;border-radius:var(--radius-pill);pointer-events:none}.ba-tag-before{left:12px}.ba-tag-after{right:12px}.caps ul{display:grid;gap:8px;margin:12px 0 20px;padding:0;list-style:none}.caps li{display:flex;gap:10px;font-size:15px;line-height:1.5}.caps li:before{content:"✓";color:var(--accent);font-weight:700}.faq details{border-bottom:1px solid var(--border)}.faq summary{padding:16px 0;font:600 16px/1.4 var(--font-sans);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";color:var(--accent);font:400 22px/1 var(--font-sans)}.faq details[open] summary:after{content:"−"}.faq details p{margin:0 0 16px;max-width:70ch;font-size:15px;line-height:1.7;color:var(--lede)}.guides-teaser ul,.guide-list{display:grid;gap:10px;margin:12px 0 0;padding:0;list-style:none}.guides-teaser a{font:600 16px/1.4 var(--font-sans);color:var(--text)}.guide-list a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;color:var(--text);text-decoration:none;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-md)}.guide-list a:hover{border-color:var(--accent)}.guide-list span{font-size:14px;color:var(--muted)}.guide{max-width:760px;padding-block:24px 64px}.guide h1{margin:0 0 12px;font:800 clamp(28px,4vw,40px)/1.15 var(--font-sans);letter-spacing:-.02em}:lang(ar) .guide h1{letter-spacing:0;font-weight:700;line-height:1.35}.guide h2{margin:32px 0 10px;font:700 21px/1.3 var(--font-sans)}.guide p,.guide li{font-size:16px;line-height:1.75;color:var(--lede)}:lang(ar) .guide p,:lang(ar) .guide li{font-size:17px;line-height:1.9}.guide ol,.guide ul{padding-inline-start:22px}.crumbs{margin:0 0 8px;font-size:13px}.crumbs a{color:var(--accent)}.footer-links{display:flex;gap:16px}.footer-links a{color:var(--muted)}@media(max-width:900px){.flow ol{grid-template-columns:repeat(3,minmax(0,1fr))}.ex-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ex-wide{grid-column:1 / -1}}@media(max-width:560px){.flow ol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ex-grid{grid-template-columns:minmax(0,1fr)}.ba-tag{top:8px;font-size:11px}}