/* 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%}
.logo img{height:clamp(28px,4.4vh,34px);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 .inner{position:relative;width:100%;padding-bottom:clamp(28px,8vh,88px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(12px,3vh,40px);align-items:end}
.hero h1{font-size:clamp(40px,min(5.4vw,8.6vh),76px);margin-bottom:clamp(12px,2.6vh,24px)}
[dir=ltr] .hero h1{font-size:clamp(38px,min(5vw,8.2vh),72px)}
.hero h1 span{color:var(--sage-deep)}
.hero p.sub{font-size:clamp(16px,min(1.35vw,2.3vh),19px);line-height:1.8;color:var(--text2);margin-bottom:clamp(16px,3.6vh,34px);max-width:540px}
.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 */
.cta{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,5vw,64px);align-items:center}
.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 p{font-size:clamp(16px,min(1.35vw,2.3vh),19px);line-height:1.8;color:var(--text2);margin-bottom:clamp(18px,3.6vh,34px);max-width:520px}
.framed{position:relative;margin:18px}
.framed::before{content:"";position:absolute;inset:-18px;border:1px solid var(--tan);border-radius:30px}
.framed img{position:relative;width:100%;height:min(600px,calc(var(--screen) - 2 * var(--pad-y) - 36px));object-fit:cover;border-radius:20px}

/* FAQ */
.faq{display:grid;grid-template-columns:4fr 8fr;gap:clamp(28px,5vw,80px);align-items:center}
.faq-head .lede a{font-weight:600;white-space:nowrap}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(11px,2.1vh,24px) 0;font-size:clamp(16px,min(1.3vw,2.2vh),19px);font-weight:600;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ms{font-size:26px;color:var(--sage-deep);transition:transform .35s var(--ease);flex:none}
.faq details[open] summary .ms{transform:rotate(45deg)}
.faq details p{padding:0 0 clamp(12px,2.4vh,24px);font-size:clamp(15px,min(1.15vw,2vh),17px);line-height:1.85;color:var(--muted);max-width:680px}

/* 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}
.site-footer .cols{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-top:clamp(48px,8vh,72px);padding-bottom:32px}
.site-footer p.tag{font-size:15px;line-height:1.9;color:var(--text2);max-width:340px;margin-top:18px}
.site-footer nav a,.site-footer .links a{display:block;padding:8px 0;color:var(--ink2);text-decoration:none}
.site-footer nav a:hover,.site-footer .links a:hover{color:var(--sage-deep)}
.wordmark{position:relative;text-align:center;font-size:clamp(110px,19vw,280px);line-height:.9;font-weight:800;color:transparent;-webkit-text-stroke:1px rgba(79,107,83,.28);user-select:none}
.legalbar{position:relative;padding-top:20px;padding-bottom:28px;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 .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 */
.cta{grid-template-columns:1fr;gap:clamp(20px,3vh,32px)}
.framed{margin:12px}
.framed::before{inset:-12px;border-radius:26px}
.framed img{height:clamp(120px,calc(var(--screen) - 2 * var(--pad-y) - 380px),360px)}
.faq{grid-template-columns:1fr;gap:clamp(12px,2.4vh,24px);align-content:center}
.site-footer .cols,.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}
.framed{display:none}
html{scroll-snap-type:none}
}
/* Small phones: tighten the FAQ */
@media (max-width:600px) and (max-height:760px){
.faq summary{padding:9px 0}
.faq-head .h2{margin-bottom:4px}
}

@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{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#B9CCB4;margin-bottom:clamp(8px,1.4vh,14px)}
.play .kick::before{content:"";width:22px;height:1.5px;background:currentColor}
.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)}}
.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)}
.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 p,[dir=ltr] .steps .d{line-height:1.6}
[dir=ltr] .faq details p,[dir=ltr] .legal section p,[dir=ltr] .about-lead p:not(.big){line-height:1.65}