/* Athar website. Heritage palette: ivory + beige (muted orange) against sage (its complement).
   Layout rule: every home-page section fills exactly one screen below the sticky header.
   Type and media scale with min(width, height) so a section fits on wide-and-short laptops
   as well as tall phones. Very short landscape screens fall back to natural flow. */
:root{
  --ivory:#FBF9F4;--beige:#F1E9DA;--line:#E3D8C4;--tan:#C9B99A;
  --pale:#E3EBDF;--sage:#8FA98A;--sage-deep:#4F6B53;--sage-hover:#3E5642;
  --ink:#23302A;--ink2:#3A453E;--text2:#4A544D;--muted:#5E665F;
  --ease:cubic-bezier(.16,1,.3,1);
  --hdr:72px;
  --screen:calc(100svh - var(--hdr));
  --pad-y:clamp(24px,5.5vh,72px);
  --gap:clamp(16px,3.6vh,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr);scroll-snap-type:y proximity}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:'Alexandria',system-ui,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--sage-deep)}a:hover{color:var(--sage-hover)}
h1,h2,h3,p,figure{margin:0}
.ms{font-family:'Material Symbols Rounded';font-weight:300;font-style:normal;line-height:1;display:inline-block;white-space:nowrap;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;overflow:hidden;width:1em}
.wrap{max-width:1360px;margin:0 auto;padding:0 clamp(20px,3vw,40px)}
.skip{position:absolute;inset-inline-start:-9999px;top:8px;background:var(--sage-deep);color:#fff;padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{inset-inline-start:16px}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px}
.pattern{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Header */
.site-header{position:sticky;top:0;z-index:30;height:var(--hdr);background:rgba(251,249,244,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(201,185,154,.45)}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:100%}
/* Full Arabic + English lockup (the app's logo_tr.png, trimmed) */
.logo img{height:clamp(24px,3.6vh,30px);width:auto}
.site-footer .flogo{height:38px;width:auto}
.nav{display:flex;gap:2px}
.nav a,.lang{color:var(--ink2);text-decoration:none;font-size:15px;font-weight:400;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;transition:color .2s}
.nav a:hover,.lang:hover{color:var(--sage-deep)}
.nav a[aria-current=page]{color:var(--sage-deep);box-shadow:inset 0 -2px 0 var(--sage)}
.head-actions{display:flex;align-items:center;gap:8px}
.menu{display:none;position:relative}
.menu summary{list-style:none;cursor:pointer;min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--ink)}
.menu summary .ms{font-size:26px}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;inset-inline-end:0;top:52px;background:var(--ivory);border:1px solid var(--line);border-radius:18px;padding:10px;display:flex;flex-direction:column;min-width:220px;box-shadow:0 20px 50px rgba(35,48,42,.12)}
.menu-panel a{color:var(--ink);text-decoration:none;padding:12px 14px;border-radius:12px;font-size:17px}
.menu-panel a:hover{background:var(--beige)}

/* Buttons */
.pill{display:inline-flex;align-items:center;gap:10px;border-radius:999px;font-weight:600;text-decoration:none;min-height:clamp(46px,6.4vh,54px);padding:0 clamp(18px,2vw,26px);font-size:clamp(14px,min(1.2vw,2vh),16px);transition:transform .25s var(--ease),background .25s;white-space:nowrap}
.pill .ms{font-size:20px}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:scale(.98)}
.pill-primary{background:var(--sage-deep);color:var(--ivory)}
.pill-primary:hover{background:var(--sage-hover);color:var(--ivory)}
.pill-ghost{background:rgba(251,249,244,.6);color:var(--ink);box-shadow:inset 0 0 0 1px var(--sage);backdrop-filter:blur(10px)}
.pill-ghost:hover{color:var(--ink);background:var(--ivory)}
.pill.small{min-height:44px;padding:0 20px;font-size:14px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
/* Official store badges: same height side by side (Apple's minimum is 40px on screen) */
.stores{gap:clamp(10px,1.2vw,14px);align-items:center}
.store{display:inline-flex;border-radius:10px;transition:transform .25s var(--ease),box-shadow .25s}
.store img{height:clamp(44px,6.2vh,54px);width:auto}
.store:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(35,48,42,.18)}
.store:active{transform:scale(.98)}

/* Type (fluid on both axes) */
.display{font-weight:700;letter-spacing:-.02em;line-height:1.06}
[dir=rtl] .display{letter-spacing:0;line-height:1.25}
.h2{font-size:clamp(28px,min(3.2vw,5.4vh),44px);font-weight:700;line-height:1.3;margin-bottom:clamp(8px,1.6vh,18px)}
[dir=ltr] .h2{letter-spacing:-.015em;line-height:1.15}
.lede{font-size:clamp(16px,min(1.3vw,2.2vh),19px);line-height:1.8;color:var(--muted);max-width:640px}
.orn{display:flex;align-items:center;gap:14px;color:var(--sage);margin-bottom:clamp(8px,1.8vh,18px)}
.orn .ms{font-size:20px}
.orn::before,.orn::after{content:"";height:1px;width:48px;background:var(--tan)}

/* Screen system */
.screen{position:relative;min-height:var(--screen);display:flex;align-items:center;padding-block:var(--pad-y);scroll-snap-align:start}
.screen.fixed{height:var(--screen)}
.screen-inner{width:100%;position:relative}

/* Hero: full viewport, sits under the translucent header */
.hero{min-height:100svh;height:100svh;margin-top:calc(-1 * var(--hdr) - 1px);overflow:hidden;align-items:flex-end;padding:0;scroll-margin-top:calc(-1 * var(--hdr))}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;animation:kb 22s ease-out both}
.hero .fade{position:absolute;inset:0;background:linear-gradient(to top,var(--ivory) 3%,rgba(251,249,244,.78) 24%,rgba(251,249,244,.35) 40%,rgba(251,249,244,0) 54%)}
/* Hero copy sits centred over the fade; the photo caption keeps to the corner */
.hero .inner{position:relative;width:100%;padding-bottom:clamp(28px,8vh,88px);display:flex;flex-direction:column;align-items:center;text-align:center}
.hero .inner .ctas{justify-content:center}
.hero .caption{position:absolute;inset-inline-end:clamp(20px,3vw,40px);bottom:clamp(16px,3vh,28px)}
.hero h1{font-size:clamp(34px,min(4.6vw,7.4vh),64px);margin-bottom:clamp(10px,2.2vh,20px)}
[dir=ltr] .hero h1{font-size:clamp(32px,min(4.4vw,7vh),60px)}
.hero h1 span{color:var(--sage-deep)}
.hero p.sub{font-size:clamp(15px,min(1.25vw,2.1vh),18px);line-height:1.8;color:var(--text2);margin-bottom:clamp(16px,3.4vh,30px);max-width:540px;margin-inline:auto}
.caption{font-size:13px;color:var(--muted)}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1)}}
.rise{animation:rise 1.1s var(--ease) both}.d1{animation-delay:.15s}.d2{animation-delay:.3s}.d3{animation-delay:.45s}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}

/* Explore: heading + reel that takes the rest of the screen */
.explore .screen-inner{height:100%;display:flex;flex-direction:column;gap:var(--gap)}
.head-block{max-width:780px}
.reel{flex:1 1 auto;min-height:0;display:flex;gap:10px}
.reel a{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:20px;transition:flex .7s var(--ease);color:#fff;text-decoration:none}
.reel a:hover,.reel a:focus-visible{flex:4.2}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.reel a:hover img{transform:scale(1.05)}
.reel .cap{position:absolute;inset:auto 0 0 0;padding:72px 22px 20px;background:linear-gradient(to top,rgba(35,48,42,.85),rgba(35,48,42,0));opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.reel a:hover .cap,.reel a:focus-visible .cap{opacity:1;transform:none}
.reel .cap b{display:block;font-size:clamp(17px,min(1.5vw,2.5vh),21px);font-weight:600;margin-bottom:4px}
.reel .cap span{font-size:14px;color:#E7EDE4}


/* CTA */
.kick{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--sage-deep);margin-bottom:clamp(8px,1.4vh,14px)}
.kick::before{content:"";width:22px;height:1.5px;background:currentColor}
/* Section 4: headline and store badges beside a wall of real landmarks drifting in three columns.
   Each column holds its six cards twice and moves by exactly one set (the bottom padding equals
   the gap), so the loop has no jump. Columns only move while the section is on screen (.in-view). */
.cta-screen{background:var(--beige);overflow:hidden}
.cta{position:relative;z-index:2}
.cta>*{max-width:min(44%,540px)}
.cta h2{font-size:clamp(44px,min(5.6vw,9vh),80px);font-weight:700;color:var(--sage-deep);margin-bottom:clamp(12px,2.6vh,24px)}
.cta-sub{font-size:clamp(16px,min(1.35vw,2.3vh),19px);line-height:1.8;color:var(--text2);margin-bottom:clamp(18px,3.6vh,34px)}
.free{display:flex;align-items:center;gap:8px;margin-top:clamp(14px,2.6vh,24px);font-size:14px;color:var(--muted)}
.free::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sage)}
.wall{--g:clamp(10px,1.3vw,18px);position:absolute;top:0;bottom:0;inset-inline-end:0;width:54%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%)}
.wall .cols{position:absolute;inset:-12% 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);padding-inline:var(--g);transform:rotate(-6deg) scale(1.08)}
.wall .col{display:flex;flex-direction:column;gap:var(--g);padding-bottom:var(--g);animation:wall-up 46s linear infinite paused;will-change:transform}
.wall .c1{animation-name:wall-down;animation-duration:54s}
.wall .c2{animation-duration:60s}
.cta-screen.in-view .wall .col{animation-play-state:running}
.cta-screen.in-view .wall:hover .col{animation-play-state:paused}
@keyframes wall-up{to{transform:translateY(-50%)}}
@keyframes wall-down{from{transform:translateY(-50%)}to{transform:none}}
.wall figure{position:relative;margin:0;flex:none;border-radius:20px;overflow:hidden;background:var(--line);box-shadow:0 18px 40px -18px rgba(35,48,42,.4)}
.wall figure.t{height:clamp(190px,33vh,300px)}
.wall figure.m{height:clamp(150px,25vh,230px)}
.wall img{width:100%;height:100%;object-fit:cover}
.wall figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,34,29,.72),rgba(24,34,29,0) 50%)}
.wall figcaption{position:absolute;inset:auto 14px 12px;z-index:2;color:#fff;font-size:14px;font-weight:600;line-height:1.4}
.wall figcaption small{display:block;font-weight:400;font-size:12px;opacity:.85}
@media (prefers-reduced-motion:reduce){.wall .col{animation:none}}

/* FAQ (Section 5): numbered questions with a sliding highlight beside a photo card whose landmark
   changes per question, the answer on frosted glass. Every answer is in the HTML (one shown at a
   time); play.js switches them and cycles on its own until the visitor picks one. */
.faq{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.faq-qs{list-style:none;margin:0;padding:0;position:relative}
.faq-qs .hl{position:absolute;inset-inline:0;top:0;height:0;border-radius:14px;background:var(--beige);transition:top .45s var(--ease),height .45s var(--ease)}
.faq-qs button{all:unset;box-sizing:border-box;position:relative;z-index:1;width:100%;min-height:40px;display:flex;align-items:center;gap:14px;padding:clamp(8px,1.4vh,13px) 16px;border-radius:14px;cursor:pointer;
  font-size:clamp(15px,min(1.2vw,2vh),17px);font-weight:500;line-height:1.5;color:var(--muted);transition:color .3s}
.faq-qs button span{font-size:13px;font-weight:600;color:var(--tan);font-variant-numeric:tabular-nums;flex:none;width:22px}
.faq-qs button:hover,.faq-qs button.on{color:var(--ink)}
.faq-qs button.on{font-weight:600}
.faq-qs button.on span{color:var(--sage-deep)}
.faq-qs button:focus-visible{outline:2px solid var(--sage-deep);outline-offset:-2px}
.faq-more{margin-top:clamp(12px,2.4vh,22px);font-size:15px;color:var(--muted)}
.faq-more a{font-weight:600;white-space:nowrap}
.faq-panel{position:relative;height:min(100%,700px);border-radius:28px;overflow:hidden;background:var(--line);box-shadow:0 40px 80px -30px rgba(35,48,42,.4)}
.faq-panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.faq-panel img.on{opacity:1;visibility:visible;transition:opacity .8s ease}
.faq-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(24,34,29,.55),rgba(24,34,29,0) 55%);pointer-events:none}
.glass{position:absolute;inset:auto 18px 18px;z-index:2;max-height:calc(100% - 36px);overflow-y:auto;border-radius:22px;padding:clamp(16px,2.6vh,26px) clamp(18px,2vw,28px);
  background:rgba(251,249,244,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 20px 40px -20px rgba(0,0,0,.35)}
.fa small{font-size:13px;font-weight:600;color:var(--sage-deep)}
.fa h3{font-size:clamp(18px,min(1.6vw,2.6vh),22px);font-weight:600;line-height:1.45;margin:6px 0 8px}
.fa p{font-size:clamp(15px,min(1.15vw,2vh),16.5px);line-height:1.85;color:var(--text2)}
.fa.on{animation:faq-in .5s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(12px)}}
@media (prefers-reduced-motion:reduce){.fa.on{animation:none}.faq-qs .hl{transition:none}}

/* Inner pages (long-form documents: natural scrolling) */
.page-hero{position:relative;overflow:hidden;min-height:clamp(320px,52svh,520px);display:flex;align-items:flex-end;margin-top:calc(-1 * var(--hdr) - 1px)}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero .fade{position:absolute;inset:0;background:linear-gradient(to top,var(--ivory) 12%,rgba(251,249,244,.7) 45%,rgba(251,249,244,.1))}
.page-hero .inner{position:relative;width:100%;padding-bottom:clamp(28px,6vh,56px)}
.page-hero .kicker{color:var(--sage-deep);font-size:15px;margin-bottom:12px}
.page-hero h1{font-size:clamp(36px,min(4.4vw,7.4vh),60px);margin-bottom:14px}
.page-hero p.sub{font-size:clamp(16px,1.35vw,19px);color:var(--text2);max-width:620px;line-height:1.8}
.prose{max-width:1040px;margin:0 auto;padding:clamp(56px,10vh,96px) clamp(20px,3vw,32px)}
.legal{max-width:860px;margin:0 auto;padding:clamp(48px,9vh,88px) clamp(20px,3vw,32px) 104px}
.card{background:var(--beige);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3vw,40px)}
.about-lead{display:grid;gap:20px;margin-bottom:88px}
.about-lead .big{font-size:clamp(21px,2.1vw,28px);line-height:1.55;font-weight:600}
.about-lead p:not(.big){font-size:clamp(16px,1.4vw,19px);line-height:2;color:var(--muted)}
[dir=ltr] .about-lead p:not(.big){line-height:1.8}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:88px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.label{color:var(--sage-deep);font-weight:700;font-size:15px;margin-bottom:12px}
.vm{font-size:clamp(18px,1.7vw,22px);line-height:1.55;font-weight:600}
.mission{background:var(--sage-deep);color:#fff;border-radius:24px;padding:clamp(24px,3vw,40px)}
.mission .label{color:#E3EBDF}
.value{border-top:2px solid var(--sage);padding-top:20px}
.value h3{font-size:20px;font-weight:700;margin-bottom:10px}
.value p,.who p{font-size:16px;line-height:1.85;color:var(--muted)}
.who h2{font-size:clamp(22px,2.2vw,28px);font-weight:600;margin-bottom:16px}
.contact-card{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.summary-card{margin-bottom:56px;padding:28px 32px;border-radius:20px}
.summary-card ul{margin:0;padding-inline-start:20px;display:grid;gap:8px;font-size:16px;line-height:1.8;color:var(--muted)}
.legal section{padding:32px 0;border-top:1px solid var(--line)}
.legal h2{font-size:clamp(20px,2vw,24px);font-weight:600;margin-bottom:14px;display:flex;gap:14px;align-items:baseline}
.legal h2 span{color:var(--sage-deep);font-size:16px;min-width:28px}
.legal section p{font-size:clamp(16px,1.3vw,17px);line-height:1.95;color:var(--muted);margin-bottom:10px}
[dir=ltr] .legal section p{line-height:1.8}
.note{font-size:14px;color:var(--muted);margin-top:24px;border-top:1px solid var(--line);padding-top:24px}

/* Footer */
.site-footer{background:var(--pale);overflow:hidden;position:relative;scroll-snap-align:end}
/* Compact footer: brand on one side, the links as rows on the other */
.site-footer .cols{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 48px;padding-top:clamp(28px,4.5vh,44px);padding-bottom:0}
.site-footer p.tag{font-size:14px;line-height:1.7;color:var(--text2);max-width:340px;margin-top:10px}
.site-footer nav,.site-footer .links{display:flex;flex-wrap:wrap;gap:2px 26px}
.site-footer nav a,.site-footer .links a{display:inline-flex;align-items:center;min-height:40px;font-size:15px;color:var(--ink2);text-decoration:none}
.site-footer nav a:hover,.site-footer .links a:hover{color:var(--sage-deep)}
/* The khatam field from the dashboard (admin.css, sidebar ::before): the app's 8-point star on a 69px
   tile, gold #C9A24B. Here it rises from the bottom edge and fades out halfway up. */
.site-footer .kfield{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69' height='69' viewBox='0 0 46 46'%3E%3Cpath fill='none' stroke='%23C9A24B' stroke-width='0.733' d='M23 1 27.38 12.43 38.56 7.44 33.57 18.62 45 23 33.57 27.38 38.56 38.56 27.38 33.57 23 45 18.62 33.57 7.44 38.56 12.43 27.38 1 23 12.43 18.62 7.44 7.44 18.62 12.43Z'/%3E%3C/svg%3E");background-size:69px 69px;
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 18%,transparent 62%);mask-image:linear-gradient(to top,transparent 0%,#000 18%,transparent 62%)}
/* The name as a watermark: large, sage fading to nothing, sinking under the bottom bar.
   padding-top keeps the alef's hamza inside the box the gradient paints. */
.wordmark{position:relative;text-align:center;font-size:clamp(120px,17vw,250px);font-weight:700;line-height:1;padding-top:.35em;margin:-.2em 0 -.52em;user-select:none;pointer-events:none;
  background:linear-gradient(to bottom,rgba(79,107,83,.24) 30%,rgba(79,107,83,0) 88%);-webkit-background-clip:text;background-clip:text;color:transparent}
[dir=ltr] .wordmark{font-size:clamp(84px,14vw,210px);padding-top:.1em;margin-top:.02em;margin-bottom:-.46em}
.legalbar{position:relative;z-index:1;padding-top:14px;padding-bottom:20px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* Scroll reveal (progressive enhancement) */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
.rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
@keyframes rv{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
}}
@media (prefers-reduced-motion:reduce){.hero>img,.rise{animation:none}html{scroll-behavior:auto}}

/* Tablet and phone */
@media (max-width:900px){
:root{--hdr:64px}
/* no section snapping on phones: it fights the finger and the collapsing toolbar */
html{scroll-snap-type:none}
.nav,.head-actions .pill{display:none}
.menu{display:block}
.hero .inner{grid-template-columns:1fr}
.hero h1 span{display:block}
.hero .caption{display:none}
/* Reel becomes a swipeable carousel that fills the remaining height */
.reel{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-inline:calc(-1 * clamp(20px,3vw,40px));padding-inline:clamp(20px,3vw,40px)}
.reel::-webkit-scrollbar{display:none}
.reel a,.reel a:hover,.reel a:focus-visible{flex:0 0 76%;scroll-snap-align:center}
.reel .cap{opacity:1;transform:none}
/* CTA: stack, photo takes what is left */
/* Section 4: text first, the wall takes the rest of the screen */
.cta-screen{display:grid;grid-template-rows:auto minmax(0,1fr);align-items:stretch;row-gap:clamp(14px,2.6vh,26px)}
.cta>*{max-width:none}
.cta h2{margin-bottom:clamp(6px,1.4vh,14px)}
.cta-sub{margin-bottom:clamp(12px,2.4vh,22px)}
.free{margin-top:clamp(10px,1.8vh,16px)}
.wall{--g:10px;position:relative;width:auto;inset:auto}
.wall .cols{inset:-6% 0;transform:rotate(-5deg) scale(1.08)}
.wall figure{border-radius:16px}
.wall figure.t{height:clamp(130px,21vh,210px)}
.wall figure.m{height:clamp(100px,16vh,160px)}
.wall figcaption{inset:auto 10px 8px;font-size:12px}
.wall figcaption small{font-size:11px}
/* FAQ: the questions become one swipeable row of numbered chips; the card takes the rest */
.faq{display:flex;flex-direction:column;align-items:stretch;gap:clamp(10px,1.8vh,18px)}
.faq-side{display:contents}
.faq-side .kick{order:1;margin-bottom:-4px}
.faq-side .h2{order:2;margin-bottom:0}
.faq-qs{order:3;display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(-1 * clamp(20px,3vw,40px));padding:2px clamp(20px,3vw,40px)}
.faq-qs::-webkit-scrollbar{display:none}
.faq-qs .hl{display:none}
.faq-qs li{flex:none;scroll-snap-align:start}
.faq-qs button{display:block;width:auto;max-width:min(80vw,340px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:44px;padding:11px 16px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:14.5px}
.faq-qs button.on{background:var(--sage-deep);color:var(--ivory);box-shadow:none}
.faq-qs button.on span{color:#CFE0CA}
.faq-qs button span{display:inline-block;width:auto;margin-inline-end:8px}
.faq-panel{order:4;flex:1 1 0;min-height:0;height:auto;border-radius:22px}
.faq-more{order:5;margin-top:0;font-size:14px}
.glass{inset:auto 12px 12px;max-height:calc(100% - 24px);border-radius:18px}
.site-footer .cols{gap:10px 28px;align-items:flex-start}
.site-footer .cols>div:first-child{flex-basis:100%}
.site-footer nav,.site-footer .links{gap:0 20px}
.grid2,.grid4{grid-template-columns:1fr;gap:28px}
.about-lead,.grid2{margin-bottom:56px}
}
@media (max-width:900px) and (min-width:600px){
.reel a,.reel a:hover,.reel a:focus-visible{flex-basis:46%}
}
/* Short screens in landscape: no fixed heights, the page flows naturally */
@media (max-height:520px){
.screen,.screen.fixed,.hero{height:auto;min-height:0}
.hero{min-height:100svh}
.reel{height:280px;flex:none}
.wall{display:none}
.faq-panel{flex:none;height:300px}
html{scroll-snap-type:none}
}
/* Small phones: tighten the FAQ */
@media (max-width:600px) and (max-height:620px){.cta-screen .free{display:none}.cta-sub{margin-bottom:10px}}
@media (max-width:600px) and (max-height:700px){.faq-side .kick{display:none}.fa h3{display:none}}

@property --p{syntax:"<percentage>";inherits:false;initial-value:0%}
@keyframes fillp{to{--p:100%}}
/* ===== Features: "the app plays itself" =====
   A dark stage between two light sections. The phone shows real app screens (captured at
   1206x2622, so they fill the screen exactly); play.js steps through them: a tap, a push to
   the next screen, the matching step lights up and the landmark photo behind changes.
   The phone is sized from the height its stage really has (container query), capped by --pwmax,
   so the section always fits one screen. */
.play{--night:#18221D;background:var(--night);color:var(--ivory);overflow:hidden;
  --pwmax:clamp(200px,calc((var(--screen) - 2 * var(--pad-y)) / 2.2),340px)}
.play-bg{position:absolute;inset:-3%}
/* only the current photo is painted; hidden ones drop out of the compositor (mobile Safari flickers otherwise) */
.play-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s 1.2s}
.play-bg img.on{opacity:.5;visibility:visible;transition:opacity 1.2s ease}
@media (min-width:901px) and (prefers-reduced-motion:no-preference){.play-bg img{transform:scale(1.1);transition:opacity 1.2s ease,visibility 0s 1.2s,transform 7s linear}.play-bg img.on{transform:scale(1);transition:opacity 1.2s ease,transform 7s linear}}
.play::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to left,rgba(24,34,29,.94) 25%,rgba(24,34,29,.55) 55%,rgba(24,34,29,.25) 100%),radial-gradient(60% 70% at 28% 55%,rgba(24,34,29,0),rgba(24,34,29,.5))}
[dir=ltr] .play::before{background:linear-gradient(to right,rgba(24,34,29,.94) 25%,rgba(24,34,29,.55) 55%,rgba(24,34,29,.25) 100%),radial-gradient(60% 70% at 72% 55%,rgba(24,34,29,0),rgba(24,34,29,.5))}
.play .screen-inner{z-index:2}
.play-grid{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto auto 1fr;column-gap:clamp(28px,5vw,80px)}
.play-head{grid-column:1;grid-row:2}
.play .kick{color:#B9CCB4}
.play .h2{color:var(--ivory);margin-bottom:clamp(14px,3.4vh,36px)}
.steps{grid-column:1;grid-row:3;list-style:none;margin:0;padding:0;display:grid;gap:clamp(0px,.6vh,6px);max-width:480px}
.steps button{position:relative;display:block;width:100%;text-align:start;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:clamp(10px,1.6vh,14px) 0;padding-inline-start:22px;border-radius:4px}
.steps button::before,.steps i{content:"";position:absolute;inset-inline-start:0;top:clamp(10px,1.6vh,14px);bottom:clamp(10px,1.6vh,14px);width:2px;border-radius:2px;background:rgba(251,249,244,.18)}
.steps i{bottom:auto;height:0;background:var(--tan)}
.steps li.on i{animation:fill var(--d,4200ms) linear forwards}
.play.paused .steps li.on i{animation-play-state:paused}
@keyframes fill{to{height:calc(100% - 2 * clamp(10px,1.6vh,14px))}}
.steps .t{display:block;font-size:clamp(17px,min(1.5vw,2.5vh),21px);font-weight:600;color:rgba(251,249,244,.5);transition:color .4s}
.steps .d{display:block;font-size:clamp(14px,min(1.15vw,2vh),16px);line-height:1.7;color:rgba(251,249,244,.74);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .4s,margin .4s}
.steps li.on .t,.steps button:hover .t{color:var(--ivory)}
.steps li.on .d{max-height:4.5em;opacity:1;margin-top:6px}
.steps button:focus-visible{outline-color:var(--tan)}
.play-stage{grid-column:2;grid-row:1/-1;position:relative;display:grid;place-items:center;min-height:0;container-type:size}
/* the phone takes the height the stage really has (outer phone height = 2.094 x its width) */
.play-stage>*{--pw:min(var(--pwmax),calc(94cqh / 2.094))}
.play .glow{position:absolute;width:calc(var(--pw) * 1.9);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(201,185,154,.35),rgba(201,185,154,0));animation:breathe 6s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.12);opacity:.7}}
/* Phone frame: iPhone 17 Pro proportions; the screen is exactly 1206:2622 */
.play .phone{position:relative;width:var(--pw);padding:calc(var(--pw) * .034);border-radius:calc(var(--pw) * .17);animation:bob 7s ease-in-out infinite alternate;
  background:linear-gradient(150deg,#4a4d4c 0%,#1d2020 18%,#0f1111 50%,#1d2020 82%,#3e4140 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 3px #0b0c0c,0 50px 90px -30px rgba(0,0,0,.6),0 18px 36px -14px rgba(0,0,0,.4)}
@keyframes bob{from{transform:translateY(-8px) rotate(-1.5deg)}to{transform:translateY(8px) rotate(1deg)}}
.play .live{position:relative;aspect-ratio:1206/2622;border-radius:calc(var(--pw) * .136);overflow:hidden;background:#fff;isolation:isolate;transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(white,black)}
.play .live::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 28%)}
/* Screens rest unmoved and hidden; only a push animates, so nothing sits transformed off to the side */
.sc{position:absolute;inset:0;visibility:hidden}
.sc.on{visibility:visible;z-index:2}
.sc.on.push{animation:push-in .7s cubic-bezier(.32,.72,0,1) both}
.sc.out{visibility:visible;z-index:1;animation:push-out .7s cubic-bezier(.32,.72,0,1) both}
@keyframes push-in{from{transform:translateX(-100%)}to{transform:none}}
@keyframes push-out{to{transform:translateX(30%);filter:brightness(.85)}}
[dir=ltr] .sc.on.push{animation-name:push-in-ltr}
[dir=ltr] .sc.out{animation-name:push-out-ltr}
@keyframes push-in-ltr{from{transform:translateX(100%)}to{transform:none}}
@keyframes push-out-ltr{to{transform:translateX(-30%);filter:brightness(.85)}}
.sc img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.45,0,.2,1)}
.tap{position:absolute;z-index:5;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 2px rgba(255,255,255,.8),0 6px 18px rgba(0,0,0,.25);opacity:0;pointer-events:none}
.tap.go{animation:tap .9s ease forwards}
@keyframes tap{0%{opacity:0;transform:scale(1.4)}25%{opacity:1;transform:scale(1)}45%{transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;white-space:nowrap;background:rgba(251,249,244,.96);color:var(--ink);border-radius:18px;padding:12px 16px;font-size:14px;font-weight:600;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.45);opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s,transform .7s var(--ease)}
.chip.on{opacity:1;transform:none}
.chip small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;margin-top:2px}
.chip .dot{width:34px;height:34px;border-radius:10px;background:var(--pale);display:grid;place-items:center;color:var(--sage-deep);font-weight:700;flex:none}
.chip.c1{top:22%;inset-inline-end:calc(50% + var(--pw) * .38)}
.chip.c2{bottom:20%;inset-inline-start:calc(50% + var(--pw) * .38)}
@media (prefers-reduced-motion:reduce){
.play .phone,.play .glow{animation:none}
.play-bg img{transition:opacity .4s;transform:none}
.sc.on.push,.sc.out{animation:none}
.steps li.on i{animation:none;height:calc(100% - 2 * clamp(10px,1.6vh,14px))}
}
/* Tablet and phone: title, then the phone, then one step at a time under a story-style progress bar */
@media (max-width:900px){
.play{--pwmax:min(60vw,320px)}
.play::before{background:linear-gradient(to bottom,rgba(24,34,29,.92) 0%,rgba(24,34,29,.6) 35%,rgba(24,34,29,.6) 65%,rgba(24,34,29,.94) 100%)}
[dir=ltr] .play::before{background:linear-gradient(to bottom,rgba(24,34,29,.92) 0%,rgba(24,34,29,.6) 35%,rgba(24,34,29,.6) 65%,rgba(24,34,29,.94) 100%)}
.play-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto;row-gap:clamp(12px,2.2vh,22px)}
.play-head{grid-row:1;text-align:center}
.play .kick{justify-content:center}
.play .h2{margin-bottom:0}
.play-stage{grid-column:1;grid-row:2}
.play .phone,.play .glow{animation:none}
.chip{display:none}
.steps{grid-row:3;position:relative;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:none;width:min(100%,440px);margin:0 auto;padding-bottom:calc(1.4em + 3.4em + 12px)}
.steps li,.steps button{position:static}
.steps button{padding:12px 0 0;min-height:44px;border-radius:0;
  background:linear-gradient(var(--tan),var(--tan)) no-repeat 0 0/var(--p) 3px,linear-gradient(rgba(251,249,244,.2),rgba(251,249,244,.2)) no-repeat 0 0/100% 3px}
[dir=rtl] .steps button{background-position:100% 0,0 0}
.steps button::before,.steps i{display:none}
.steps li.on button{animation:fillp var(--d,4200ms) linear forwards}
.play.paused .steps li.on button{animation-play-state:paused}
.steps li.done button{--p:100%}
.steps .t,.steps .d{position:absolute;inset-inline:0;text-align:center;opacity:0;pointer-events:none;transition:opacity .4s}
.steps .t{top:22px;color:var(--ivory)}
.steps .d{top:calc(22px + 1.7em);max-height:none;margin:0}
.steps li.on .t,.steps li.on .d{opacity:1}
.steps li.on .d{margin:0}
}
@media (max-width:900px) and (max-height:700px){.steps{padding-bottom:calc(1.7em + 10px)}.steps .d{display:none}}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.steps li.on button{animation:none;--p:100%}}
/* Short landscape screens: the page flows; keep a modest phone */
@media (max-height:520px){
.play{--pwmax:220px}
.play-stage{container-type:normal}
.play-grid{grid-template-rows:auto;row-gap:20px}
}

/* ===== Hero-to-explore story: "six strips" =====
   Only when <html class="story-on"> (large screen, scroll-driven animation support, motion allowed).
   Otherwise the hero and the explore section stay two normal sections.
   The hero photo is cut into six strips; while you scroll through a 2.8-screen runway the strips
   pull apart, land on the six landmark cards (positions measured by story.js) and turn into them. */
.strips{display:none}
.story-on .story{position:relative;height:280svh;margin-top:calc(-1 * var(--hdr) - 1px);view-timeline:--story block;view-timeline-inset:0px;scroll-snap-align:start}
.story-on .story::after{content:"";position:absolute;bottom:0;left:0;width:1px;height:1px;scroll-snap-align:end}
.story-on .story-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.story-on .story .hero{position:absolute;inset:0;margin:0;height:100%;min-height:0;z-index:3;scroll-snap-align:none}
.story-on .story .hero>img{visibility:hidden;animation:none}
.story-on .story .hero .fade,.story-on .story .hero .inner{animation:story-out linear both;animation-timeline:--story;animation-range:contain 3% contain 16%}
@keyframes story-out{to{opacity:0;transform:translateY(-30px);visibility:hidden}}
.story-on .story .explore{position:absolute;left:0;right:0;top:var(--hdr);height:var(--screen);min-height:0;z-index:1;scroll-snap-align:none}
.story-on .story .rv{animation:none}
.story-on .story .head-block{animation:story-in linear both;animation-timeline:--story;animation-range:contain 56% contain 84%}
@keyframes story-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.story-on .story .reel a{animation:story-show linear both;animation-timeline:--story;animation-range:contain 88% contain 95%}
@keyframes story-show{from{opacity:0}to{opacity:1}}
.story-on .strips{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.story-on .strip{position:absolute;overflow:hidden;
  animation:story-strip linear both, story-fade linear forwards;animation-timeline:--story, --story}
@keyframes story-strip{
  from{left:var(--x0);top:0;width:var(--w0);height:var(--h0);border-radius:0}
  to{left:var(--l);top:var(--t);width:var(--w);height:var(--h);border-radius:20px}}
@keyframes story-fade{from{opacity:1}to{opacity:0}}
.story-on .strip .slice{position:absolute;top:0;max-width:none;object-fit:cover;object-position:center 40%}
.story-on .strip .to{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:story-show linear both;animation-timeline:--story}
.story-on .s0{animation-range:contain 10% contain 66%, contain 92% contain 98%}
.story-on .s1{animation-range:contain 12% contain 68%, contain 92% contain 98%}
.story-on .s2{animation-range:contain 14% contain 70%, contain 92% contain 98%}
.story-on .s3{animation-range:contain 16% contain 72%, contain 92% contain 98%}
.story-on .s4{animation-range:contain 18% contain 74%, contain 92% contain 98%}
.story-on .s5{animation-range:contain 20% contain 76%, contain 92% contain 98%}
.story-on .s0 .to{animation-range:contain 28% contain 58%}
.story-on .s1 .to{animation-range:contain 30% contain 60%}
.story-on .s2 .to{animation-range:contain 32% contain 62%}
.story-on .s3 .to{animation-range:contain 34% contain 64%}
.story-on .s4 .to{animation-range:contain 36% contain 66%}
.story-on .s5 .to{animation-range:contain 38% contain 68%}

/* English reads best a little tighter than Arabic */
[dir=ltr] .lede,[dir=ltr] .hero p.sub,[dir=ltr] .cta-sub,[dir=ltr] .steps .d{line-height:1.6}
[dir=ltr] .fa p,[dir=ltr] .legal section p,[dir=ltr] .about-lead p:not(.big){line-height:1.65}