/* =============================================================================
   Kiitab App — the site's only stylesheet.

   No build step. Edit this file, refresh the browser, see the change.

   Three parts:
     1. AOS            scroll-animation library. Vendor code, leave alone.
     2. RESET + TOKENS generated once from Tailwind's preflight. Colours, fonts
                       and sizes live in :root here - change a value and it
                       applies everywhere. Otherwise leave alone.
     3. SITE STYLES    everything hand-written for this site. Edit here.

   Part 2 sits in @layer, part 3 mostly does too; later layers win, and the
   `page` layer at the bottom is the highest, so a rule you add there beats
   anything above it.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. AOS (vendor)
   --------------------------------------------------------------------------- */
[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)}

/* ---------------------------------------------------------------------------
   2. RESET + TOKENS (generated) + 3. SITE STYLES
   --------------------------------------------------------------------------- */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-brand:#009aed;--color-brand-deep:#0072ae;--color-brand-pale:#e0f3fc;--color-brand-white:#ffffff;--color-brand-mist:#d6effc;--color-flame:#d64221;--color-leaf:#9ebe44;--color-leaf-light:#afcf54;--color-sun:#ffe970;--color-sun-deep:#e9b816;--color-sun-ink:#866d15;--font-display:"Pally", ui-rounded, "Trebuchet MS", system-ui, sans-serif;--font-ui:"Proxima Nova", "Pally", system-ui, -apple-system, sans-serif;--radius-card:3.4rem;--radius-btn:4.3rem;--radius-pill:12.8rem;--shadow-card:1.2rem 1.4rem 4rem #0000001f;--shadow-btn:1.2rem 1.4rem 2rem #0000001f;--text-mega:7.6922rem;--text-count:6.948rem;--text-h1:6.2rem;--text-h2:4.6rem;--text-h3:4.1rem;--text-h4:3.7364rem;--text-h5:2.983rem;--text-lead:2.7rem;--text-body:2.4rem;--text-ui:2.569rem;--text-nav:2.2rem;--text-btn:2.4rem;--text-faq:2.7rem;--text-note:2.269rem;--text-fine:2.071rem;--text-tiny:1.9rem}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px;font-size:62.5%;overflow-x:clip}@media (min-width:1100px){html{scroll-padding-top:2.4rem;font-size:.694444vw}}body{font-family:var(--font-display);font-size:var(--text-body);color:#000;background:var(--color-brand);-webkit-font-smoothing:antialiased;overflow-x:clip}img,svg,video{max-width:100%;display:block}img{height:auto}:focus-visible{outline-offset:3px;border-radius:4px;outline:3px solid #fff}.s-tajweed :focus-visible,.s-how :focus-visible,.s-cards :focus-visible{outline-color:var(--color-brand)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}[data-aos]{opacity:1!important;transform:none!important}}}@layer components{


  /* The 1440-wide comp. Full-bleed colour lives on the <section>; everything
     measured from the Figma origin lives inside this. */
  .canvas {
    position: relative;
    width: 100%;
    max-width: 144rem;
    margin-inline: auto;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    height: 6.3rem;
    padding-inline: 3.2rem;
    border-radius: var(--radius-btn);
    background: linear-gradient(180deg, var(--color-sun) 0%, var(--color-sun-deep) 100%);
    color: var(--color-sun-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-btn, 2.4rem);
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--shadow-btn);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
  .btn:active { transform: translateY(0); }

  .card {
    background: #fff;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
  }

  /* Yellow hand-drawn underline that sits under a phrase in several headings. */
  .squiggle {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
  }

  /* ---- navigation ------------------------------------------------------- */

  .nav-link {
    position: relative;
    font-family: var(--font-ui);
    font-size: var(--text-nav);
    color: #fff;
  }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1.5rem;
    width: 5.2rem;
    height: 0.3rem;
    border-radius: 999px;
    background: #fff;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
  }
  /* Hover only. The scrollspy still sets aria-current for assistive tech, but it
     is deliberately not drawn - a permanent underline on whichever section is in
     view reads as a broken link rather than a state. */
  .nav-link:hover::after,
  .nav-link:focus-visible::after { transform: translateX(-50%) scaleX(1); }

  .burger-bar {
    display: block;
    width: 2.4rem;
    height: 0.25rem;
    border-radius: 999px;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }
  [aria-expanded="true"] .burger-bar:nth-child(1) { transform: translateY(0.75rem) rotate(45deg); }
  [aria-expanded="true"] .burger-bar:nth-child(2) { opacity: 0; }
  [aria-expanded="true"] .burger-bar:nth-child(3) { transform: translateY(-0.75rem) rotate(-45deg); }

  /* ---- FAQ -------------------------------------------------------------- */

  .faq-item { border-radius: var(--radius-pill); background: var(--color-brand-deep); transition: background .25s ease, border-radius .25s ease; }
  .faq-item[open] { background: #fff; border-radius: 3.4rem; }

  .faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    text-align: left;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    list-style: none;
  }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-item[open] .faq-q { color: var(--color-brand); }
  .faq-chevron { flex: none; transition: transform .25s ease; }
  .faq-item[open] .faq-chevron { transform: rotate(180deg); }

  /* ---- countdown -------------------------------------------------------- */

  .count-cell { position: relative; }
  .count-cell img { width: 100%; height: auto; }
  .count-cell b {
    position: absolute;
    inset: 0 0 auto 0;
    display: block;
    font-weight: 700;
    color: #000;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  /* the two stacked dots that separate the cells */
  .count-sep { display: grid; gap: 0.7em; align-content: center; }
  .count-sep i { display: block; width: 1em; height: 1em; border-radius: 999px; background: #2b2416; }

  /* ---- video ------------------------------------------------------------ */

  .video-play {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 999px;
    transition: transform .2s ease;
  }
  .video-card:hover .video-play { transform: scale(1.06); }
  .video-play img { width: 100%; height: 100%; }

  .video-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 2.4rem;
    background: rgb(0 0 0 / 0.78);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
  }
  .video-modal[data-open="true"] { opacity: 1; visibility: visible; }
  .video-modal video {
    width: min(100%, 46rem);
    max-height: 84vh;
    border-radius: 2rem;
    background: #000;
  }
  @media (orientation: landscape) {
    .video-modal video { width: auto; height: min(84vh, 90rem); }
  }
  .video-close {
    position: absolute;
    top: 2rem; right: 2rem;
    width: 4.4rem; height: 4.4rem;
    display: grid; place-items: center;
    border-radius: 999px;
    background: rgb(255 255 255 / 0.15);
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
  }

  /* ---- reviews ---------------------------------------------------------- */

  .review-nav {
    width: 6.3rem; height: 6.3rem;
    border-radius: 999px;
    display: grid; place-items: center;
    transition: transform .18s ease, opacity .18s ease;
  }
  .review-nav:hover { transform: scale(1.08); }
  .review-nav[disabled] { opacity: .45; cursor: not-allowed; }
  .review-nav[disabled]:hover { transform: none; }

  .review-slide[hidden] { display: none; }
}@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.block{display:block}.contents{display:contents}.hidden{display:none}.inline{display:inline}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.text-brand{color:var(--color-brand)}.text-flame{color:var(--color-flame)}.text-sun{color:var(--color-sun)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\[hostname\:port\]{hostname:port}}@layer page{
/* =============================================================================
   Kiitab App — page layout.

   Three parts, in this order:

     1. APPEARANCE   colour, weight, family, backgrounds — identical everywhere.
     2. MOBILE       @media (max-width: 1099px). Ordinary flow, real pixels,
                     built against the 375-wide comp.
     3. DESKTOP      @media (min-width: 1100px). The 1440-wide comp, rebuilt by
                     pinning each element at its own coordinate.

   Both layout blocks are bounded, so neither can leak into the other. Above
   1100px the root font-size is viewport-driven (see tailwind.css), so 1rem is
   one design pixel ÷ 10 and the whole comp scales as a single piece.
   ============================================================================= */

/* =============================================================================
   1. APPEARANCE
   ============================================================================= */

.canvas { padding-inline: 22px; }

/* <picture> is only a source switcher. Left in the box tree it becomes the
   containing block for the absolutely-positioned .hill inside it, and an
   inline picture has no width, so width:100% collapsed to 0. */
picture { display: contents; }

/* Illustration layers are positioned to overlap their neighbours - that overlap
   is the design - so they routinely sit on top of text and buttons. Left
   clickable they swallow the click: .hero-art spans the whole hero and killed
   the hero CTA, .pricing-art covered the second Download button.
   None of them are interactive, so none of them take pointer events.
   Deliberately excludes .review-arrows, which is a group of real buttons. */
.hero-art, .pricing-art, .countdown-art, .final-art,
.tajweed-art, .tajweed-decor-l, .tajweed-decor-r,
.sofa-art, .progress-art, .cards-fun-art,
.step-1-art, .step-2-art, .step-3-art,
.step-bubble, .step-bubble-l, .step-bubble-r,
.hill, .future-arrows, .pricing-arrows {
  pointer-events: none;
}

.text-brand { color: var(--color-brand); }
.text-flame { color: var(--color-flame); }
.text-sun   { color: var(--color-sun); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hidden until it takes keyboard focus, then a real, visible control. */
.skip-link {
  position: absolute;
  left: 12px; top: 12px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 10px;
  background: #fff;
  color: var(--color-brand);
  font-weight: 700;
  font-size: 16px;
  box-shadow: var(--shadow-btn);
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus, .skip-link:focus-visible { transform: translateY(0); }

/* headings ------------------------------------------------------------------ */

.hero-title, .hero-panel-title, .future-title, .cards-fun-title, .progress-title,
.tajweed-title, .sofa-title, .how-title, .step-title, .reviews-title,
.pricing-title, .features-title, .faq-title, .final-title {
  font-family: var(--font-display);
  font-weight: 700;
}

.hero-title, .progress-title, .pricing-title, .sofa-title,
.future-title, .features-title, .faq-title, .final-title { color: #fff; }
.reviews-title, .how-title { color: var(--color-flame); }
.step-title { color: var(--color-brand); }

/* body copy ----------------------------------------------------------------- */

.hero-sub, .progress-body, .pricing-body, .sofa-body,
.review-text, .final-body, .review-city { color: #fff; }
.final-body, .feature-text { font-family: var(--font-ui); }

.hero-sub b, .teachers-lead b, .cards-fun-body b, .tajweed-body b, .sofa-body b,
.progress-body b, .pricing-body b, .how-sub b, .steps-note b,
.review-name, .footer-copy b { font-weight: 700; }
.feature-text b { font-weight: 800; }

.tajweed-art.tajweed-art2  { display: none; }

/* surfaces ------------------------------------------------------------------ */

.sofa-card {
  color: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-flame) url("/assets/img/recite-card.webp") center/cover no-repeat;
}
.reviews-card { background: var(--color-brand); color: #fff; }

/* Slides crossfade instead of snapping. The outgoing slide stays in the flow
   until the incoming one has faded up, so the card never collapses mid-change. */
.review-slide {
  transition: opacity .38s ease, transform .38s cubic-bezier(.22,.61,.36,1);
}
.review-slide.is-entering { opacity: 0; transform: translateY(14px); }
.review-slide.is-leaving  { opacity: 0; transform: translateY(-10px); }

@media (prefers-reduced-motion: reduce) {
  .review-slide, .review-portrait img { transition: none; }
}
.review-name { font-style: normal; }
/* Every portrait now ships with its own blue ring, so the frame draws nothing -
   a CSS ring on top of the baked one gave a double border. All four are the same
   treatment, which is why there is no longer a cut-out special case. */
.review-portrait {
  position: relative;
  z-index: 2;
  background: none;
  border: 0;
  box-shadow: none;
  filter: none;
}
.review-portrait img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  /* crossfade as the slide changes */
  transition: opacity .38s ease;
}
.review-portrait img.is-swapping { opacity: 0; }
/* ---- phone slider --------------------------------------------------------
   The comp draws three phones as one flat render. Here they are three real
   slides on a 3D stage: JS writes each slide's transform from its distance to
   the active one, so the same maths drives the resting layout, the drag and the
   settle. touch-action keeps vertical scrolling with the page while horizontal
   gestures go to the slider. */
.phone-stage {
  position: relative;
  perspective: 120rem;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.phone-stage:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 8px; }
.phone-stage.is-dragging { cursor: grabbing; }

.phone-slide {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  will-change: transform;
  transition: transform .72s cubic-bezier(.16,.84,.28,1), opacity .72s ease;
}
.phone-stage.is-dragging .phone-slide { transition: none; }
.phone-slide img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }

.phone-dots { display: flex; justify-content: center; }
.phone-dot {
  border: 0; padding: 0; cursor: pointer;
  border-radius: 999px;
  background: #ffffff5c;
  transition: background .25s ease, width .25s ease;
}
.phone-dot[aria-selected="true"] { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .phone-slide { transition: none; }
}

.review-nav { background: none; border: 0; padding: 0; cursor: pointer; }


/* The Figma groups carry a drop shadow that used to live inside the SVG as a
   filter. That filter forced a 143x143 canvas around a 63x63 button, so the
   circle rendered at 63 * 63/143 = 28px and the arrows looked tiny. The SVGs
   now use a tight 63x63 viewBox and the shadow moved here, where it costs no
   layout box. Values match --shadow-btn. */
.review-nav { position: relative; overflow: visible; }
/* The exported button is a 6.3rem disc centred in a 16.7rem canvas - the rest is
   its shadow. Sizing to the canvas keeps the shadow, and the negative margin
   pulls the layout box back to the disc so surrounding spacing is unchanged. */
.review-nav img, .faq-chevron { filter: none; }
.rating-score { font-weight: 700; }

.feature {
  position: relative;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.countdown-plate { background: var(--color-brand-deep); border-radius: var(--radius-card); }
.countdown-card { background: #fff; border-radius: var(--radius-card); }
.countdown-lead { font-weight: 500; text-transform: capitalize; z-index: 2; }
.countdown-note { color: var(--color-flame); }

.video-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.pricing-offer { position: relative; }
.pricing-offer-bg { width: 100%; }
.pricing-offer-bg-mob { width: 100%; display: none; }
/* The comp sets this on three lines on mobile (SPECIAL / LAUNCH / OFFER) and
   two on desktop (SPECIAL / LAUNCH OFFER). An nbsp cannot express both: it kept
   "LAUNCH OFFER" together on mobile, where at 60px it ran 114px off screen.
   Explicit breaks, with the second one only on mobile. */
.br-mobile { display: none; }
@media (max-width: 1099px) { .br-mobile { display: inline; } }

.pricing-offer-text {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight: bold;
  line-height: 0.97;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  -webkit-text-stroke: 1.8px #fff;
}
.pricing-trial, .pricing-price { font-weight: 700; text-decoration: underline; color: #fff; }

.teachers-lead { color: #000; }
.how-sub { text-transform: capitalize; }
.step { position: relative; }

.site-header { z-index: 40; background: var(--color-brand); }
.site-footer { background: var(--color-brand-deep); color: #fff; text-align: center; }
.footer-links a { color: #fff; opacity: .82; text-decoration: underline; }
.footer-links a:hover { opacity: 1; }
.footer-copy { color: #fff; }
.footer-copy a { color: #fff; text-decoration: underline; }
.footer-contact { color: #fff; }
.footer-contact a { color: #fff; text-decoration: underline; }

.burger-bar { background: #fff; }

/* =============================================================================
   2. MOBILE + TABLET  (max-width: 1099px)
   ============================================================================= */

@media (max-width: 1099px) {

  /* ── header ------------------------------------------------------------ */

  .site-header { position: sticky; top: 0; }
  .site-header .canvas {
    display: flex; align-items: center; gap: 16px; height: 64px;
    border-bottom: 1px solid rgb(255 255 255 / 0.22);
  }
  .hd-logo { flex: none; }
  .hd-logo img { width: 132px; height: auto; }
  .hd-nav, .hd-cta { display: none; }

  .hd-burger {
    margin-left: auto; display: grid; gap: 5px;
    padding: 8px 4px; background: none; border: 0; cursor: pointer;
  }

  .hd-panel {
    display: grid; gap: 4px; padding: 12px 22px 22px;
    background: var(--color-brand);
    border-bottom: 1px solid rgb(255 255 255 / 0.22);
  }
  .hd-panel[hidden] { display: none; }
  .hd-panel a { font-family: var(--font-ui); font-size: 18px; color: #fff; padding: 12px 0; }
  /* colour restated: ".hd-panel a" outranks ".btn", which would turn it white */
  .hd-panel .btn { margin-top: 10px; justify-self: start; padding-inline: 28px; color: var(--color-sun-ink); }

  /* ── section shells ---------------------------------------------------- */

  .s-hero      { background: linear-gradient(180deg, var(--color-brand) 0, var(--color-brand) 38%, var(--color-brand-mist) 92%, var(--color-brand-mist) 100%); padding-bottom: 2px; }
  .s-teachers  { position: relative; background: linear-gradient(180deg, var(--color-leaf-light) 0%, var(--color-leaf) 100%); padding: 60px 0 42px; }
  /* The comp runs the green on past the heading and lets the first white card
     of the next section climb onto it - green to 1994, card top at 1890. The
     site stopped the green at the section join with no overlap, so the card sat
     on pale instead of green. */
  .s-future    { background: var(--color-leaf); padding: 12px 0 129px; }
  /* .hill is a positioned element spanning the whole green band, so it paints
     above ordinary content in both green sections - it was covering the teachers
     lead and the future heading. Everything in the band except the hill itself
     takes a stacking level above it. It cannot simply go to z-index -1: that
     would drop it behind .s-teachers' own background and hide it entirely. */
  .s-teachers .canvas > *:not(.hill),
  .s-future .canvas > * { position: relative; z-index: 1; }
  .s-cards     { background: var(--color-brand-pale); padding: 6px 0 0;
                 margin-top: -104px; position: relative; z-index: 1;
                 background: linear-gradient(180deg,
                   transparent 0 104px, var(--color-brand-pale) 104px); }
  /* The comp runs the Madrasah card's foot over the top of the red band. */
  .s-progress  { background: var(--color-flame); padding: 250px 0 0; margin-top: -99px; }
  .s-cards { position: relative; z-index: 2; }
  .s-tajweed   { background: var(--color-flame); padding: 40px 0 166px; }
  /* .s-sofa      { background: var(--color-brand-pale); padding: 30px 0 0; } */
  .s-sofa      { background: var(--color-brand-white); padding: 50px 0 0; }
  /* .s-sofa .sofa-art { width: 100%; margin: 0 auto; } */
  .s-how       { background: var(--color-brand-pale); padding: 660px 0 280px; }
  .s-steps     { background: linear-gradient(180deg, var(--color-brand-pale) 0 60px, var(--color-brand) 60px 78%, var(--color-brand-pale) 78%); padding-bottom: 40px; }
  .s-reviews   { background: var(--color-brand-pale); padding: 0 0 50px; margin-top: -5px; }
  .reviews-title { margin-bottom: -34px; }
  .reviews-rating { margin-top: -48px; }
  .s-pricing   { background: var(--color-flame); padding: 50px 0 40px; }
  .s-countdown { background: var(--color-flame); padding-bottom: 0; }
  .s-features  { background: var(--color-brand); padding: 180px 0 60px; }
  .s-faq       { background: var(--color-brand); padding: 0px 0 6px; }
  .s-final     { background: var(--color-brand); padding: 40px 0 30px; }
  .site-footer { padding: 40px 0 20px; }

  /* ── type scale ---------------------------------------------------------
     Pixel values taken from the 375-wide comp: each string was re-rendered in
     Pally at varying sizes until its width matched the width measured off the
     Figma export, so these are the comp's own sizes, not a scaled guess. ---- */

  .faq-title { margin-bottom: 30px; }
  .features-title { margin-bottom: 140px; }

  .hero-title, .progress-title, .pricing-title, .reviews-title, .how-title,
  .future-title, .features-title, .faq-title, .final-title {
    font-size: 32px; line-height: 1.15;
  }
  .reviews-title, .how-title, .future-title,
  .features-title, .faq-title, .final-title { text-align: center; }

  .hero-panel-title, .cards-fun-title, .tajweed-title, .sofa-title, .step-title {
    font-size: 30px; line-height: 1.16;
  }
  .how-sub { font-size: 24px; line-height: 1.15; }
  .hero-sub { font-size: 22px; line-height: 1.3; }
  .teachers-lead { font-size: 20px; line-height: 1.35; }
  .progress-body, .pricing-body, .cards-fun-body, .tajweed-body, .sofa-body,
  .step-body, .review-text, .final-body { font-size: 20px; line-height: 1.4; }

  .btn { height: 63px; font-size: 24px; padding-inline: 30px; }

  /* ── hero -------------------------------------------------------------- */

  .s-hero .canvas { padding-top: 26px; }
  .hero-title { text-align: center; max-width: 300px; margin-inline: auto; }
  .hero-squiggle { display: none; }
  .hero-sub { margin-top: 14px; text-align: center; max-width: 306px; margin-inline: auto; }
  .hero-cta { margin: 24px auto 0; display: flex; max-width: 291px; }

  .hero-art { position: relative; margin: 24px auto 0; width: 90%; }
  .hero-phone { width: 100%; }
  .hero-mic  { position: absolute; left: -20%; top: 42%; width: 55%; }
  .hero-card { position: absolute; right: -15%; top: 19%; width: 55%; }

  .hero-panel { margin-top: 10px; padding: 26px 20px 0; text-align: center; min-height: 570px; margin-bottom: -330px; }
  /* The comp lets this hang off the card's left edge and lap onto the green
     band below, so it is wider than the canvas, pulled left to the viewport
     edge, and lifted above the band. */
  .hero-kids { width: calc(100% + 22px); margin: -6px 0 -46px -22px;
               position: relative; z-index: 3; }

  /* ── teachers ---------------------------------------------------------- */

  /* Crest sits on the band top and the green foot lands on the band end: the
     source puts its crest 86/808 down, so height and offset are solved from
     that rather than guessed. */
  /* Mobile has its own export (375x815, crest at y55) so nothing is stretched:
     placing its top at -115px lands the crest on the band top and its foot on
     the band end. One grass tuft shows at the left, as the comp draws it. */
  .hill {
    position: absolute; left: 50%; top: -155px;
    width: 100%; transform: translateX(-50%);
    height: auto; object-fit: fill;
  }
  .s-teachers .canvas { position: relative; padding-top: 42px; }
  .teachers-lead { text-align: center; }

  /* The comp arranges the seven tiles as a flower around the crest: two on top,
     two pushed out to the edges either side of the crest, two below. These are
     percentages of the 315x323 block measured off the comp, so it scales with
     the viewport. Each tile is placed by its *export* box — the artwork carries
     a transparent margin, so the box is wider than the white card you see. */
  .teachers-row {
    position: relative;
    display: block;
    width: min(315px, 100%);
    aspect-ratio: 315 / 323;
    margin: 26px auto 0;
    list-style: none;
  }
  .teachers-row li { position: absolute; margin: 0; }
  .teachers-row img { width: 100%; }

  .teachers-row li:nth-child(1),
  .teachers-row li:nth-child(2) { left: 17.8%; width: 33.6%; }
  .teachers-row li:nth-child(6),
  .teachers-row li:nth-child(7) { left: 48.7%; width: 33.1%; }
  .teachers-row li:nth-child(2),
  .teachers-row li:nth-child(6) { top: -3%; }
  .teachers-row li:nth-child(1),
  .teachers-row li:nth-child(7) { top: 68.2%; }

  .teachers-row li:nth-child(3) { left: -3.9%; top: 29.5%; width: 37.9%; }
  .teachers-row li:nth-child(5) { left: 66.0%;  top: 29.5%; width: 37.9%; }

  .teachers-row .is-crest { left: 27%; top: 27.4%; width: 46%; z-index: 2; }

  /* ── future / two cards ------------------------------------------------ */

  .future-arrows { display: none; }

  /* The comp runs the video card first on mobile and the Madrasah card second;
     desktop places both by coordinate, so only the mobile order flips. */
  .s-cards .canvas { display: flex; flex-direction: column; }
  .video-card { order: 1; }
  .cards-fun  { order: 2; padding: 26px 20px 0; text-align: center; margin-top: 20px; margin-bottom: -100px; }
  .cards-fun-body { margin-top: 12px; }
  .cards-fun-art { width: 100%; margin-top: 10px; margin-bottom: -50px; }

  .video-card { margin-top: 26px; }
  .video-poster { width: 100%; }
  .video-play { left: 50%; top: 50%; width: 88px; height: 88px; transform: translate(-50%, -50%); }
  .video-card:hover .video-play { transform: translate(-50%, -50%) scale(1.06); }

  /* ── parent progress --------------------------------------------------- */

  .s-progress .canvas { display: flex; flex-direction: column; }
  .progress-title { position: relative; text-align: center; order: 1; }
  .progress-squiggle { width: 62%; margin: 8px auto 0; }
  .progress-art  { width: 100%; margin: 0 auto; order: 2; }
  .progress-body { margin-top: 18px; text-align: center; order: 3; }
  .progress-cta  { margin: 24px auto 0; display: flex; max-width: 291px; min-width: 290px; order: 4; }

  /* ── tajweed ----------------------------------------------------------- */

  .tajweed-decor-l, .tajweed-decor-r { display: none; }
  .tajweed-card { display: flex; flex-direction: column; padding: 26px 20px 0; text-align: center; margin-bottom: -200px; box-shadow: unset; }
  .tajweed-title { order: 1; padding: 0 20px; }
  .tajweed-body  { order: 2; margin-top: 12px; padding: 0 20px; }
  .tajweed-art   { order: 3; width: 100%; margin-top: 14px; }
  .tajweed-art.tajweed-art2  { position: relative; display: block; margin-top: -75px; margin-bottom: -50px; }

  /* ── sofa -------------------------------------------------------------- */

  .sofa-card { padding: 30px 20px 0; text-align: center; margin-bottom: -500px; overflow: visible; }
  .sofa-title { padding: 10px 20px 0; }
  .sofa-body { margin-top: 12px; padding: 0 20px; }
  .sofa-cta  { margin: 22px auto 0; display: flex; max-width: 291px; }
  .sofa-art  { width: 100%; margin-top: 30%; margin-bottom: -30%; margin-left: -30px; scale: 1.75; display: inline; }

  /* ── how it works / steps ---------------------------------------------- */

  .how-sub { margin-top: 8px; text-align: center; }

  .step {
    margin-top: 80px; padding: 40px 20px 76px; text-align: center;
    display: flex; flex-direction: column;
  }

  .step.step-1 { margin-top: -200px; }

  .step-title { order: 1; width: 80%; margin: 0 auto; }
  .step-1-art, .step-3-art, .step-2-art { order: 2; width: 100%; scale: 1.3; margin: 30px 0 20px -20px; }
  .step-body { order: 3; margin-top: 26px; padding-bottom: 4px; z-index: 2; }
  /* The comp hangs a speech-bubble tail off the bottom of each step card. It is
     the last thing in the card and overhangs, so the card must not clip it. */
  .step { overflow: visible; }
  .step-bubble { order: 9; display: block; width: 220px; margin: -30px auto -130px; }

  .step-2 { padding-bottom: 80px; }
  /* The comp puts the phone and the big numeral side by side with the copy
     underneath. Absolutely positioning the numeral over the card dropped it on
     top of the body text, so the two images now share a real row. */
  .step-2-row {
    order: 2;
    display: flex; align-items: center; justify-content: center;
    margin-top: 12px;
  }
  /* Comp order is phone first, numeral second; the markup has them the other
     way round because desktop places both by coordinate, so flex order flips
     them back rather than moving the source. */
  .step-2-art { order: 1; width: 65%; position: relative; z-index: 0; margin: 0 -36% 0 0; }
  .step-2-num { order: 2; width: 90%; position: relative; z-index: 1; margin: 0 -20% 0 0; }

  .steps-cta  { margin: 30px auto 0; display: flex; max-width: 291px; }
  .steps-note { margin-top: 16px; text-align: center; font-size: 16px; max-width: 15em; margin-left: auto; margin-right: auto; }

  /* ── reviews ----------------------------------------------------------- */

  .reviews-box { margin-top: 60px; display: flex; flex-direction: column; }
  .review-portrait { order: -1; width: 230px; height: auto; margin: 0 auto -120px; }
  .review-text { margin-top: 20px;}
  .review-meta { margin-top: 50px; }
  .review-portrait img { width: 100%; height: auto; object-fit: contain; }

  .reviews-card { border-radius: 26px; padding: 86px 22px 22px; text-align: center; }
  .review-meta { display: grid; justify-items: center; gap: 4px; }
  .review-name { font-size: 20px; }
  .review-city { font-size: 18px; opacity: .9; order: 2; }
  .review-stars { width: 132px; order: -1; margin-bottom: 4px; }
  /* Markup order is prev(up), next(down); the comp draws down on the left. */
  .review-arrows { display: flex; flex-direction: row-reverse; justify-content: center;
                   gap: 14px; margin-top: 18px; }
  .review-nav { width: 46px; height: 46px; position: relative; }
  /* The new SVG is a tight 63-unit disc clipped to its own circle, so it just
     fills the button - no canvas compensation, no offset. */
  .nav-chevron { position: static; width: 100%; height: 100%;
                 max-width: none; transform: none; }

  .reviews-rating {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px; margin-top: 26px;
  }
  .rating-stars { width: 108px; }
  .rating-score { font-size: 20px; }
  .rating-store { width: 26px; }
  .rating-cta { flex-basis: 100%; margin: 10px auto 0; display: flex; max-width: 291px; }

  /* ── pricing ----------------------------------------------------------- */

  .s-pricing .canvas { display: flex; flex-direction: column; }
  .pricing-title { text-align: center; order: 1; padding: 0 20px; }
  .pricing-body  { margin-top: 16px; text-align: center; order: 2; padding: 0 20px; }
  .pricing-art   { display: none; }
  .pricing-art-mob   { width: 100%; margin-top: 8px; margin-bottom: -100px; margin-left: 30px; order: 3; }
  /* Three lines of 60px type need more room than the brush artwork's own
     aspect ratio gives, so on mobile the text drives the height and the SVG
     stretches behind it. */
  .pricing-offer { margin: 16px auto 0; width: min(340px, 100%); order: 4; }
  .pricing-offer-bg { display: none; }
  .pricing-offer-bg-mob { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
  .pricing-offer-text {
    position: relative; z-index: 1;      /* the stretched brush sits behind */
    padding: 26px 10px 22px;
    font-size: 60px; letter-spacing: 0.036em;
  }
  .pricing-terms {
    display: grid; justify-items: center; gap: 4px; order: 5;
    margin-top: 18px; text-align: center; position: relative;
  }
  /* The chevrons are part of the offer line in the comp, so they stay on mobile
     too - sized to the trial text rather than the desktop 33.6rem block. */
  .offer-arrow { display: inline-block; width: 22px; vertical-align: middle; margin: 0 10px; }
  .pricing-squiggle { display: none; }
  .pricing-trial { font-size: 30px; }
  .pricing-price { font-size: 24px; }
  /* Chevrons flank the trial text on one row, the price sits on the next.
     Placed by grid line so the DOM order is left alone. */
  .pricing-terms {
    grid-template-columns: auto auto auto;
    justify-content: center; align-items: center; column-gap: 0;
  }
  .offer-arrow-l { grid-row: 1; grid-column: 1; }
  .pricing-trial { grid-row: 1; grid-column: 2; }
  .offer-arrow-r { grid-row: 1; grid-column: 3; }
  .pricing-price { grid-row: 2; grid-column: 1 / -1; }

  /* ── countdown --------------------------------------------------------- */

  .s-countdown .canvas { display: flex; flex-direction: column; }
  .countdown-lead  { order: 1; font-size: 21px; color: #fff; text-align: center; margin-bottom: 20px; }
  .countdown-plate { order: 2; padding: 10px 20px 60px; margin-bottom: -100px; }
  .countdown-art   { display: none; }
  .countdown-art.mobile   { order: 3; width: 100%; margin: 15px auto -100px; display: inline; scale: 1.2; }
  .countdown-card  { padding: 22px 16px 0px; text-align: center; border-radius: 28px; }

  /* Two rows of "cell : cell", as in the comp. Dropping the middle separator
     leaves exactly six items, so a three-column grid wraps where it should. */
  .countdown {
    display: grid; grid-template-columns: auto auto auto;
    justify-content: center; align-items: center;
    gap: 12px 10px; margin: 0 auto;
  }
  .count-cell { width: 110px; }
  .count-cell.count-3, .count-cell.count-4 { margin-top: -40px; }
  .count-cell b { top: 17%; font-size: 59px; }
  .count-sep { font-size: 6px; }
  .count-sep:nth-of-type(2) { display: none; }
  .count-sep:nth-of-type(3) { margin-top: -40px; }
  .countdown-cta  { margin: 18px auto 0; display: flex; max-width: 244px; }
  .countdown-note { margin: 20px auto 10px; font-size: 16px; line-height: 1.35; max-width: 15em; }

  /* ── features ---------------------------------------------------------- */

  /* Comp stacks the four cards with far more room than the desktop grid: the
     white plates run ~208 tall and the blue gaps between them ~133, which is
     what carries the icon overhang. */
  .features-grid { display: grid; gap: 133px; margin-top: 54px; }
  .feature { padding: 108px 40px 54px; text-align: center; }
  .feature-icon { position: absolute; left: 50%; top: 0; width: 270px; transform: translate(-50%, -52%); }
  /* Same 21.2:23 frame as desktop, scaled by the same 108/260 the round icons
     use, so card 2's badge lines up with its neighbours at every width. */
  .feature-icon.is-portrait { width: 220px; transform: translate(-50%, -55.65%); }
  .feature-text { font-size: 17px; line-height: 1.35; }

  /* ── faq --------------------------------------------------------------- */

  .faq-list { display: grid; gap: 12px; margin-top: 24px; }
  .faq-q { padding: 11px 10px 11px 31px; font-size: 18px; line-height: 1.2; }
  .faq-chevron { width: 43px; height: 43px; margin: 0; }
  .faq-a { padding: 0 31px 20px; font-size: 16px; line-height: 1.5; color: #2c3e4a; }

  /* ── final / footer ---------------------------------------------------- */

  .final-body { margin-top: 16px; text-align: center; }
  .final-cta  { margin: 24px auto 0; display: flex; max-width: 291px; }
  .final-art  { width: 100%; margin-top: 24px; }

  .phone-slider { width: 100%; margin-top: 22px; }
  .phone-stage  { height: 452px; }
  .phone-slide  { width: 214px; margin-left: -107px; }
  .phone-dots   { gap: 8px; margin-top: 14px; }
  .phone-dot    { width: 8px; height: 8px; }
  .phone-dot[aria-selected="true"] { width: 22px; }

  .footer-cta  { margin: 0 auto; display: flex; max-width: 291px; }
  .footer-logo { display: block; margin-top: 26px; }
  .footer-logo img { width: 220px; height: auto; margin: 0 auto; }
  .footer-links { margin-top: 18px; display: flex; justify-content: center; gap: 10px; font-size: 15px; }
  .footer-copy { margin-top: 12px; font-size: 14.5px; }
  .footer-contact { margin-top: 10px; font-size: 14.5px; line-height: 1.45; }

  /* ── tablet (700–1099px) ------------------------------------------------
     The phone layout stretched to 1024px reads as a blown-up phone, so from
     700px the reading column is capped and centred, the artwork gets room to
     breathe, and the card grids go two-up. ------------------------------- */

  @media (min-width: 700px) {
    .canvas { max-width: 700px; margin-inline: auto; }

    .hero-title { max-width: 560px; }
    .hero-sub   { max-width: 520px; }
    .hero-art   { width: min(320px, 46%); }
    .hero-kids  { max-width: 520px; margin-inline: auto; }
    .hero-panel { padding-inline: 40px; }

    .teachers-row {
      display: flex; width: auto; gap: 12px;
      justify-content: center; align-items: center;
    }
    .teachers-row li { width: 68px; }
    .teachers-row li:nth-child(2), .teachers-row li:nth-child(6) { width: 82px; }
    .teachers-row li:nth-child(3), .teachers-row li:nth-child(5) { width: 96px; }
    .teachers-row .is-crest { width: 112px; margin: 0; grid-column: auto; grid-row: auto; }
    .teachers-row li:nth-child(3), .teachers-row li:nth-child(5) { grid-row: auto; grid-column: auto; }

    .cards-fun-art, .tajweed-art, .sofa-art, .progress-art,
    .step-1-art, .step-3-art, .final-art, .pricing-art {
      max-width: 520px; margin-inline: auto;
    }
    .step-2-art { width: 46%; }
    .video-card { max-width: 420px; margin-inline: auto; }

    .features-grid { grid-template-columns: 1fr 1fr; gap: 62px 24px; }
    .countdown { gap: 20px 16px; }
    .count-cell { width: 150px; }
    .count-cell b { font-size: 46px; }
    .count-sep { font-size: 7px; }

    .reviews-card { padding-inline: 44px; }
    .faq-q { font-size: 18px; padding: 18px 16px 18px 26px; }
    .faq-chevron { width: 46px; height: 46px; margin: 0; }
    .faq-a { font-size: 16px; padding-inline: 26px; }
  }
}

/* =============================================================================
   3. DESKTOP  (min-width: 1100px) — the 1440-wide comp at its own coordinates.
   Lengths are rem; 1rem == one design pixel ÷ 10.
   ============================================================================= */

@media (min-width: 1100px) {

  .canvas { padding-inline: 0; height: 100%; }

  /* Every section is a fixed-height stage its children are pinned inside.
     Crucially the sections themselves stay UNpositioned: that keeps their
     backgrounds in the normal-flow paint step, so a later section can never
     paint over artwork that an earlier one bleeds downwards. The .canvas inside
     is the positioned box everything is measured from. */
  .s-hero, .s-teachers, .s-future, .s-cards, .s-progress, .s-tajweed, .s-sofa,
  .s-how, .s-steps, .s-reviews, .s-pricing, .s-countdown, .s-features, .s-faq,
  .s-final { padding: 0; position: static; }

  .s-hero .canvas > *,  .s-teachers .canvas > *, .s-future .canvas > *,
  .s-cards .canvas > *, .s-progress .canvas > *, .s-tajweed .canvas > *,
  .s-sofa .canvas > *,  .s-how .canvas > *,      .s-steps .canvas > *,
  .s-reviews .canvas > *, .s-pricing .canvas > *, .s-countdown .canvas > *,
  .s-features .canvas > *, .s-faq .canvas > .faq-title, .s-final .canvas > *,
  body:not(.legal) .site-footer .canvas > * { position: absolute; margin: 0; }

  /* ── header ------------------------------------------------------------ */

  body:not(.legal) .site-header { position: absolute; inset: 0 0 auto 0; background: none; }
  body:not(.legal) .site-header .canvas { display: block; height: 14.8rem; border: 0; }
  body:not(.legal) .site-header .canvas::after {
    content: "";
    position: absolute;
    left: 13.7rem; top: 14.7rem;
    width: 117.3rem; height: 1px;
    background: rgb(255 255 255 / 0.25);
  }
  body:not(.legal) .hd-logo { position: absolute; left: 13.5rem; top: 5.9rem; }
  body:not(.legal) .hd-nav  { position: absolute; left: 51.4rem; top: 6.4rem; }
  body:not(.legal) .hd-cta  { position: absolute; left: 107.3rem; top: 4.3rem; width: 23.6rem; }
  .hd-logo img { width: 22.1rem; height: auto; }
  .hd-nav { display: flex; gap: 4.9rem; }
  .hd-cta { display: inline-flex; }
  .hd-burger, .hd-panel { display: none !important; }

  /* ── hero -------------------------------------------------------------- */

  .s-hero {
    height: 109.2rem;
    background: linear-gradient(180deg,
      var(--color-brand) 0, var(--color-brand) 40.8rem,
      var(--color-brand-mist) 107.8rem, var(--color-brand-mist) 100%);
  }
  .hero-title { left: 13.8rem; top: 19.5rem; width: 62rem; font-size: var(--text-h1); line-height: 1.08; }
  .hero-squiggle { position: absolute; left: 17.6rem; top: 19.76rem; width: 38.43rem; }
  .hero-sub { left: 13.8rem; top: 44.4rem; width: 61.6rem; font-size: var(--text-lead); line-height: 1.115; }
  .hero-cta { left: 13.8rem; top: 54.8rem; width: 31.5rem; display: inline-flex; }

  .hero-art   { left: 0; top: 0; width: 144rem; height: 100%; }
  .hero-phone { position: absolute; left: 77.8rem; top: 12.8rem; width: 45.4rem; }
  .hero-mic   { position: absolute; left: 69.4rem; top: 39.6rem; width: 27rem; }
  .hero-card  { position: absolute; left: 109.5rem; top: 22.8rem; width: 23.7rem; }

  .hero-panel { left: 57.1rem; top: 71.4rem; width: 74.1rem; height: 33.4rem; }
  .hero-panel-title { position: absolute; left: 12.2rem; top: 6.4rem; width: 52rem; font-size: var(--text-h2); line-height: 1.08; }
  .hero-kids  { left: 9.9rem; top: 65.6rem; width: 54.4rem; z-index: 3; }

  /* ── teachers ---------------------------------------------------------- */

  .s-teachers {
    height: 31.6rem;
    /* The band is one exported image now (see .hill). The flat colour stays only
       as a fallback under it - the gradient that used to live here met the old
       hill strip at a visible seam part way down the band. */
    background: var(--color-leaf);
  }
  /* The comp draws this 175.1rem wide from x=-279, bleeding past both edges.
     The base img rule caps images at 100%, which squeezed the curve to the
     canvas width and flattened it. */
  /* Comp places this at x=-279, 175.1 x 33.8rem - not centred, and the 1440x339
     source is stretched horizontally to fit, so height is set explicitly rather
     than left to the aspect ratio. */
  /* Covers the whole green band - crest at -12.6rem through the foot of
     .s-future, 63.8rem below the section top - so there is no join anywhere in
     it. Stretched to fit, as the comp draws it wider than the artboard. */
  /* Centred at canvas width rather than bled 27.9rem to the left. The band has a
     grass tuft near each end (x 95 and x 1065 of 1440); the old offset pushed the
     left one to -163px, off screen, so only one was ever visible. At left 0 /
     144rem both sit inside the viewport and the band is still full-bleed, since
     144rem is exactly the viewport width at every desktop size. */
  .hill { position: absolute; left: 0; top: -14.6rem;
          width: 144rem; height: 76.4rem; max-width: none; transform: none;
          object-fit: fill; }
  .s-teachers .canvas { overflow: visible; }
  .teachers-lead { left: 39.6rem; top: 1.6rem; width: 64.9rem; font-size: var(--text-body); line-height: 3rem; text-align: center; }

  /* Placements read off the rendered comp: each export carries its own
     transparent margin, so the box is wider than the white card inside it. */
  .teachers-row { left: 0; top: 0; width: 144rem; }
  .teachers-row li { position: absolute; }
  .teachers-row li:nth-child(1) { left: 23.3rem; top: 11.4rem; width: 11.8rem; }
  .teachers-row li:nth-child(2) { left: 33.6rem; top: 10.3rem; width: 14.7rem; }
  .teachers-row li:nth-child(3) { left: 46.6rem; top:  9.3rem; width: 17.3rem; }
  .teachers-row li:nth-child(4) { left: 63.6rem; top:  9.7rem; width: 16.8rem; }
  .teachers-row li:nth-child(5) { left: 82.9rem; top:  9.4rem; width: 17.3rem; }
  .teachers-row li:nth-child(6) { left: 98.1rem; top: 10.3rem; width: 14.7rem; }
  .teachers-row li:nth-child(7) { left: 110.8rem; top: 11.9rem; width: 11.8rem; }

  /* ── future ------------------------------------------------------------ */

  .s-future { height: 32.2rem; background: var(--color-leaf); }
  .future-title { left: 41.2rem; top: -0.3rem; width: 61.6rem; font-size: var(--text-h2); line-height: 1.08; text-align: center; }
  .future-arrows { left: 1.4rem; top: 29rem; width: 138rem; }

  /* ── two cards --------------------------------------------------------- */

  .s-cards { height: 52.6rem; background: var(--color-brand-pale); }
  .cards-fun { left: 13.1rem; top: -14.6rem; width: 69.3rem; height: 80.3rem; overflow: visible; }
  .cards-fun-title { position: absolute; left: 8.8rem; top: 9.7rem; width: 53.4rem; font-size: var(--text-h2); line-height: 1.08; }
  .cards-fun-body  { position: absolute; left: 8.8rem; top: 22.7rem; width: 53.4rem; font-size: var(--text-body); line-height: 3rem; }
  .cards-fun-art   { position: absolute; left: 7.2rem; top: 31.7rem; width: 55rem; }

  .video-card   { left: 89.6rem; top: -12.7rem; width: 41.35rem; height: 77.05rem; }
  .video-open   { height: 100%; }
  .video-poster { width: 100%; height: 100%; object-fit: cover; }
  .video-play   { left: 13.21rem; top: 31.66rem; width: 14.82rem; height: 14.82rem; }
  .video-card:hover .video-play { transform: scale(1.06); }

  /* ── parent progress --------------------------------------------------- */

  .s-progress { height: 122.5rem; background: var(--color-flame); }
  .s-progress .canvas { display: block; }
  .progress-title { left: 13.1rem; top: 25.6rem; width: 59.5rem; font-size: var(--text-h1); line-height: 1.08; }
  .progress-squiggle { position: absolute; left: -5.98rem; top: 27rem; width: 38.43rem; }
  .progress-body { left: 13.1rem; top: 58.3rem; width: 57.6rem; font-size: var(--text-body); line-height: 3rem; }
  .progress-cta  { left: 13.1rem; top: 72.3rem; width: 31.5rem; display: inline-flex; }
  /* Frame geometry from the comp (707, 2436, 682x829). The asset is exported
     at the frame's own bounds rather than trimmed to the art, so these four
     numbers are the Figma coordinates unchanged. */
  /* The phones hang 3.8rem past the section and lap over the white tajweed
     card below. The card is in a later section, so without a stacking level
     it paints on top and swallows that overlap. */
  .progress-art  { left: 70.7rem; top: 18rem; width: 68.2rem; z-index: 5; }

  /* ── tajweed ----------------------------------------------------------- */

  .s-tajweed { height: 26.7rem; background: #fcfcfc; }
  /* Both groups run off the edge of the 1440 artboard, so Figma exports only the
     part that is actually on canvas: the left group is 43.7rem wide in the file
     but its visible slice is 32.2rem starting at x=0, and the right group is
     56.4rem wide but only 45.5rem of it is on canvas. Sizing the img to the full
     node width stretched both assets and made them 15rem too tall.
     The comp sandwiches this art: in front of the white tajweed card above it,
     but behind the red sofa card below it. DOM order alone gives neither, since
     both cards come after the decor, so the three take explicit levels -
     white card (auto) < decor (1) < red card (2). */
  .tajweed-decor-l { left: 0;        top: -18.1rem; width: 32.2rem; z-index: 1; }
  .tajweed-decor-r { left: 98.5rem;  top: -15.8rem; width: 45.5rem; z-index: 1; }
  .sofa-card { z-index: 2; }
  .tajweed-card { left: 13.1rem; top: -25.4rem; width: 118.1rem; height: 44.8rem; display: block; overflow: visible; }
  .tajweed-art   { position: absolute; left: 3.9rem; top: -15.3rem; width: 49.8rem; }
  .tajweed-title { position: absolute; left: 56.2rem; top: 8rem; width: 53.6rem; font-size: var(--text-h2); line-height: 1.08; }
  .tajweed-body  { position: absolute; left: 56.2rem; top: 20.1rem; width: 48rem; font-size: var(--text-body); line-height: 3rem; }

  /* ── sofa -------------------------------------------------------------- */

  .s-sofa { height: 27.3rem; background: var(--color-brand-pale); }
  .sofa-card {
    left: 13.1rem; top: -18.9rem; width: 118.1rem; height: 40.6rem;
    overflow: visible; background-size: 118.1rem auto; background-position: left top;
  }
  .sofa-title { position: absolute; left: 9.5rem; top: 6.4rem; width: 65.6rem; font-size: var(--text-h2); line-height: 1.08; }
  .sofa-body  { position: absolute; left: 9.5rem; top: 18.9rem; width: 68.7rem; font-size: var(--text-body); line-height: 3rem; }
  .sofa-cta   { position: absolute; left: 9.5rem; top: 28.1rem; width: 27.7rem; display: inline-flex; }
  .sofa-art   { position: absolute; left: 70.2rem; top: -4.1rem; width: 59.2rem; }

  /* ── how it works ------------------------------------------------------ */

  .s-how { height: 35.2rem; background: var(--color-brand-pale); }
  .how-title { left: 29.8rem; top: 0; width: 84.4rem; font-size: var(--text-h1); line-height: 1.08; text-align: center; }
  .how-sub   { left: 28.4rem; top: 6.8rem; width: 87.3rem; font-size: var(--text-h3); font-weight: 500; line-height: 1.02; text-align: center; }

  /* ── steps ------------------------------------------------------------- */

  .s-steps {
    height: 133.9rem;
    background: linear-gradient(180deg, var(--color-brand) 0 83.7rem, var(--color-brand-pale) 83.7rem 100%);
  }
  .step { display: block; overflow: visible; text-align: left; }
  .step-title { position: absolute; font-size: var(--text-h2); line-height: 0.95; }
  .step-body  { position: absolute; font-size: var(--text-body); line-height: 3rem; }

  /* Step 1 sits above step 2 in the stack: its art is 43.8rem tall inside a
     32.1rem card, so it hangs 11.7rem below the card and laps 5.2rem over the
     step-2 card - which is exactly how the comp draws it. Without the z-index
     the later sibling would paint over that overlap. */
  .step-1 { left: 13.1rem; top: -17.7rem; width: 118.1rem; height: 32.1rem; z-index: 2; }
  .step-1-art  { position: absolute; left: -2.3rem; top: 0; width: 57.5rem; }
  .step-1 .step-title { left: 56.2rem; top: 8.1rem; width: 53.6rem; }
  .step-1 .step-body  { left: 56.2rem; top: 15rem; width: 52.1rem; }
  .step-bubble-r { display: block; position: absolute; left: 98.2rem; top: 26.2rem; width: 14.2rem; }

  .step-2 { left: 13.1rem; top: 20.9rem; width: 118.1rem; height: 42.7rem; }
  .step-2 .step-title { left: 8.9rem; top: 7.4rem; width: 53.6rem; }
  .step-2 .step-body  { left: 8.9rem; top: 23.2rem; width: 53.6rem; }
  /* On desktop both images keep their own comp coordinates, so the mobile row
     wrapper must not introduce a box of its own. */
  .step-2-row { display: contents; }
  .step-2-num { position: absolute; left: 78.8rem; top: -5.3rem; width: 41.94rem; }
  .step-2-art { position: absolute; left: 66.6rem; top: 0; width: 30.06rem; z-index: 1; }
  .step-bubble-l { display: block; position: absolute; left: 5.6rem; top: 36.8rem; width: 14.2rem; }

  .step-3 { left: 13.1rem; top: 70.3rem; width: 118.1rem; height: 32.1rem; }
  .step-3-art { position: absolute; left: 1.4rem; top: -8.2rem; width: 60.4rem; }
  .step-3 .step-title { left: 56.2rem; top: 7.6rem; width: 53.6rem; }
  .step-3 .step-body  { left: 56.2rem; top: 14.5rem; width: 52.1rem; }

  .steps-cta  { left: 55rem; top: 115.4rem; width: 34.1rem; display: inline-flex; }
  .steps-note { left: 46.8rem; top: 125.8rem; width: 50.4rem; font-size: var(--text-tiny); line-height: 1.115; text-align: center; }

  /* ── reviews ----------------------------------------------------------- */

  .s-reviews { height: 63.3rem; background: var(--color-brand-pale); }
  .reviews-title { left: 32.7rem; top: 0; width: 78.6rem; font-size: var(--text-h1); line-height: 1.08; text-align: center; }

  .reviews-box { left: 0; top: 0; width: 144rem; height: 100%; display: block; }
  .reviews-card {
    position: absolute; left: 13.1rem; top: 18.7rem; width: 106.8rem; height: 24.6rem;
    border-radius: var(--radius-card);
  }
  .review-text  { position: absolute; left: 8.9rem; top: 9.4rem; width: 65.5rem; font-size: var(--text-body); line-height: 3rem; text-align: right; }
  .review-meta  { display: block; }
  .review-city  { position: absolute; left: 26.2rem; top: 6.5rem; width: 16.4rem; font-size: var(--text-tiny); }
  .review-name  { position: absolute; left: 42rem; top: 6.4rem; width: 16.4rem; font-size: 2.1rem; }
  .review-stars { position: absolute; left: 59.5rem; top: 6.1rem; width: 15.6rem; }
  .review-arrows { position: absolute; left: 79.8rem; top: 5.5rem; display: block; }
  .review-nav   { width: 6.3rem; height: 6.3rem; }
  .nav-chevron { position: static; width: 100%; height: 100%;
                 max-width: none; transform: none; }
  .js-review-prev { position: absolute; top: 0; }
  .js-review-next { position: absolute; top: 7.9rem; }

  .review-portrait {
    position: absolute; left: 102.6rem; top: 16.5rem;
    width: 28.6rem; height: 28.6rem;
  }
  /* The ring is part of the artwork now, so the image fills the frame instead
     of being offset to let a cut-out head spill over the top of a CSS ring. */
  .review-portrait img {
    position: static;
    width: 100%; height: 100%;
    object-fit: contain; border-radius: 0;
  }

  .reviews-rating { left: 44.2rem; top: 48rem; width: 60rem; display: block; }
  .rating-stars { position: absolute; left: 0; top: 0.4rem; width: 13.6rem; }
  .rating-score { position: absolute; left: 14.54rem; top: 0; font-size: 2.4rem; white-space: nowrap; }
  .rating-store { position: absolute; left: 22.23rem; top: 0; width: 3.7rem; }
  .rating-cta   { position: absolute; left: 28.3rem; top: -1.3rem; width: 27.3rem; display: inline-flex; }

  /* ── pricing ----------------------------------------------------------- */

  .s-pricing { height: 85.3rem; background: var(--color-flame); }
  .s-pricing .canvas { display: block; }
  .pricing-title { left: 13.7rem; top: 7.6rem; width: 66.5rem; font-size: var(--text-h1); line-height: 1.08; }
  .pricing-body  { left: 13.7rem; top: 22.7rem; width: 66.5rem; font-size: var(--text-lead); line-height: 1.115; }

  .pricing-offer { left: 9rem; top: 30.7rem; width: 71.2rem; height: 25.42rem; }
  .pricing-offer-text { font-size: var(--text-mega); letter-spacing: 0.28142rem; }

  .pricing-terms { left: 13.7rem; top: 55.63rem; width: 69.1rem; display: block; }
  /* Two separate chevron pairs, as drawn in the comp, bracketing the trial text. */
  /* The chevron pairs are 2.56rem wide in the comp, not 3rem; at 3rem each one
     ran 4-9px into the words beside it. Widths corrected and the text nudged
     right so there is a real 0.74rem gap on both sides. */
  .offer-arrow   { position: absolute; top: 0.9rem; width: 2.56rem; }
  .offer-arrow-l { left: 0; }
  .offer-arrow-r { left: 31.6rem; }
  .pricing-trial { position: absolute; left: 3.3rem; top: -0.5rem; font-size: var(--text-h4); line-height: 1.02; }
  .pricing-price { position: absolute; left: 34.9rem; top: 0.1rem; font-size: var(--text-h5); line-height: 1.02; white-space: nowrap; }
  .pricing-squiggle { position: absolute; left: 38.52rem; top: 5.77rem; width: 29.2rem; }

  /* Comp frame (749, 6254, 647x918) against a section that starts at 6345, so
     the art begins 9.1rem above its own section and laps onto the one above -
     that overhang is the design. The frame also crops the hand at its lower
     edge, which is why only part of the hand shows. */
  .pricing-art { left: 74.9rem; top: -9.1rem; width: 64.7rem; z-index: 0; }
  .pricing-art-mob { display: none; }

  /* ── countdown --------------------------------------------------------- */

  .countdown-plate { z-index: 1; }
  /* The comp flies the rocket over the countdown card, not behind it. */
  .countdown-art   { z-index: 4; }
  .countdown-art.mobile { display: none; }
  .s-countdown { height: 31.6rem; background: var(--color-brand); }
  .s-countdown .canvas { display: block; }
  .countdown-art { left: 4.2rem; top: -22.7rem; width: 49.2rem; z-index: 2; }
  .countdown-plate { left: 19.8rem; top: -16.1rem; width: 104.7rem; height: 44.4rem; }
  .countdown-card {
    position: absolute; left: 2.2rem; top: 1rem; width: 100.3rem; height: 38.6rem;
    box-shadow: var(--shadow-card);
  }
  /* now a canvas child, so its offsets fold in the plate + card insets */
  .countdown-lead { left: 55.3rem; top: -11.9rem; width: 33.44rem; font-size: var(--text-note); line-height: 1.02; text-align: center; }
  /* The four plates were sliced out of one export, so each cell keeps that
     slice's own offset inside the 703px row rather than being evenly spaced. */
  .countdown { position: absolute; left: 24.3rem; top: 5.4rem; width: 70.3rem; height: 23.4rem; display: block; }
  .countdown .count-cell { position: absolute; top: 0; width: 15.433rem; max-width: none; }
  .countdown .count-cell:nth-of-type(1) { left: 1.73rem; }
  .countdown .count-cell:nth-of-type(2) { left: 18.6rem; }
  .countdown .count-cell:nth-of-type(3) { left: 35.63rem; }
  .countdown .count-cell:nth-of-type(4) { left: 52.57rem; }
  .count-cell b { top: 6.2rem; font-size: var(--text-count); line-height: 1; }

  .countdown .count-sep { position: absolute; top: 8.4rem; font-size: 0.87rem; gap: 1.4em; }
  .countdown .count-sep:nth-of-type(1) { left: 17.5rem; }
  .countdown .count-sep:nth-of-type(2) { left: 34.4rem; }
  .countdown .count-sep:nth-of-type(3) { left: 51.4rem; }
  .countdown-note { position: absolute; left: 28.1rem; top: 27.9rem; width: 33.1rem; font-size: 1.8rem; line-height: 1.25; text-align: center; }
  .countdown-cta  { position: absolute; left: 64.3rem; top: 27.2rem; width: 27.9rem; display: inline-flex; }

  /* ── features ---------------------------------------------------------- */

  .s-features { height: 56.8rem; background: var(--color-brand); }
  .features-title { left: 29.8rem; top: 0; width: 84.4rem; font-size: var(--text-h1); line-height: 1.08; text-align: center; }
  .features-grid { left: 14.4rem; top: 22.4rem; width: 115.2rem; display: flex; gap: 3.5rem; }
  .feature { flex: 1 1 0; height: 25.9rem; }
  .feature-icon { position: absolute; left: 50%; top: 0; width: 26rem; transform: translate(-50%, -49.5%); }
  /* Card 2 is a taller frame (21.2 x 23rem) whose top sits 12.8rem above the
     card, so it lifts by 12.8/23 of its own height rather than the round 60%
     the previous crop happened to need. */
  .feature-icon.is-portrait { width: 21.2rem; transform: translate(-50%, -55.65%); }
  /* 10.4rem, not 8.9rem: the badge hangs 8.2rem into the card and the comp
     leaves a 1.9rem gap under it before the first line of text. At 8.9rem the
     text ran straight into the badge with no gap at all. */
  .feature-text {
    position: absolute; left: 50%; top: 10.4rem; width: 20rem;
    transform: translateX(-50%);
    font-size: var(--text-note); line-height: 1.04; text-align: center;
  }

  /* ── faq --------------------------------------------------------------- */

  .s-faq { min-height: 68.1rem; height: auto; background: var(--color-brand); }
  /* Padding, not margin, on the list: a top margin on the first in-flow child
     collapses out of the canvas and drags the whole section down with it.
     The absolutely-placed title is measured from the padding box, so it stays
     pinned to the section top regardless. */
  .s-faq .canvas { min-height: 68.1rem; height: auto; padding: 11.1rem 0 6rem; }
  .faq-title { left: 29.8rem; top: 0; width: 84.4rem; font-size: var(--text-h1); line-height: 1.08; text-align: center; }
  /* in flow, not pinned, so an open answer pushes the section taller instead of
     spilling over the section below */
  /* z-index 1 keeps the rows above .final-glow, which reaches 16.7rem up out of
     the next section and otherwise washes over the last question. The glow
     cannot simply drop to -1: that would put it behind its own opaque section
     background and hide it entirely. */
  .faq-list  { position: relative; left: auto; top: auto; width: 100.3rem;
               margin: 0 0 0 22.1rem; display: grid; gap: 1.6rem; z-index: 1; }
  .faq-q     { min-height: 8.9rem; padding: 1.3rem 1.7rem 1.3rem 3.8rem; font-size: var(--text-faq); line-height: 0.95; }
  /* 16.7rem canvas, 6.3rem disc; the negative margin restores the 6.3rem box. */
  /* No object-position: the old export sat off-centre in a 143-unit canvas and
     needed nudging, which then clipped the new centred disc into a D shape. */
  .faq-chevron { width: 6.3rem; height: 6.3rem; margin: 0; }
  .faq-a     { padding: 0 3.8rem 2.8rem; font-size: 2.1rem; line-height: 1.45; color: #2c3e4a; }

  /* ── final ------------------------------------------------------------- */

  .s-final { height: 81.8rem; background: var(--color-brand); }
  /* Radial wash the comp puts behind the closing CTA. */
  /* Mask group sits at (62, 8596) in the comp, behind the closing CTA. */
  .final-glow { left: 6.2rem; top: -16.7rem; width: 131.6rem; z-index: 0; pointer-events: none; }
  .final-title { left: 30rem; top: 0; width: 84.4rem; font-size: var(--text-h1); line-height: 1.08; text-align: center; }
  .final-body  { left: 19.3rem; top: 12.5rem; width: 105.3rem; font-size: var(--text-ui); line-height: 1.04; text-align: center; }
  .final-cta   { left: 55.2rem; top: 24.7rem; width: 33.7rem; display: inline-flex; }
  .final-art   { left: 26.9rem; top: 34.6rem; width: 90.3rem; }

  /* Occupies the footprint the flat render used to. The active phone is 32rem
     wide, matching the middle phone's size inside that render.
     The phones hang past the end of their own section and over the footer band -
     that is how the comp draws them - so the slider needs a stacking level or
     the footer paints over the dots and they stop being clickable. */
  .phone-slider { left: 26.9rem; top: 34.6rem; width: 90.3rem; z-index: 4; }
  .phone-stage  { height: 67.6rem; }
  .phone-slide  { width: 32rem; margin-left: -16rem; }
  .phone-dots   { gap: 1.2rem; margin-top: 1.6rem; }
  .phone-dot    { width: 1.2rem; height: 1.2rem; }
  .phone-dot[aria-selected="true"] { width: 3.4rem; }

  /* ── footer ------------------------------------------------------------ */

  body:not(.legal) .site-footer { height: 63.1rem; }
  body:not(.legal) .footer-cta  { left: 55.2rem; top: 30.1rem; width: 33.7rem; display: inline-flex; }
  body:not(.legal) .footer-logo { left: 60.9rem; top: 41.5rem; width: 22.1rem; }
  body:not(.legal) .footer-links {
    left: 0; top: 53.5rem; width: 144rem; font-size: 1.8rem;
    display: flex; justify-content: center; gap: 1.2rem;
  }
  body:not(.legal) .footer-copy {
    left: 44.5rem; top: 49.9rem; width: 55rem;
    font-size: var(--text-fine); line-height: 1.02; text-transform: capitalize;
  }
  /* Sits in the empty band below the legal links, so nothing above it moves. */
  body:not(.legal) .footer-contact {
    left: 0; top: 57.9rem; width: 144rem;
    font-size: var(--text-fine); line-height: 1.02;
  }
  .footer-logo img { width: 22.1rem; height: auto; }

  /* ── legal pages ------------------------------------------------------- */

  .legal .site-header { position: sticky; top: 0; }
  .legal .site-header .canvas {
    display: flex; align-items: center; gap: 2.4rem;
    height: 9.6rem; padding-inline: 4rem;
    border-bottom: 1px solid rgb(255 255 255 / 0.22);
  }
  .legal .hd-nav { margin-left: auto; }
  .legal .hd-cta { width: auto; }
  .legal .hd-burger, .legal .hd-panel { display: none !important; }

  .legal-hero { padding: 6rem 0 8rem; }
  .legal-wrap { width: min(96rem, 100%); padding-inline: 4rem; }
  .legal-crumbs { font-size: 1.7rem; }
  .legal-updated { font-size: 1.8rem; }
  .legal-body { padding-bottom: 10rem; }
  .legal-card { margin-top: -4rem; padding: 6rem 6rem 6.4rem; }
  .legal-card p, .legal-card li { font-size: 1.9rem; }
  .legal-card ul, .legal-card ol { padding-left: 2.6rem; }

  .legal .site-footer { padding: 6rem 0; }
  .legal .footer-cta  { display: inline-flex; margin-inline: auto; }
  .legal .footer-logo { display: block; margin-top: 3rem; }
  .legal .footer-logo img { margin-inline: auto; }
  .legal .footer-links {
    margin-top: 2.4rem; display: flex; justify-content: center;
    gap: 1.2rem; font-size: 1.7rem;
  }
  .legal .footer-copy { margin-top: 1.4rem; font-size: 1.7rem; }
  .legal .footer-contact { margin-top: 1.2rem; font-size: 1.7rem; }
}

/* =============================================================================
   Legal pages (privacy, terms, 404) — appearance, all breakpoints
   ============================================================================= */

.legal { background: var(--color-brand-pale); }

.legal-hero { background: var(--color-brand); color: #fff; padding: 34px 0 40px; }
.legal-wrap { width: min(860px, 100%); margin-inline: auto; padding-inline: 22px; }
.legal-crumbs { font-size: 14px; opacity: .85; }
.legal-crumbs a { color: #fff; text-decoration: underline; }
.legal-hero h1 { margin-top: 10px; font-size: clamp(30px, 8vw, 56px); font-weight: 700; line-height: 1.08; }
.legal-updated { margin-top: 10px; font-size: 15px; opacity: .9; }

.legal-body { padding: 0 0 56px; }
.legal-card {
  margin-top: -22px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 30px 22px;
  color: #17313f;
}
.legal-card h2 {
  margin-top: 32px;
  font-size: clamp(20px, 5.2vw, 26px);
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1.2;
}
.legal-card h2:first-of-type { margin-top: 0; }
.legal-card .legal-intro {
  margin-top: 0;
  font-size: 1.08em;
  color: #24506a;
  padding-bottom: 22px;
  border-bottom: 1px solid #dfeef7;
}
.legal-card .legal-intro + h2 { margin-top: 26px; }
.legal-card h3 { margin-top: 22px; font-size: clamp(17px, 4.4vw, 20px); font-weight: 700; color: var(--color-flame); }
.legal-card p, .legal-card li { font-size: 16px; line-height: 1.65; }
.legal-card p { margin-top: 12px; }
.legal-card ul, .legal-card ol { margin-top: 12px; padding-left: 22px; list-style: disc; }
.legal-card ol { list-style: decimal; }
.legal-card li { margin-top: 6px; }
.legal-card a { color: var(--color-brand); text-decoration: underline; }
.legal-card b, .legal-card strong { font-weight: 700; }
.legal-card table { width: 100%; margin-top: 16px; border-collapse: collapse; font-size: 15px; }
.legal-card th, .legal-card td { border: 1px solid #d7e7f0; padding: 10px 12px; text-align: left; }
.legal-card th { background: var(--color-brand-pale); font-weight: 700; }
.legal-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--color-brand-pale);
  padding: 2px 6px;
  border-radius: 5px;
}

.legal-placeholder {
  border: 2px dashed var(--color-sun-deep);
  background: #fffbe9;
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 30px;
}
.legal-placeholder p { margin-top: 8px; }
.legal-placeholder p:first-child { margin-top: 0; }

.notfound { padding: 60px 0 80px; text-align: center; }
.notfound-lead { margin-top: 14px; font-size: 17px; }
.notfound-actions { margin-top: 26px; }
.notfound-actions .btn { display: inline-flex; }

/* ---- footer ------------------------------------------------------------- */
/* The copyright credit reads as a line of text, not a link, in the comp. */
.footer-copy a { text-decoration: none; }
.footer-copy a:hover, .footer-copy a:focus-visible { text-decoration: underline; }

@media (max-width: 1099px) {
  .final-glow { display: none; }
}

/* Hero wash (Frame 2087328182): 1473x1033 from x=-15, behind everything. */
@media (min-width: 1100px) {
  .hero-glow { position: absolute; left: -1.5rem; top: -1rem; width: 147.3rem;
               max-width: none; z-index: 0; pointer-events: none; }
}
@media (max-width: 1099px) { .hero-glow { display: none; } }
}@font-face{font-family:Pally;src:url(/assets/fonts/Pally-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Pally;src:url(/assets/fonts/Pally-Medium.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}@font-face{font-family:Pally;src:url(/assets/fonts/Pally-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Proxima Nova;src:url(/assets/fonts/ProximaNova-Regular.woff2)format("woff2");font-weight:400 500;font-style:normal;font-display:swap}@font-face{font-family:Proxima Nova;src:url(/assets/fonts/ProximaNova-Extrabold.woff2)format("woff2");font-weight:700 800;font-style:normal;font-display:swap}[data-aos=fade-up]{transform:translateY(3.2rem)}@media (min-width:1100px){[data-aos=fade-up]{transform:translateY(4rem)}}html:not(.js) [data-aos]{opacity:1!important;transform:none!important}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}
/* =============================================================================
   Download popup — email capture, then the store links.
   Triggered by every .js-store-link button. Built by main.js, so the markup
   lives in one place and works on all four pages.
   ============================================================================= */

.kv-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 2.4rem;
  background: rgb(0 0 0 / 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
.kv-modal[data-open="true"] { opacity: 1; visibility: visible; }

.kv-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3.2rem;
  width: min(100%, 82rem);
  max-height: 88vh;
  overflow-y: auto;
  padding: 4.4rem 4rem 4rem;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  /* starts low and slightly small, then settles - the overshoot is what makes
     it feel like it springs open rather than just appearing */
  transform: translateY(2.4rem) scale(.96);
  transition: transform .34s cubic-bezier(.22, 1.2, .36, 1);
}
.kv-modal[data-open="true"] .kv-card { transform: none; }

.kv-close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: #f1f1f3;
  cursor: pointer;
  transition: background .2s ease;
}
.kv-close:hover { background: #e2e2e6; }
.kv-close svg { width: 1.8rem; height: 1.8rem; stroke: #1d1e20; stroke-width: 2; fill: none; }

.kv-art { flex: 0 0 auto; width: 26rem; }
.kv-art img { width: 100%; height: auto; border-radius: 2.4rem; }

.kv-body { flex: 1; min-width: 0; }
.kv-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1.2;
  color: #0d141a;
  margin-bottom: .8rem;
}
.kv-text {
  font-family: var(--font-ui);
  font-size: 1.9rem;
  line-height: 1.5;
  color: #1d1c1d;
  margin-bottom: 2.4rem;
}

.kv-field {
  width: 100%;
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.6rem;
  border: 1.5px solid #d4d4d8;
  border-radius: 1rem;
  background: #fff;
  font-family: var(--font-ui);
  font-size: 1.8rem;
  color: #1d1e20;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.kv-field::placeholder { color: #a1a1aa; }
.kv-field:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgb(0 154 237 / 0.15);
}

/* the site's own button, just stretched to the form width */
.kv-submit { width: 100%; }
.kv-submit:disabled { opacity: .6; cursor: not-allowed; }

.kv-msg {
  display: none;
  margin-top: 1.2rem;
  padding: 1rem;
  border-radius: 1rem;
  font-family: var(--font-ui);
  font-size: 1.5rem;
  text-align: center;
}
.kv-msg.is-error {
  display: block;
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.kv-stores { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1.6rem; }
.kv-store { display: inline-block; max-width: 20rem; transition: opacity .2s ease; }
.kv-store:hover { opacity: .8; }
.kv-store img { width: auto; max-width: 20rem; height: auto; }

@media (max-width: 1099px) {
  .kv-modal { padding: 16px; }
  .kv-card {
    flex-direction: column;
    gap: 20px;
    width: min(100%, 520px);
    padding: 36px 24px 28px;
    border-radius: 24px;
  }
  .kv-close { top: 10px; right: 10px; width: 34px; height: 34px; }
  .kv-close svg { width: 16px; height: 16px; }
  .kv-art { width: 170px; }
  .kv-art img { border-radius: 18px; }
  .kv-body { text-align: center; }
  .kv-title { font-size: 24px; margin-bottom: 6px; }
  .kv-text { font-size: 16px; margin-bottom: 18px; }
  .kv-field { padding: 13px 15px; margin-bottom: 13px; border-radius: 8px; font-size: 16px; }
  .kv-msg { font-size: 13px; border-radius: 8px; }
  .kv-stores { align-items: center; gap: 12px; }
  .kv-store, .kv-store img { max-width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  .kv-modal, .kv-card { transition-duration: .01ms; }
  .kv-card { transform: none; }
}

/* =============================================================================
   Review meta + expandable quote
   ============================================================================= */

@media (min-width: 1100px) {
  /* Name first, then city, each only as wide as its own text. The pair is
     right-aligned, so it always ends just before the stars however long the
     name happens to be. .review-meta is now the positioning parent, so the
     stars are measured from it - same place on screen as before. */
  .review-meta {
    position: absolute; left: 0; top: 6.1rem; width: 58.4rem;
    display: flex; justify-content: flex-end; align-items: baseline; gap: 2rem;
  }
  .review-name { position: static; width: auto; order: 1; }
  .review-city { position: static; width: auto; order: 2; }
  .review-stars { left: 59.5rem; top: 0; }
}

/* The quote is clamped by line count, not by cutting the text, so clicking it
   reveals the rest. -webkit-box is the only cross-browser line clamp. */
.review-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.review-text.is-open { -webkit-line-clamp: unset; }

@media (max-width: 1099px) {
  /* five lines is what the shortened text already filled, so the phone card
     keeps exactly the height it has today */
  .review-text { -webkit-line-clamp: 5; }
}

@media (min-width: 1100px) {
  .review-text { -webkit-line-clamp: 3; }
  /* The card is a fixed 24.6rem in the design and everything in this section is
     absolutely positioned, so an opened quote scrolls inside the space the card
     already has rather than pushing the rating row below it out of place. */
  .review-text.is-open { max-height: 13.2rem; overflow-y: auto; }
}