:root{
    /* app 1989 Light / sage palette */
    --bg:#e9ede1;          /* sage paper */
    --bg-2:#eef2e7;
    --card:#f4f7ee;
    --line:#cdd4c0;
    --ink:#21261e;         /* app ink */
    --ink-soft:#464b3e;
    --text-dim:#6e766a;
    --blue:#2f6bff;        /* app blue */
    --blue-soft:#e2e9ff;
    --blue-glow:rgba(47,107,255,.22);
    --coral:#e8663c;       /* warm hand-drawn accent, used sparingly */
    --green:#3f9d6b;       /* soft accent for the third routine */
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{background:var(--bg);color:var(--ink);font-family:'Varela Round',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  html[dir="rtl"] body{font-family:'Beiruti',sans-serif;font-size:19px}
  /* Beiruti runs visually smaller than Varela Round; nudge Arabic up for optical parity */
  html[dir="rtl"] h1{font-size:clamp(48px,7.5vw,80px)}
  html[dir="rtl"] .tagline{font-size:clamp(23px,3.1vw,31px)}
  html[dir="rtl"] .hero .lead{font-size:clamp(18px,2.1vw,21px)}
  html[dir="rtl"] .rcard h3{font-size:26px}
  html[dir="rtl"] .rcard p{font-size:17px}
  html[dir="rtl"] .schools h2,html[dir="rtl"] .faq h2,html[dir="rtl"] .cta-section h2,html[dir="rtl"] .end-panel h2{font-size:clamp(32px,4.8vw,48px)}
  html[dir="rtl"] .pcell b{font-size:20px}
  html[dir="rtl"] .pcell span{font-size:16px}
  html[dir="rtl"] .faq-q{font-size:20px}
  html[dir="rtl"] .faq-a{font-size:17px}
  html[dir="rtl"] .microcopy{font-size:14px}
  html[dir="rtl"] .eyebrow{font-size:16px;font-weight:700}
  html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .brand{font-family:'Beiruti',sans-serif;font-weight:700}
  .wrap{max-width:1120px;margin:0 auto;padding:0 28px}
  a{color:inherit}
  /* keyboard focus visibility */
  a:focus-visible,button:focus-visible,.faq-q:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
  /* skip to content */
  .skip-link{position:absolute;top:-9999px;inset-inline-start:8px;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:8px;z-index:100;text-decoration:none;font-size:14px}
  .skip-link:focus{top:8px}

  .ar{display:none}
  html[dir="rtl"] .en{display:none}
  html[dir="rtl"] .ar{display:inline}
  html[dir="rtl"] .ar-block{display:block}
  small.ar{display:none}
  html[dir="rtl"] small.en{display:none}
  html[dir="rtl"] small.ar{display:block}
  /* badge small elements: override .badge small display to respect language */
  .badge small.ar{display:none}
  html[dir="rtl"] .badge small.en{display:none}
  html[dir="rtl"] .badge small.ar{display:block}

  nav.top{display:flex;justify-content:space-between;align-items:center;padding:26px 0}
  .brand{display:flex;align-items:center;gap:11px;font-weight:400;font-size:19px;letter-spacing:-.01em}
  .brand svg{width:30px;height:auto}
  .top-right{display:flex;align-items:center;gap:16px}
  /* compact header CTA */
  .badge-sm{background:var(--ink);color:var(--bg);text-decoration:none;padding:9px 16px;border-radius:10px;font-size:13px;display:inline-flex;align-items:center;gap:8px;transition:transform .2s,background .2s;white-space:nowrap}
  .badge-sm:hover{transform:translateY(-1px);background:var(--blue);color:#fff}
  .badge-sm svg{width:15px;height:15px}
  /* mid + end CTA sections */
  .cta-section{text-align:center;padding:16px 0 6px}
  .cta-section.end{padding:80px 0 0}
  .cta-section h2{font-weight:400;font-size:clamp(26px,4vw,38px);letter-spacing:-.02em;margin-bottom:8px}
  .cta-section p{color:var(--ink-soft);font-size:16px;margin-bottom:26px}
  /* end CTA as a distinct panel */
  .end-panel{background:
      radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.14), transparent 55%),
      radial-gradient(90% 120% at 15% 120%, rgba(47,107,255,.18), transparent 60%),
      var(--ink);
    color:var(--bg);border-radius:28px;padding:56px 32px 60px;text-align:center;position:relative;overflow:hidden}
  /* light text on dark ink: soft shadow to lift it off the background */
  .end-panel h2,.end-panel p{text-shadow:0 1px 4px rgba(0,0,0,1)}
  .end-panel .logo{width:56px;height:auto;color:var(--bg);opacity:.9;margin-bottom:22px}
  .end-panel h2{color:var(--bg);font-weight:400;font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;margin-bottom:10px}
  .end-panel p{color:#c9cdc0;font-size:16px;margin-bottom:28px}
  .end-panel .badge{background:var(--bg);color:var(--ink)}
  .end-panel .badge:hover{background:var(--blue);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,1)}
  @media(max-width:560px){.badge-sm .lbl{display:none}.badge-sm{padding:9px 11px}}
  .top-links a{font-size:14px;color:var(--text-dim);text-decoration:none;transition:color .2s}
  .top-links a:hover{color:var(--ink)}
  .langbtn{background:transparent;border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:13px;letter-spacing:.04em;padding:8px 16px;border-radius:9px;cursor:pointer;transition:border-color .2s,background .2s}
  .langbtn:hover{border-color:#b4bca6;background:var(--card)}

  .hero{padding:64px 0 80px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
  .hero-copy{text-align:left;position:relative;z-index:1}
  html[dir="rtl"] .hero-copy{text-align:right}
  .halo{position:absolute;top:20px;left:60%;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--blue-glow),transparent 70%);filter:blur(40px);z-index:0;animation:breathe 5s ease-in-out infinite}
  html[dir="rtl"] .halo{left:auto;right:60%}
  @keyframes breathe{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:.9}}
  .hero-logo{width:70px;height:auto;position:relative;z-index:1;margin:0 0 22px;display:block;color:var(--ink)}
  html[dir="rtl"] .hero-logo{margin-left:auto}
  h1{position:relative;z-index:1;font-weight:400;font-size:clamp(42px,6.5vw,72px);line-height:1;letter-spacing:-.02em}
  .tagline{position:relative;z-index:1;font-size:clamp(20px,2.8vw,28px);color:var(--ink);margin-top:14px;letter-spacing:-.01em}
  .hero .lead{position:relative;z-index:1;color:var(--ink-soft);font-size:clamp(16px,1.9vw,19px);max-width:40ch;margin:16px 0 0}
  html[dir="rtl"] .hero .lead{margin-left:auto}
  .cta-row{position:relative;z-index:1;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  html[dir="rtl"] .cta-row{align-items:flex-start}
  .badge{background:var(--ink);color:var(--bg);text-decoration:none;padding:15px 30px;border-radius:13px;font-size:15px;display:inline-flex;align-items:center;gap:12px;transition:transform .2s,background .2s;text-shadow:0 1px 3px rgba(0,0,0,1)}
  .end-panel .badge{text-shadow:none}
  .badge:hover{transform:translateY(-2px);background:var(--blue);color:#fff}
  .badge small{display:block;font-size:10px;opacity:.85}
  /* Official Apple badge (Arabic artwork) replaces the custom pill in RTL */
  /* Official Apple App Store badges replace the custom pill entirely, EN and AR alike */
  /* Official Apple App Store badges replace the custom pill entirely, EN and AR alike.
     Classes are prefixed badge-en/badge-ar (NOT en/ar) to avoid colliding with the
     site-wide html[dir="rtl"] .ar{display:inline} bilingual text-toggle rule above,
     which was overriding these images' display:none with higher specificity. */
  .apple-badge{display:none !important;width:auto}
  .badge{background:transparent;padding:0;border-radius:0;text-shadow:none}
  .badge:hover{background:transparent;color:inherit;transform:translateY(-2px)}
  .badge>svg,.badge>span{display:none}
  /* .badge is now used only as a bare wrapper for the real Apple badge image.
     Two older rules still out-rank the earlier flat reset above:
       - ".end-panel .badge{background:var(--bg)}" (2-class selector beats 1-class)
       - the max-width:860px media query's ".badge{padding:16px 34px}" (equal
         specificity, applies at mobile widths regardless of source order)
     !important settles it outright instead of chasing specificity further. */
  .badge,.end-panel .badge{background:transparent !important;padding:0 !important;
    border-radius:0 !important;text-shadow:none !important}
  .badge:hover,.end-panel .badge:hover{background:transparent !important;
    color:inherit !important;transform:translateY(-2px)}
  .badge .apple-badge.badge-en.blk{display:block !important;height:56px}
  .end-panel .badge .apple-badge.badge-en.blk{display:none !important}
  .end-panel .badge .apple-badge.badge-en.wht{display:block !important;height:56px}
  html[dir="rtl"] .badge .apple-badge.badge-en.blk{display:none !important}
  html[dir="rtl"] .badge .apple-badge.badge-ar.blk{display:block !important;height:56px}
  html[dir="rtl"] .end-panel .badge .apple-badge.badge-en.wht{display:none !important}
  html[dir="rtl"] .end-panel .badge .apple-badge.badge-ar.blk{display:none !important}
  html[dir="rtl"] .end-panel .badge .apple-badge.badge-ar.wht{display:block !important;height:56px}
  .microcopy{font-size:13px;color:var(--text-dim)}
  /* hand-drawn coral underline, used once in the hero */
  .mark-underline{position:relative;white-space:nowrap;color:var(--ink);font-weight:400}
  .mark-underline svg{position:absolute;left:-3px;right:-3px;bottom:-.28em;width:calc(100% + 6px);height:.42em;color:var(--coral);overflow:visible}
  .mark-underline path{stroke-dasharray:200;stroke-dashoffset:200;animation:draw-underline 0.7s ease 1.8s forwards}
  @keyframes draw-underline{to{stroke-dashoffset:0}}
  @media(prefers-reduced-motion:reduce){.mark-underline path{stroke-dashoffset:0;animation:none}}

  /* hero phone */
  .hero-phone{position:relative;z-index:1;display:flex;justify-content:center;animation:floatphone 6s ease-in-out infinite}
  @keyframes floatphone{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  .hero-phone img{width:100%;max-width:290px;height:auto;border-radius:34px;border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(33,38,30,.5);display:block}
  .hero-phone img.ar{display:none}
  html[dir="rtl"] .hero-phone img.en{display:none}
  html[dir="rtl"] .hero-phone img.ar{display:block}

  @media(max-width:860px){
    .hero{padding:34px 0 52px}
    .hero-grid{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center}
    .hero-copy{display:contents}
    .hero-logo{margin:0 auto 18px;width:62px;order:0}
    html[dir="rtl"] .hero-logo{margin:0 auto 18px}
    h1{order:1;text-align:center}
    .tagline{margin-top:12px;order:2;text-align:center}
    .hero-phone{order:3;margin:26px auto 4px}
    .hero-phone img{max-width:236px}
    .hero .lead{margin:16px auto 0;order:4;text-align:center}
    .cta-row{align-items:center;order:5;margin-top:26px;width:100%}
    html[dir="rtl"] .cta-row{align-items:center}
    .halo{left:50%;top:120px;width:340px;height:340px;transform:translateX(-50%)}
    html[dir="rtl"] .halo{left:50%;right:auto}
    @keyframes breathe{0%,100%{transform:translateX(-50%) scale(1);opacity:.55}50%{transform:translateX(-50%) scale(1.1);opacity:.85}}
    .badge{padding:16px 34px;font-size:16px}
  }

  .routines{padding:40px 0 90px}
  .rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .rcard{--accent:var(--blue);--accent-soft:var(--blue-soft);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px 28px;position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s,box-shadow .25s}
  .rcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);opacity:.55;transition:opacity .25s}
  .rcard:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 22px 46px -26px var(--accent)}
  .rcard:hover::before{opacity:1}
  .rcard .ico{width:46px;height:46px;border-radius:13px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:transform .25s ease}
  .rcard:hover .ico{transform:scale(1.06)}
  .rcard .ico svg{width:26px;height:26px;color:var(--accent)}
  /* per-routine accents */
  .rcard.r-metro{--accent:var(--blue);--accent-soft:var(--blue-soft)}
  .rcard.r-speed{--accent:var(--coral);--accent-soft:#fbe4da}
  .rcard.r-rhythm{--accent:var(--green);--accent-soft:#dcefe4}
  .rcard h3{font-weight:400;font-size:23px;letter-spacing:-.01em;margin-bottom:10px}
  .rcard p{color:var(--ink-soft);font-size:15.5px}

  .band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:70px 0;text-align:center}
  .band .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:34px}
  html[dir="rtl"] .band .eyebrow{letter-spacing:normal}
  .shots{display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
  .shot{width:236px;border-radius:30px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(33,38,30,.4);background:var(--card);line-height:0}
  .shot img{width:100%;height:auto;display:block}
  .shot img.ar{display:none}
  html[dir="rtl"] .shot img.en{display:none}
  html[dir="rtl"] .shot img.ar{display:block}

  .schools{padding:90px 0}
  .schools .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue)}
  html[dir="rtl"] .schools .eyebrow{letter-spacing:normal}
  .schools h2{font-weight:400;font-size:clamp(30px,4.5vw,44px);letter-spacing:-.02em;margin:14px 0 40px;max-width:20ch}

  /* angled 3D perspective showcase */
  .showcase{padding:40px 0 0}
  .showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  .showcase-copy{padding-top:40px}
  .showcase-copy .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:14px}
  html[dir="rtl"] .showcase-copy .eyebrow{letter-spacing:normal}
  .showcase-copy h2{font-weight:400;font-size:clamp(28px,4vw,42px);letter-spacing:-.02em;margin-bottom:16px;line-height:1.1}
  .showcase-copy p{color:var(--ink-soft);font-size:17px;max-width:44ch}
  /* phone bleeds off the bottom of the section */
  .showcase-stage{display:flex;justify-content:center;align-items:flex-start;height:520px;clip-path:inset(-240px -320px 0 -320px)}
  .showcase-phone{position:relative;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .showcase-stage:hover .showcase-phone{transform:translateY(-8px)}
  .showcase-phone img{width:100%;max-width:380px;height:auto;display:block;filter:drop-shadow(0 45px 60px rgba(33,38,30,.4)) drop-shadow(0 12px 24px rgba(33,38,30,.22))}
  .showcase-phone img.ar{display:none}
  html[dir="rtl"] .showcase-phone img.en{display:none}
  html[dir="rtl"] .showcase-phone img.ar{display:block}

  /* why / human story */
  .story{padding:70px 0}  .story-inner{max-width:680px;margin:0 auto;text-align:center}
  .story .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);display:block;margin-bottom:22px}
  html[dir="rtl"] .story .eyebrow{letter-spacing:normal}
  .story p{font-size:clamp(19px,2.6vw,25px);line-height:1.55;color:var(--ink);letter-spacing:-.01em}
  html[dir="rtl"] .story p{font-size:clamp(21px,2.9vw,27px)}
  .story p + p{margin-top:20px}
  .story .sig{margin-top:26px;font-size:15px;color:var(--text-dim)}
  html[dir="rtl"] .story .sig{font-size:16px}
  .story .accent{color:var(--coral)}
  .faq .eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);text-align:center;display:block}
  html[dir="rtl"] .faq .eyebrow{letter-spacing:normal}
  .faq h2{font-weight:400;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;text-align:center;margin:12px 0 40px}
  .faq-list{max-width:760px;margin:0 auto}
  .faq-item{border-top:1px solid var(--line)}
  .faq-item:last-child{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;background:none;border:none;font-family:inherit;color:var(--ink);font-size:18px;text-align:left;padding:22px 44px 22px 4px;cursor:pointer;position:relative;line-height:1.4}
  html[dir="rtl"] .faq-q{text-align:right;padding:22px 4px 22px 44px}
  .faq-q::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--blue);transition:transform .2s}
  html[dir="rtl"] .faq-q::after{right:auto;left:8px}
  .faq-item.open .faq-q::after{content:"–"}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;color:var(--ink-soft);font-size:16px;line-height:1.6}
  .faq-a-inner{padding:0 44px 22px 4px}
  html[dir="rtl"] .faq-a-inner{padding:0 4px 22px 44px}
  .faq-item.open .faq-a{max-height:260px}
  .faq-link{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue);padding-bottom:1px;white-space:nowrap}
  .faq-link:hover{opacity:.75}
  .pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
  .pcell{background:var(--card);padding:30px}
  .pcell b{font-weight:400;font-size:18px;display:block;margin-bottom:8px}
  .pcell span{color:var(--ink-soft);font-size:15px}

  footer{border-top:1px solid var(--line);padding:52px 0 44px;margin-top:64px}
  .fgrid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
  .fbrand{display:flex;flex-direction:column;gap:8px;max-width:300px}
  .fbrand .fmark{display:flex;align-items:center;gap:10px;font-size:18px;color:var(--ink)}
  .fbrand .fmark svg{width:26px;height:auto}
  .fbrand .ftag{color:var(--text-dim);font-size:14px;line-height:1.55}
  .fnav{display:flex;flex-direction:column;gap:12px;text-align:right}
  html[dir="rtl"] .fnav{text-align:left}
  .fnav a{color:var(--text-dim);text-decoration:none;font-size:14px;transition:color .2s}
  .fnav a:hover{color:var(--ink)}
  .fbottom{border-top:1px solid var(--line);margin-top:36px;padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
  .fbottom .cr{color:var(--text-dim);font-size:13px}
  .fbottom .flang{background:transparent;border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:12px;padding:6px 14px;border-radius:8px;cursor:pointer;transition:border-color .2s,background .2s}
  .fbottom .flang:hover{border-color:#b4bca6;background:var(--card)}

  /* back to top button */
  .to-top{position:fixed;bottom:24px;right:24px;width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s,background .2s,border-color .2s;z-index:50;box-shadow:0 8px 24px -12px rgba(33,38,30,.4)}
  .to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
  .to-top:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .to-top svg{width:20px;height:20px}
  html[dir="rtl"] .to-top{right:auto;left:24px}
  @media(max-width:560px){.to-top{bottom:18px;right:18px;width:42px;height:42px}html[dir="rtl"] .to-top{right:auto;left:18px}}

  @media(max-width:820px){
    .top-links{display:none}
    nav.top{padding:20px 0}
    /* routine cards -> clean stacked cards, full width */
    .routines{padding:24px 0 60px}
    .rgrid{grid-template-columns:1fr;gap:14px}
    .rcard{padding:24px 22px;text-align:left}
    .rcard .ico{margin-bottom:16px}
    .rcard h3{margin-bottom:8px;white-space:nowrap}
    html[dir="rtl"] .rcard{text-align:right}
    /* gallery */
    .band{padding:52px 0}
    .story{padding:52px 0}
    .showcase{padding:20px 0 0}
    .showcase-grid{grid-template-columns:1fr;gap:20px;text-align:center}
    .showcase-copy{padding-top:0}
    .showcase-copy p{margin:0 auto}
    .showcase-stage{height:340px;align-items:flex-start}
    .showcase-phone img{max-width:300px}
    .band .eyebrow{margin-bottom:26px}
    .shots{gap:16px}
    .shot{width:min(78vw,260px)}
    /* schools */
    .schools{padding:60px 0}
    .schools h2{margin:12px 0 28px}
    .pgrid{grid-template-columns:1fr}
    .pcell{padding:24px}
    /* CTA sections */
    .cta-section{padding:20px 0 4px}
    .cta-section.end{padding:56px 0 8px}
    .cta-section p{margin-bottom:22px}
    /* footer */
    footer{padding:40px 0 36px;margin-top:48px}
    .fgrid{flex-direction:column;gap:28px}
    .fnav{text-align:left}
    html[dir="rtl"] .fnav{text-align:right}
    .fbottom{flex-direction:column;text-align:center;gap:16px}
    .end-panel{padding:44px 24px 48px}
  }
  @media(max-width:400px){
    .wrap{padding:0 20px}
    h1{font-size:40px}
    .rcard{padding:22px 18px}
  }