/* ---------- tokens ---------- */
:root{
  color-scheme:light;
  --brand:#56824F;        /* app green */
  --brand-ink:#3B6236;
  --brand-soft:#E3EDDD;
  --apple-soft:#FDE6E4;   /* logo red: allergen flags only */
  --apple-ink:#B5302A;
  --leaf:#7BF59D;
  --forest:#123020;
  --forest-2:#1C4430;
  --paper:#F3F5EC;
  --card:#FFFFFF;
  --butter:#FFD15C;
  --ink:#123020;
  --muted:#56685B;
  --line:rgba(18,48,32,.13);
  --display:"Gabarito",system-ui,sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --label:"DM Mono",ui-monospace,Menlo,monospace;
  --num:"DM Mono",ui-monospace,Menlo,monospace;
  --ar:"Alexandria","Geeza Pro",Tahoma,sans-serif;
  --tight:-.03em;
  --caps:uppercase;
  --out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.5,.64,1);
  --max:1200px;
  --logo:url("img/logo.e8bcb635785c.png");
}
:root[lang="ar"]{
  --display:"Alexandria","Geeza Pro",Tahoma,sans-serif;
  --body:"IBM Plex Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  --label:"IBM Plex Sans Arabic","Geeza Pro",Tahoma,sans-serif;
  --tight:0;
  --caps:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
[lang="ar"] body{font-size:17px;line-height:1.75}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:var(--tight);text-wrap:balance}
[lang="ar"] :is(h1,h2,h3,h4){line-height:1.35;font-weight:700}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.apple{display:inline-block;background:var(--logo) center/contain no-repeat;aspect-ratio:320/354;flex:none}
.later{display:inline-block;vertical-align:middle;font:500 .68rem/1 var(--label);letter-spacing:.06em;text-transform:var(--caps);padding:5px 8px 4px;border-radius:5px;background:var(--butter);color:var(--forest);white-space:nowrap;transform:translateY(-2px)}
[lang="ar"] .later{font-size:.74rem;font-weight:600;letter-spacing:0;padding:5px 8px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem var(--body);padding:15px 24px;border-radius:14px;border:0;cursor:pointer;text-decoration:none;transition:transform .35s var(--spring),background .2s,color .2s}
.btn:active{transform:scale(.96)}
.btn .arr{display:inline-block;transition:transform .35s var(--spring)}
.btn:hover .arr{transform:translateX(4px)}
[dir="rtl"] .btn .arr{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.btn-ink{background:var(--forest);color:#fff;box-shadow:0 10px 24px -10px rgba(18,48,32,.6)}
.btn-ink:hover,.btn-line:hover,.btn-brand:hover{transform:translateY(-2px)}
.btn-line{color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn-brand{background:var(--leaf);color:var(--forest)}
.btn-brand:hover{background:#9BF8B4}

/* reveal system */
.js [data-r]{opacity:0;transform:translateY(26px)}
.js [data-r].in{opacity:1;transform:none;transition:opacity .8s var(--out) calc(var(--i,0)*70ms),transform 1s var(--out) calc(var(--i,0)*70ms)}
.swapping [data-i18n]{animation:langIn .5s var(--out)}
@keyframes langIn{from{opacity:0;transform:translateY(6px)}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;color:#fff;transition:background .4s var(--out),color .4s,box-shadow .4s,transform .5s var(--out);padding-top:env(safe-area-inset-top,0px)}
.nav.solid{background:rgba(243,245,236,.92);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.nav.hide{transform:translateY(-100%)}
.nav .wrap{display:flex;align-items:center;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand .apple{width:30px}
.brand b{font-family:"Gabarito",sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;margin-inline-start:auto;padding:0}
.nav ul a{position:relative;display:block;text-decoration:none;font-weight:600;font-size:.92rem;padding:8px 10px}
.nav ul a::after{content:"";position:absolute;left:10px;right:10px;bottom:4px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--out)}
.nav ul a:hover::after,.nav ul a.cur::after{transform:scaleX(1);transform-origin:left}
.lang{flex:none;background:none;border:0;cursor:pointer;padding:8px 13px;border-radius:10px;font:600 .9rem var(--body);line-height:1.2;box-shadow:inset 0 0 0 1.5px currentColor;transition:background .25s}
.lang:hover{background:rgba(255,255,255,.14)}
.nav.solid .lang:hover{background:rgba(18,48,32,.06)}
.lang[lang="ar"]{font-family:var(--ar)}
.nav .cta{padding:10px 16px;font-size:.9rem;border-radius:11px;background:#fff;color:var(--brand-ink)}
.nav.solid .cta{background:var(--brand);color:#fff}
.menu-btn{display:none;background:none;border:0;padding:10px;cursor:pointer}
.menu-btn i{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;transition:transform .35s var(--out)}
.menu-btn[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (max-width:1100px){
  .nav ul{position:fixed;inset:70px 0 auto;flex-direction:column;background:var(--paper);color:var(--ink);padding:12px clamp(16px,4vw,40px) 24px;box-shadow:0 20px 40px -20px rgba(18,48,32,.3);clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--out)}
  .nav ul.open{clip-path:inset(0 0 0 0)}
  .nav ul a{font-family:var(--display);font-size:1.6rem;font-weight:700;padding:8px 0}
  .nav ul a::after{display:none}
  .lang{margin-inline-start:auto}
  .menu-btn{display:block}
  .nav .cta{display:none}
}

/* ---------- hero: the lunch table ---------- */
.hero{position:relative;background:var(--brand);color:#fff;padding:calc(110px + env(safe-area-inset-top,0px)) 0 90px;overflow-x:clip}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-15px;height:16px;background:radial-gradient(circle at 50% 0,var(--brand) 15px,transparent 15.6px) 0 0/32px 16px repeat-x;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center}
.launch{font:500 .8rem var(--label);letter-spacing:.05em;text-transform:var(--caps);color:rgba(255,255,255,.82)}
[lang="ar"] .launch{font-size:.95rem;font-weight:600;letter-spacing:0}
.hero h1{font-size:clamp(2.7rem,4.3vw,4.15rem);font-weight:800;line-height:.95;letter-spacing:-.04em;margin:18px 0 22px}
[lang="ar"] .hero h1{font-size:clamp(2.3rem,3.9vw,3.7rem);line-height:1.35;letter-spacing:0;font-weight:800}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
[lang="ar"] .hero h1 .ln{padding-block:.08em .16em;margin-block:-.08em -.16em}
.hero h1 .ln > span{display:block}
.hero h1 em{font-style:normal;color:var(--butter)}
.js .hero h1 .ln > span{transform:translateY(115%)}
.loaded .hero h1 .ln > span{transform:none;transition:transform 1.1s var(--out)}
.loaded .hero h1 .ln:nth-child(2) > span{transition-delay:.09s}
.lede{max-width:520px;margin-top:14px;font-size:1.08rem;color:rgba(255,255,255,.9)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .btn-line{color:#fff}
.js .hero-copy .fade{opacity:0;transform:translateY(16px)}
.loaded .hero-copy .fade{opacity:1;transform:none;transition:opacity .9s var(--out) var(--d,.3s),transform .9s var(--out) var(--d,.3s)}

.table{position:relative;width:100%;max-width:580px;aspect-ratio:7/8;margin-inline:auto;direction:ltr;--sy:0}
.plate{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;margin:0;z-index:var(--zi,1)}
.plate-in{position:relative;width:100%;height:100%;transform:translate3d(calc(var(--px,0) * var(--z) * 1px),calc(var(--py,0) * var(--z) * 1px - var(--sy) * var(--k,.05) * 1px),0);transition:transform .9s var(--out)}
.plate img{width:100%;height:100%;display:block;border-radius:50%;filter:drop-shadow(0 22px 26px rgba(8,40,14,.42));transform:rotate(var(--rot,0deg));transition:transform 1.4s var(--out)}
.plate:hover img{transform:rotate(calc(var(--rot,0deg) + 25deg)) scale(1.03)}
.plate figcaption{position:absolute;left:var(--cx,50%);bottom:4%;transform:translateX(-50%);display:flex;gap:8px;align-items:baseline;white-space:nowrap;background:#fff;color:var(--ink);padding:7px 12px;border-radius:999px;font:600 .8rem var(--body);box-shadow:0 8px 18px -8px rgba(0,0,0,.35)}
.plate figcaption small{font:500 .72rem var(--num);color:var(--muted)}
[lang="ar"] .plate figcaption{font-size:.85rem}
.js .plate{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(-40deg) scale(.9)}
.loaded .plate{animation:serve 1.3s var(--out) var(--d) forwards}
@keyframes serve{to{opacity:1;transform:none}}
.js .plate figcaption{opacity:0;transform:translate(-50%,8px)}
.loaded .plate figcaption{opacity:1;transform:translateX(-50%);transition:opacity .5s calc(var(--d) + .8s),transform .6s var(--spring) calc(var(--d) + .8s)}
.hphone{position:absolute;left:50%;top:50%;width:44%;z-index:3;transform:translate(-50%,-50%) rotate(-5deg)}
.hphone-in{background:var(--forest);border-radius:36px;padding:8px;box-shadow:0 50px 70px -30px rgba(5,30,10,.6),inset 0 0 0 1.5px rgba(255,255,255,.08);transform:translate3d(calc(var(--px,0) * 10px),calc(var(--py,0) * 10px),0);transition:transform .9s var(--out)}
.hphone img{display:block;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:29px}
.js .hphone{opacity:0;transform:translate(-50%,-30%) rotate(2deg)}
.loaded .hphone{opacity:1;transform:translate(-50%,-50%) rotate(-5deg);transition:opacity .8s var(--out) .15s,transform 1.4s var(--out) .15s}
@media (max-width:960px){
  .hero{padding-bottom:60px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .table{max-width:460px}
}
@media (max-width:480px){.plate figcaption{font-size:.7rem;padding:5px 9px}.plate figcaption small{display:none}.hphone-in{border-radius:26px;padding:6px}.hphone img{border-radius:21px}}

/* proof row */
.proof{padding:72px 0 100px}
.proof ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.proof li{display:grid;gap:6px;align-content:start;padding-inline:28px;border-inline-start:1px solid var(--line)}
.proof li:first-child{padding-inline-start:0;border:0}
.proof b{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:var(--tight);line-height:1.25}
.proof b::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.proof span{padding-inline-start:32px;color:var(--muted);font-size:.93rem;line-height:1.5}
@media (max-width:860px){.proof ul{grid-template-columns:1fr 1fr;row-gap:32px}.proof li:nth-child(odd){padding-inline-start:0;border:0}}
@media (max-width:480px){.proof ul{grid-template-columns:1fr;row-gap:22px}.proof li{padding-inline:0;border:0}}

/* ---------- section scaffolding ---------- */
.sec{padding:120px 0}
.head{display:grid;grid-template-columns:7fr 5fr;gap:18px 60px;align-items:end;margin-bottom:56px}
.kicker{grid-column:1/-1;font:500 .78rem var(--label);letter-spacing:.08em;text-transform:var(--caps);color:var(--brand-ink)}
[lang="ar"] .kicker{font-size:.95rem;font-weight:700;letter-spacing:0}
.head h2{font-size:clamp(2.2rem,4.6vw,3.9rem)}
[lang="ar"] .head h2{font-size:clamp(1.9rem,3.8vw,3.2rem)}
.head .sub{color:var(--muted);font-size:1.07rem;max-width:460px}
@media (max-width:860px){.sec{padding:84px 0}.head{grid-template-columns:1fr;margin-bottom:40px}}

/* ---------- how it works ---------- */
.how{background:var(--forest);color:#fff}
.how .kicker{color:var(--leaf)}
.how .head .sub{color:rgba(255,255,255,.72)}
.track{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.track::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 8px,transparent 8px 16px)}
.runner{position:absolute;top:13px;left:0;width:30px;height:30px;z-index:2;animation:run 7s var(--out) infinite;animation-play-state:paused}
[dir="rtl"] .runner{left:auto;right:0;animation-name:runR}
.runner .apple{width:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.how.live .runner{animation-play-state:running}
@keyframes run{0%{left:0;opacity:0}6%{opacity:1}30%,40%{left:33.33%}63%,73%{left:66.66%}94%{opacity:1}100%{left:calc(100% - 30px);opacity:0}}
@keyframes runR{0%{right:0;opacity:0}6%{opacity:1}30%,40%{right:33.33%}63%,73%{right:66.66%}94%{opacity:1}100%{right:calc(100% - 30px);opacity:0}}
.station{position:relative;padding-inline-end:28px}
.station .node{width:56px;height:56px;border-radius:50%;background:var(--forest-2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);display:grid;place-items:center;font:500 .8rem var(--num);color:var(--leaf);position:relative;z-index:1}
.station.app .node{background:var(--brand);color:#fff;box-shadow:none}
.station h3{font-size:clamp(1.6rem,2.6vw,2.3rem);margin:26px 0 6px}
.station p.k{font:500 .76rem var(--label);letter-spacing:.06em;text-transform:var(--caps);color:rgba(255,255,255,.6)}
[lang="ar"] .station p.k{font-size:.9rem;letter-spacing:0}
.station ul{list-style:none;margin:18px 0 0;padding:0}
.station li{padding:11px 0;border-top:1px solid rgba(255,255,255,.12);font-weight:500}
@media (max-width:860px){
  .track{grid-template-columns:1fr;gap:36px;padding-inline-start:76px}
  .track::before{left:auto;right:auto;inset-inline-start:27px;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 8px,transparent 8px 16px)}
  .station{padding:0}
  .station .node{position:absolute;inset-inline-start:-76px;top:0}
  .station h3{margin-top:8px}
  .runner{display:none}
}
.platform-k{margin-top:80px;padding-top:28px;border-top:1px solid rgba(255,255,255,.16);font:500 .76rem var(--label);letter-spacing:.06em;text-transform:var(--caps);color:rgba(255,255,255,.6)}
[lang="ar"] .platform-k{font-size:.9rem;letter-spacing:0}
.platform{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:18px}
.platform b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:700;letter-spacing:var(--tight)}
.platform span{color:rgba(255,255,255,.7);font-size:.93rem}
@media (max-width:860px){.platform{grid-template-columns:1fr 1fr}}

/* ---------- who it's for ---------- */
.who-grid{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:start}
.roles{position:relative;display:grid;border-inline-start:2px solid var(--line)}
.roles .mark{position:absolute;inset-inline-start:-2px;width:2px;background:var(--brand);top:0;height:0;transition:top .55s var(--out),height .55s var(--out),left .55s var(--out),right .55s var(--out),width .55s var(--out)}
.role{all:unset;cursor:pointer;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.95rem);letter-spacing:var(--tight);line-height:1.2;padding-block:10px;padding-inline-start:24px;color:rgba(18,48,32,.38);transition:color .3s,transform .5s var(--out)}
[lang="ar"] .role{font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:600}
.role:hover{color:var(--ink)}
.role[aria-selected="true"]{color:var(--ink);transform:translateX(6px)}
[dir="rtl"] .role[aria-selected="true"]{transform:translateX(-6px)}
.role:focus-visible{outline:3px solid var(--forest);outline-offset:2px}
.panel{background:var(--card);border-radius:24px;padding:clamp(24px,4vw,44px);box-shadow:0 1px 0 var(--line),0 30px 60px -40px rgba(18,48,32,.35);min-height:420px}
.panel h3{font-size:clamp(1.7rem,3vw,2.4rem)}
.panel .d{color:var(--muted);margin-top:12px;max-width:560px}
.feats{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.feats li{padding:15px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:22px 1fr;gap:2px 10px}
.feats li::before{content:"";grid-row:span 2;width:12px;height:12px;margin-top:7px;border-radius:4px;background:var(--leaf);box-shadow:inset 0 0 0 1.5px var(--brand-ink)}
.feats b{font-weight:700}
.feats span{color:var(--muted);font-size:.92rem;line-height:1.5}
.panel .swap{animation:swapIn .6s var(--out) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes swapIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .who-grid{grid-template-columns:1fr;gap:26px}
  .roles{display:flex;overflow-x:auto;border-inline-start:0;border-bottom:2px solid var(--line);scrollbar-width:none;margin-inline:-16px;padding-inline:16px}
  .roles::-webkit-scrollbar{display:none}
  .roles .mark{top:auto!important;bottom:-2px;inset-inline-start:auto;height:2px!important}
  .role{font-size:1.15rem;padding:10px 14px;white-space:nowrap}
  [lang="ar"] .role{font-size:1.1rem}
  .role[aria-selected="true"],[dir="rtl"] .role[aria-selected="true"]{transform:none}
  .feats{grid-template-columns:1fr}
}

/* ---------- menus ---------- */
.menus{background:var(--card)}
.trays{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tray-card{margin:0}
.tray{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:8px;aspect-ratio:4/3;padding:10px;border-radius:22px;background:var(--paper)}
.cell{display:grid;place-items:center;border-radius:14px;font:500 .78rem var(--label);letter-spacing:.05em;text-transform:var(--caps);font-style:normal}
[lang="ar"] .cell{font-size:.95rem;font-weight:600;letter-spacing:0}
.cell.main{grid-row:span 2}
.cell.on{background:var(--leaf);color:var(--forest)}
.cell.on.main{background:var(--brand);color:#fff}
.cell.off{border:1.5px dashed rgba(18,48,32,.18);color:rgba(18,48,32,.35)}
.js .tray .cell.on{transform:scale(.6);opacity:0}
.in .tray .cell.on{transform:none;opacity:1;transition:transform .7s var(--spring) calc(var(--c,0)*110ms + 200ms),opacity .3s calc(var(--c,0)*110ms + 200ms)}
.tray-card figcaption{margin-top:18px;display:grid;gap:3px}
.tray-card b{font-family:var(--display);font-size:1.45rem;letter-spacing:var(--tight)}
.tray-card span{color:var(--muted);font-size:.94rem}
@media (max-width:820px){.trays{grid-template-columns:1fr;max-width:420px}}
.rules{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;margin-top:96px;align-items:start}
.rules h3{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.rules .sub{color:var(--muted);margin:10px 0 26px}
.rot{display:grid;grid-template-columns:56px repeat(6,1fr);gap:6px;align-items:center;font:500 .76rem var(--label);color:var(--muted)}
[lang="ar"] .rot{font-size:.85rem}
.rot .c{height:30px;border-radius:7px;transform-origin:left}
[dir="rtl"] .rot .c{transform-origin:right}
.c.s{background:var(--leaf)}.c.l{background:var(--butter)}.c.f{background:var(--brand)}
.js .rot .c{transform:scaleX(0)}
.in .rot .c{transform:none;transition:transform .6s var(--out) calc(var(--k)*28ms)}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:.86rem;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-inline-end:7px;vertical-align:-1px}
.facts{display:grid;grid-template-columns:1fr 1fr}
.facts div{padding:18px 0;border-top:1px solid var(--line);display:grid;gap:2px}
.facts div:nth-child(odd){padding-inline-end:20px}
.facts b{font-family:"Gabarito",sans-serif;font-size:clamp(2.6rem,5vw,3.8rem);font-weight:800;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums}
.facts span{color:var(--muted);font-size:.92rem}
.qc{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:72px}
.qc div{padding-top:18px;border-top:2px solid var(--ink)}
.qc h4{font-size:1.2rem;margin-bottom:8px}
.qc p{color:var(--muted);font-size:.95rem}
@media (max-width:860px){.rules,.qc{grid-template-columns:1fr;gap:36px}}

/* ---------- delivery: the school day ---------- */
.day{--daybg:var(--forest);position:relative;background:var(--forest);color:#fff;transition:background-color 1.2s var(--out),color 1.2s var(--out)}
.day.morning{--daybg:var(--butter);background:var(--butter);color:var(--ink)}
.day-pin{padding:100px 0}
.day-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.day .kicker{color:var(--leaf);transition:color 1.2s}
.day.morning .kicker{color:var(--brand-ink)}
.day h2{font-size:clamp(2rem,min(4.2vw,6.4vh),3.6rem)}
[lang="ar"] .day h2{font-size:clamp(1.8rem,min(3.6vw,5.4vh),3rem)}
.day .sub{max-width:440px;margin-top:clamp(10px,1.8vh,18px);opacity:.8}
.clock{position:relative;margin-top:clamp(18px,4vh,44px);display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.clock .t{position:relative;overflow:hidden;font:500 clamp(3.4rem,min(9vw,13vh),8rem)/1 var(--num);letter-spacing:-.06em;font-variant-numeric:tabular-nums;height:1em;direction:ltr}
.clock .t span{display:block}
.clock .t span.out{position:absolute;inset:0;animation:rollOut .55s var(--out) forwards}
.clock .t span.new{animation:rollIn .55s var(--out)}
@keyframes rollOut{to{transform:translateY(-100%);opacity:0}}
@keyframes rollIn{from{transform:translateY(100%);opacity:0}}
.clock small{font:500 .78rem var(--label);letter-spacing:.06em;text-transform:var(--caps);opacity:.75;padding-bottom:12px}
[lang="ar"] .clock small{font-size:1rem;letter-spacing:0}
.orb{position:absolute;inset-inline-end:0;bottom:12px;width:56px;height:56px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 10px rgba(243,245,236,.08),0 0 60px 10px rgba(243,245,236,.18);overflow:hidden;transition:background 1.2s var(--out),box-shadow 1.2s}
.orb::after{content:"";position:absolute;width:46px;height:46px;border-radius:50%;background:var(--forest);top:-8px;left:18px;transition:transform 1.2s var(--out)}
.morning .orb{background:#F08A2C;box-shadow:0 0 0 14px rgba(240,138,44,.16),0 0 0 30px rgba(240,138,44,.07)}
.morning .orb::after{transform:translate(70px,-60px)}
.steps{list-style:none;margin:0;padding:0;position:relative;max-width:480px}
.steps::before,.steps .fill{content:"";position:absolute;inset-inline-start:11px;top:14px;bottom:14px;width:2px;background:currentColor;opacity:.18}
.steps .fill{opacity:1;background:var(--leaf);bottom:auto;height:0;transition:height .6s var(--out),background 1.2s}
.morning .steps .fill{background:var(--brand)}
.step{position:relative;padding-block:clamp(7px,1.5vh,14px);padding-inline-start:46px;opacity:.4;transition:opacity .5s var(--out)}
.step::before{content:"";position:absolute;inset-inline-start:4px;top:calc(clamp(7px,1.5vh,14px) + 7px);width:16px;height:16px;border-radius:50%;background:var(--forest);box-shadow:inset 0 0 0 2px currentColor;transition:background .5s,transform .5s var(--spring),box-shadow .5s}
.morning .step::before{background:var(--butter)}
.step.done,.step.on{opacity:1}
.step.done::before,.step.on::before{background:var(--leaf);box-shadow:inset 0 0 0 2px var(--leaf)}
.morning .step.done::before,.morning .step.on::before{background:var(--brand);box-shadow:inset 0 0 0 2px var(--brand)}
.step.on::before{transform:scale(1.35)}
.step b{display:block;font-family:var(--display);font-size:clamp(1.1rem,min(2vw,2.8vh),1.5rem);font-weight:700;letter-spacing:var(--tight);line-height:1.3}
.step span{font-size:.94rem;opacity:.85}
.step time{float:inline-end;font:500 .82rem var(--num);opacity:.75;padding-top:5px;margin-inline-start:12px}
.day .note{margin-top:16px;font:400 .76rem var(--label);opacity:.65}
[lang="ar"] .day .note{font-size:.88rem}
@media (min-width:961px) and (min-height:620px){
  .pinned .day{height:330vh}
  .pinned .day-pin{position:sticky;top:0;height:100vh;display:grid;align-content:center;padding:80px 0 24px}
}
@media (max-width:960px){.day-grid{grid-template-columns:1fr;gap:40px}}
.includes{padding:64px 0 0}
.includes h3{font-size:1.3rem;margin-bottom:18px}
.includes ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.includes li{padding:9px 14px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);font-size:.92rem;font-weight:500}

/* ---------- app: real screen reel ---------- */
.app-grid{display:grid;grid-template-columns:360px 1fr;gap:72px;align-items:center}
.device{position:relative}
.device::before{content:"";position:absolute;inset:8% -14% 14%;border-radius:50%;background:radial-gradient(closest-side,var(--brand-soft),transparent);z-index:-1}
.phone{width:300px;max-width:100%;margin:0 auto;background:var(--forest);border-radius:46px;padding:10px;box-shadow:0 50px 80px -40px rgba(18,48,32,.6),inset 0 0 0 1.5px rgba(255,255,255,.08)}
.screens{border-radius:37px;overflow:hidden;background:#fff;aspect-ratio:390/844;position:relative;direction:ltr}
.reel{display:flex;height:100%;transition:transform 1s var(--out)}
.reel img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 1s var(--out),filter 1s}
.reel img:not(.cur){transform:scale(.9);filter:brightness(.85)}
.chapters{display:grid;grid-template-columns:repeat(var(--n,4),1fr);gap:8px;margin:22px auto 0;max-width:340px}
.chapters button{all:unset;cursor:pointer;display:grid;gap:7px;font:600 .8rem var(--body);color:var(--muted);text-align:center;transition:color .3s}
.chapters button:focus-visible{outline:3px solid var(--forest);outline-offset:3px;border-radius:4px}
.chapters i{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.chapters i::after{content:"";display:block;height:100%;width:100%;background:var(--brand);transform:scaleX(0);transform-origin:left}
[dir="rtl"] .chapters i::after{transform-origin:right}
.chapters .done i::after{transform:none}
.chapters .cur{color:var(--ink)}
.chapters .cur i::after{animation:prog 4.6s linear forwards}
.paused .chapters .cur i::after{animation-play-state:paused}
@keyframes prog{to{transform:none}}
.app-feats{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.af{padding:16px 0;border-top:1px solid var(--line)}
.af b{font-family:var(--display);font-size:1.15rem;font-weight:700;letter-spacing:var(--tight)}
.af span{display:block;color:var(--muted);font-size:.93rem;margin-top:2px}
.af b .later,.node b .later{display:inline-block;margin:0;margin-inline-start:6px;font-size:.66rem;color:var(--forest)}
.pay{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;align-items:center}
.pay p{font:500 .74rem var(--label);text-transform:var(--caps);letter-spacing:.06em;color:var(--muted);margin-inline-end:6px}
[lang="ar"] .pay p{font-size:.9rem;letter-spacing:0}
.pay span{font-weight:600;font-size:.88rem;padding:8px 13px;border-radius:10px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line)}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.badge{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:13px;padding-block:9px;padding-inline:14px 16px}
.badge svg{width:22px;height:22px;fill:#fff}
.badge .t{display:grid;line-height:1.2}
.badge small{font:500 .6rem var(--label);text-transform:var(--caps);letter-spacing:.05em;opacity:.7}
[lang="ar"] .badge small{font-size:.72rem;letter-spacing:0}
.badge b{font-size:.95rem}
.onboard-k{margin-top:90px;margin-bottom:20px;font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:var(--tight)}
.onboard{display:grid;grid-template-columns:repeat(4,1fr)}
.ob{position:relative;padding-top:22px;padding-inline-end:24px;border-top:2px solid var(--ink)}
.ob small{font:500 .74rem var(--label);letter-spacing:.06em;text-transform:var(--caps);color:var(--brand-ink)}
[lang="ar"] .ob small{font-size:.88rem;letter-spacing:0;font-weight:700}
.ob b{display:block;font-family:var(--display);font-size:1.3rem;letter-spacing:var(--tight);margin:6px 0 4px}
.ob span{color:var(--muted);font-size:.92rem}
@media (max-width:900px){.app-grid{grid-template-columns:1fr;gap:56px}.onboard{grid-template-columns:1fr 1fr;gap:28px 20px}}
@media (max-width:560px){.app-feats{grid-template-columns:1fr}.phone{width:270px}}

/* ---------- payments ---------- */
.money{display:grid;grid-template-columns:1fr 90px 1.1fr 90px 1fr;align-items:center}
.stack{display:grid;gap:12px}
.node{background:var(--card);border-radius:18px;padding:20px 22px;box-shadow:inset 0 0 0 1.5px var(--line)}
.node b{display:block;font-family:var(--display);font-size:1.2rem;letter-spacing:var(--tight)}
.node span{color:var(--muted);font-size:.92rem}
.node.hub{background:var(--brand);color:#fff;box-shadow:0 30px 50px -30px rgba(40,90,40,.8);padding:30px 26px}
.node.hub span{color:rgba(255,255,255,.9)}
.node.hub .apple{width:34px;margin-bottom:14px}
.pipe{height:2px;position:relative;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px) 0 0/12px 2px;animation:flow .9s linear infinite;animation-play-state:paused;opacity:.5}
[dir="rtl"] .pipe{transform:scaleX(-1)}
.pipe::after{content:"";position:absolute;right:-1px;top:-5px;border:6px solid transparent;border-left:8px solid var(--ink);border-right:0}
.in .pipe{animation-play-state:running}
@keyframes flow{to{background-position:12px 0}}
@keyframes flowV{to{background-position:0 12px}}
.subsidy{margin-top:48px;display:grid;grid-template-columns:auto 1fr;gap:20px 40px;padding:30px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line)}
.subsidy h3{font-size:1.5rem;max-width:260px}
.subsidy p{color:var(--muted)}
@media (max-width:900px){
  .money{grid-template-columns:1fr}
  .pipe,[dir="rtl"] .pipe{transform:none;width:2px;height:48px;justify-self:center;background:repeating-linear-gradient(180deg,var(--ink) 0 6px,transparent 6px 12px) 0 0/2px 12px;animation-name:flowV}
  .pipe::after{right:auto;left:-5px;top:auto;bottom:-1px;border:6px solid transparent;border-top:8px solid var(--ink);border-bottom:0}
  .subsidy{grid-template-columns:1fr}
}

/* ---------- rewards ---------- */
.rewards{background:var(--card)}
.rw{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.rw h3{font-size:1.5rem}
.rw .sub{color:var(--muted);font-size:.93rem;margin:4px 0 22px}
.board{display:grid;gap:12px}
.row{display:grid;grid-template-columns:28px 110px 1fr 48px;gap:12px;align-items:center;font-size:.94rem}
.row .n{font:500 .85rem var(--num);color:var(--brand-ink)}
.row .b{height:12px;border-radius:7px;background:var(--paper);overflow:hidden}
.row .b i{display:block;height:100%;width:var(--w);background:var(--brand);border-radius:7px;transform-origin:left}
[dir="rtl"] .row .b i{transform-origin:right}
.js .row .b i{transform:scaleX(0)}
.in .row .b i{transform:none;transition:transform 1.1s var(--out) calc(var(--k,0)*90ms + 150ms)}
.row .v{text-align:end;font:500 .85rem var(--num)}
.streak{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wk{background:var(--leaf);border-radius:12px;padding:12px 16px;font-weight:700;font-size:.86rem;line-height:1.25;text-align:center}
.wk small{display:block;font:500 .66rem var(--label);text-transform:var(--caps);opacity:.75}
[lang="ar"] .wk small{font-size:.76rem}
.prize{background:var(--brand);color:#fff;border-radius:12px;padding:12px 18px;font-weight:700}
.js .streak > *{opacity:0;transform:scale(.7)}
.in .streak > *{opacity:1;transform:none;transition:transform .6s var(--spring) calc(var(--k)*160ms + 200ms),opacity .3s calc(var(--k)*160ms + 200ms)}
.streak .sep{color:var(--muted)}
[dir="rtl"] .in .streak .sep{transform:scaleX(-1)}
.checks{margin:24px 0 0;padding:0;list-style:none}
.checks li{padding:10px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.94rem}
.small{font:400 .76rem var(--label);color:var(--muted);margin-top:16px}
[lang="ar"] .small{font-size:.86rem}
@media (max-width:860px){.rw{grid-template-columns:1fr}}

/* ---------- insights ---------- */
.audiences{border-top:2px solid var(--ink)}
.aud{display:grid;grid-template-columns:240px 1fr auto;gap:20px;align-items:baseline;padding-block:18px;border-bottom:1px solid var(--line);transition:padding .4s var(--out),background .3s}
.aud:hover{padding-inline-start:12px;background:linear-gradient(to right,rgba(123,245,157,.25),transparent 70%)}
[dir="rtl"] .aud:hover{background:linear-gradient(to left,rgba(123,245,157,.25),transparent 70%)}
.aud b{font-family:var(--display);font-size:1.35rem;letter-spacing:var(--tight)}
.aud span{color:var(--muted)}
.aud em{font:500 .7rem var(--label);font-style:normal;letter-spacing:.06em;text-transform:var(--caps);color:var(--brand-ink)}
[lang="ar"] .aud em{font-size:.85rem;letter-spacing:0;font-weight:700}
@media (max-width:760px){.aud{grid-template-columns:1fr auto}.aud span:not(.later){grid-column:1/-1;grid-row:2}}
.covers{margin-top:26px;color:var(--muted);font-size:.95rem;line-height:1.9}
.covers b{color:var(--ink);margin-inline-end:8px}
.dash{margin-top:64px;background:var(--card);border-radius:26px;padding:clamp(20px,3vw,32px);display:grid;gap:26px;box-shadow:0 1px 0 var(--line),0 40px 80px -50px rgba(18,48,32,.4)}
.dash-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center}
.dash-head b{font-family:var(--display);font-size:1.3rem;letter-spacing:var(--tight)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters span{font:500 .78rem var(--body);padding:7px 11px;border-radius:8px;background:var(--paper)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--paper);border-radius:16px;padding:18px}
.kpi small{color:var(--muted);font-size:.85rem}
.kpi b{display:block;font-family:"Gabarito",sans-serif;font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin:4px 0;unicode-bidi:isolate;direction:ltr;text-align:end}
[dir="ltr"] .kpi b{text-align:start}
.kpi span{font:500 .78rem var(--body);color:var(--brand-ink)}
@media (max-width:780px){.kpis{grid-template-columns:1fr 1fr}}
.dash-two{display:grid;grid-template-columns:1.25fr 1fr;gap:28px}
@media (max-width:780px){.dash-two{grid-template-columns:1fr}}
.dash h4{font-size:1rem;margin-bottom:14px}
.chartbox svg{width:100%;height:auto;display:block;overflow:visible;direction:ltr}
.chartbox .bar-r{transform-box:fill-box;transform-origin:bottom}
.js .chartbox .bar-r{transform:scaleY(0)}
.in .chartbox .bar-r{transform:none;transition:transform 1s var(--out) calc(var(--k)*90ms + 200ms)}
.adopt .row{grid-template-columns:86px 1fr 44px}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem;font-variant-numeric:tabular-nums}
th,td{text-align:start;padding:11px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font:500 .7rem var(--label);text-transform:var(--caps);letter-spacing:.06em;color:var(--muted)}
[lang="ar"] th{font-size:.82rem;letter-spacing:0}
td.num,th.num{text-align:end}
td.num{font-family:var(--num);font-size:.84rem}
.ok{color:var(--brand-ink)}.warn{color:#B76A00}
.dash .note{font:400 .74rem var(--label);color:var(--muted)}
[lang="ar"] .dash .note{font-size:.84rem}

/* ---------- partner ---------- */
.partner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
@media (max-width:900px){.partner{grid-template-columns:1fr;gap:48px}}
.partner .head{grid-template-columns:1fr;margin-bottom:34px}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:2px solid var(--ink)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:var(--tight)}
[lang="ar"] summary{font-size:1.1rem;font-weight:600}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;width:22px;height:22px;position:relative;margin-top:2px}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:2px;background:var(--brand);transition:transform .45s var(--out)}
summary .pm::after{transform:rotate(90deg)}
details[open] summary .pm::after{transform:rotate(0)}
details .ans{overflow:hidden;color:var(--muted);transition:height .45s var(--out)}
details .ans p{padding-bottom:20px}
form{display:grid;gap:16px;background:var(--forest);color:#fff;border-radius:26px;padding:clamp(24px,3.5vw,38px);position:sticky;top:96px}
form h3{font-size:1.9rem}
form .fsub{color:rgba(255,255,255,.7);margin-top:-6px;font-size:.95rem}
label{display:grid;gap:7px;font:500 .74rem var(--label);letter-spacing:.06em;text-transform:var(--caps);color:rgba(255,255,255,.78)}
[lang="ar"] label{font-size:.9rem;letter-spacing:0;font-weight:600}
input,select,textarea{font:500 1rem var(--body);text-transform:none;letter-spacing:0;padding:13px 14px;border-radius:12px;border:0;background:rgba(255,255,255,.08);color:#fff;width:100%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14);transition:box-shadow .3s,background .3s}
select option{color:var(--ink)}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.42)}
input:focus,select:focus,textarea:focus{outline:none;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px var(--leaf)}
input[type="tel"]{direction:ltr}
[dir="rtl"] input[type="tel"]{text-align:right}
textarea{min-height:96px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:540px){.form-row{grid-template-columns:1fr}}
form .btn-brand{justify-self:start}
.thanks{background:var(--leaf);color:var(--forest);border-radius:12px;padding:13px 15px;font-weight:600;font-size:.94rem;animation:swapIn .5s var(--out)}
@media (max-width:900px){form{position:static}}

/* ---------- closing + footer ---------- */
.closing{position:relative;background:var(--brand);color:#fff;padding:130px 0 40px;overflow:hidden}
.closing::before{content:"";position:absolute;left:0;right:0;top:-1px;height:16px;background:radial-gradient(circle at 50% 100%,var(--paper) 15px,transparent 15.6px) 0 0/32px 16px repeat-x}
.closing .big{display:grid;gap:4px}
.closing .ar{font-family:"Gabarito",sans-serif;font-weight:900;letter-spacing:-.05em;font-size:clamp(3.2rem,12vw,10.5rem);line-height:1.15;white-space:nowrap;justify-self:start;padding:.05em 0 .3em}
[lang="ar"] .closing .ar{font-family:var(--ar);font-weight:800;letter-spacing:0}
.closing h2{font-size:clamp(1.8rem,3.6vw,3rem);max-width:720px;margin-top:10px}
.closing .row2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-top:30px}
.closing p{max-width:440px;color:rgba(255,255,255,.9)}
.closing .btn-ink{font-size:1.05rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:110px;padding-top:22px;border-top:1px solid rgba(255,255,255,.3);font:400 .82rem var(--body);color:rgba(255,255,255,.88);padding-bottom:env(safe-area-inset-bottom,0px)}
.foot .brand .apple{width:22px}
.foot .brand b{font-size:1rem}
.js .closing .ar{clip-path:inset(-30% 0 -40% 100%)}
.closing.in .ar{clip-path:inset(-30% 0 -40% 0);transition:clip-path 1.4s var(--out)}

.hero-grid > *,.app-grid > *,.day-grid > *,.who-grid > *,.partner > *,.rules > *,.rw > *,.dash-two > *{min-width:0}

/* ---------- links, contact, form states ---------- */
a.badge{text-decoration:none;transition:transform .35s var(--spring),background .2s}
a.badge:hover{transform:translateY(-2px);background:var(--forest-2)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ferr{background:var(--apple-soft);color:var(--apple-ink);border-radius:12px;padding:13px 15px;font-weight:600;font-size:.94rem}
form button[disabled]{opacity:.6;cursor:progress}
.contact{display:flex;flex-wrap:wrap;gap:18px 44px;align-items:flex-end;margin-top:80px;padding-top:26px;border-top:1px solid rgba(255,255,255,.3)}
.ci{display:grid;gap:3px;text-decoration:none;color:#fff}
.ci span{font:500 .72rem var(--label);letter-spacing:.06em;text-transform:var(--caps);opacity:.75}
[lang="ar"] .ci span{font-size:.85rem;letter-spacing:0}
.ci b{font-size:1.06rem;font-weight:600;unicode-bidi:isolate}
a.ci:hover b{text-decoration:underline;text-underline-offset:4px}
.socials{display:flex;gap:8px;margin-inline-start:auto}
.socials a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;transition:background .2s,transform .35s var(--spring)}
.socials a:hover{background:rgba(255,255,255,.26);transform:translateY(-2px)}
.contact + .foot{margin-top:30px}
.mbar{display:none}

/* ---------- mobile: its own layout, not a squeezed desktop ---------- */
@media (max-width:720px){
  body{font-size:16px}
  .sec{padding:72px 0}
  .head{gap:12px;margin-bottom:30px}
  .head h2{font-size:clamp(2rem,8.6vw,2.6rem)}
  [lang="ar"] .head h2{font-size:clamp(1.75rem,7.4vw,2.2rem)}
  .head .sub{font-size:1rem}

  .nav .wrap{height:62px}
  .nav ul{inset:62px 0 0;height:calc(100dvh - 62px);padding-top:24px;gap:4px;overflow:auto}
  .nav ul a{font-size:2rem;padding:10px 0;border-bottom:1px solid var(--line)}
  .lang{padding:7px 11px;font-size:.85rem}

  .hero{padding:calc(92px + env(safe-area-inset-top,0px)) 0 34px}
  .launch{font-size:.7rem}
  [lang="ar"] .launch{font-size:.85rem}
  .hero h1{font-size:clamp(2.7rem,12.4vw,3.5rem);margin:14px 0 16px}
  [lang="ar"] .hero h1{font-size:clamp(2.3rem,10.6vw,3rem)}
  .lede{font-size:1rem}
  .hero .actions{margin-top:24px;gap:10px}
  .hero .actions .btn{flex:1 1 0;justify-content:center;padding:15px 12px;white-space:nowrap}
  .table{max-width:420px;margin-top:6px}
  .plate figcaption{bottom:0}
  .plate:nth-of-type(1){--x:-2%!important}
  .plate:nth-of-type(2){--x:48%!important;--cx:50%!important}
  .plate:nth-of-type(3){--x:0%!important}
  .plate:nth-of-type(4){--x:56%!important}

  .rail{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}

  .proof{padding:34px 0 40px}
  .proof li,.proof li:first-child,.proof li:nth-child(odd){background:var(--card);border:0;border-radius:18px;padding:18px;box-shadow:0 1px 0 var(--line)}
  .platform-k{margin-top:48px}
  .platform > div{background:rgba(255,255,255,.06);border-radius:16px;padding:18px}
  .track{gap:28px}
  .trays{max-width:none}
  .tray-card{background:var(--paper);border-radius:22px;padding:10px 10px 18px}
  .tray{background:var(--card)}
  .tray-card figcaption{padding-inline:8px}
  .rules{margin-top:56px}
  .qc{margin-top:44px}
  .qc > div{background:var(--paper);border:0;border-radius:18px;padding:18px}
  .app-feats .af{background:var(--card);border:0;border-radius:18px;padding:18px;box-shadow:0 1px 0 var(--line)}
  .onboard-k{margin-top:56px;font-size:1.3rem}
  .onboard{grid-template-columns:1fr 1fr!important}
  .onboard .ob b{font-size:1.1rem}
  .onboard .ob{background:var(--card);border:0;border-radius:18px;padding:18px;box-shadow:0 1px 0 var(--line)}
  .app-grid{gap:36px}
  .roles{flex-wrap:wrap;overflow:visible;margin:0;padding:0;border:0;gap:8px}
  .roles .mark{display:none}
  .role,[lang="ar"] .role{font-size:.98rem;padding:9px 15px;border-radius:999px;color:var(--ink);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);white-space:nowrap}
  .role[aria-selected="true"]{background:var(--forest);color:#fff;box-shadow:none}
  .panel{min-height:0;padding:22px;border-radius:20px}
  .feats li{padding:12px 0}

  .day-pin{padding:72px 0}
  .day-grid{gap:0}
  .day-grid > div:first-child{display:contents}
  .day .sub{margin-bottom:8px}
  .clock{position:sticky;top:0;z-index:3;background:var(--daybg);margin:0 -16px 10px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 6px;transition:background-color 1.2s var(--out)}
  .clock .t{font-size:clamp(3.2rem,16vw,4.4rem)}
  .clock small{padding-bottom:8px}
  .orb{width:40px;height:40px;bottom:14px;inset-inline-end:16px}
  .orb::after{width:32px;height:32px;left:14px}
  .step{padding-block:12px}

  .money .node{padding:16px 18px}
  .subsidy{padding:22px}
  .aud{padding-block:14px}
  .aud b{font-size:1.15rem}
  .dash{margin-top:40px;border-radius:20px}
  .kpi{padding:14px}
  form{border-radius:22px}
  .closing{padding:96px 0 calc(100px + env(safe-area-inset-bottom,0px))}
  .closing .row2 .btn{width:100%;justify-content:center}
  .contact{margin-top:48px;gap:16px 28px}
  .socials{margin-inline-start:0;width:100%}
  .foot{flex-direction:column;gap:8px;margin-top:48px}

  .mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:45;display:flex;gap:8px;transform:translateY(160%);transition:transform .55s var(--out)}
  .mbar.show{transform:none}
  .mbar .btn{flex:1;justify-content:center;background:var(--brand);box-shadow:0 18px 34px -12px rgba(5,25,12,.6)}
  .mbar-wa{flex:none;width:54px;border-radius:14px;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 18px 34px -12px rgba(5,25,12,.6)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-r],.js .hero h1 .ln > span,.js .hero-copy .fade,.js .plate,.js .tray .cell.on,.js .rot .c,.js .row .b i,.js .streak > *,.js .chartbox .bar-r{opacity:1!important;transform:none!important}
  .js .plate figcaption{opacity:1!important;transform:translateX(-50%)!important}
  .js .hphone{opacity:1!important;transform:translate(-50%,-50%) rotate(-5deg)!important}
  .js .closing .ar{clip-path:none}
  .chapters .cur i::after{transform:none}
}