/* ─────────────────────────────────────────────────────────────
   Global CSS custom-properties
   ─ Phone-first → progressively enhance at wider break-points
───────────────────────────────────────────────────────────── */
:root {
    /* ─── Phone mock-up demo ─── */
    --phone-width: 160px;
    --phone-aspect-ratio: 430/1020;

    /* shape & perspective ratios (based on the 430-px design) */
    --screen-radius-ratio: 0.1116;
    /* 48 / 430  */
    --perspective-ratio: 3.0233;
    /* 1300 / 430 */
    --click-size-ratio: 0.0581;
    /* 25 / 430  */
    --shadow-blur-ratio: 0.00465;
    /* 2 / 430   */

    /* geometry tweaks */
    --screen-top: 3.3%;
    --screen-left: 3.7%;
    --screen-scale-x: 0.85;
    --screen-scale-y: 0.92;
    --mask-height: 84%;
    --mask-top: 13%;
    --screen-rotateY: -7deg;
    --screen-rotateX: 1deg;

    /* derived sizes */
    --screen-radius: calc(var(--phone-width) * var(--screen-radius-ratio));
    --scene-perspective: calc(var(--phone-width) * var(--perspective-ratio));
    --click-size: calc(var(--phone-width) * var(--click-size-ratio));
    --shadow-blur: calc(var(--phone-width) * var(--shadow-blur-ratio));

    /* fallback animation timings (JS overwrites on load) */
    --t-frame2-delay: 1s;
    --t-frame2-duration: 0.5s;
    --t-loader-delay: 3s;
    --t-loader-duration: 0.7s;
    --t-final-delay: 3.7s;
    --t-final-duration: 3s;
    --t-loop-pause: 0.5s;

    /* layout */
    --section-gap: 3rem;
    --card-pad: 1rem;
    --section-pad: 1rem;
    --pricing-card-w: 260px;

    /* brand colour */
    --webpage-main-color: #4857ab;

    /* ─── TYPOGRAPHY SCALE ─────────────────────────────────────
       Mobile first: 14 px body (0.875 rem).  
       All other steps are ratios of that base so one change
       adjusts the entire scale.                                   */
    --fs-400: 0.875rem;
    /* body (14 px)        */
    --fs-300: calc(var(--fs-400) * .875);
    /* 12 px captions      */
    --fs-500: calc(var(--fs-400) * 1.125);
    /* 16 px lead / cards  */
    --fs-600: calc(var(--fs-400) * 1.375);
    /* 19 px h4            */
    --fs-700: calc(var(--fs-400) * 1.75);
    /* 24 px h3            */
    --fs-800: calc(var(--fs-400) * 2.125);
    /* 30 px h2            */
    --fs-900: calc(var(--fs-400) * 2.75);
    /* 38 px hero / h1     */

    /* handy aliases */
    --font-base: var(--fs-400);
    --font-heading: var(--fs-700);

    /* buttons */
    --btn-circle-size: 48px;
    --btn-icon-size: 20px;
    --btn-label-size: var(--font-base);
    --btn-gap: 3rem;
}

/* ─────────────────────────────────────────────────────────────
     Break-points
  ───────────────────────────────────────────────────────────── */

/* ≥ 480 px  –  slightly wider phones */
@media (min-width: 480px) {
    :root {
        --phone-width: 180px;
    }

    
}

/* ≥ 768 px –  tablets & small laptops */
@media (min-width: 768px) {
    :root {
        /* Phone mock-up a bit wider */
        --phone-width: 200px;

        /* bump body to the browser default 16 px */
        --fs-400: 1rem;
        /* body (16 px) */
        /* all other fs-tokens grow automatically via calc() */
    }
}

/* ≥ 1024 px –  desktops */
@media (min-width: 1024px) {
    :root {
        --phone-width: 220px;
        --card-pad: 2rem;

        /* touch-targets & labels a bit larger */
        --btn-circle-size: 60px;
        --btn-icon-size: 24px;

        /* optional: very slight type bump (17 px) */
        --fs-400: 1rem;
    }
}

/* ≥ 1440 px – large desktops / 4K */
@media (min-width: 1440px) {
    :root {
        --phone-width: 240px;

        /* optional: final type bump to 18 px for ultra-wide screens */
        --fs-400: 1rem;
    }
}