/* =====================================================================
   test-tiffins-css.css
   IFA APP SECTION  —  "Manage Your Tiffin, Anytime. Anywhere!"
   Replacement for the old .app-promo block.

   ISOLATION CONTRACT — nothing in this file can affect the rest of the page:
     · every class is prefixed  ifa-   (zero occurrences elsewhere in the project)
     · every rule is scoped under  .ifa-app  so it cannot select outside the section
     · no bare element selectors, no !important, no global resets
     · colours come from locally-scoped vars seeded from your :root tokens,
       with hard-coded fallbacks so it still renders if a token is renamed

   TO RESKIN: change the variables in the .ifa-app block below.
   ===================================================================== */

.ifa-app{
  /* ---- brand, inherited from :root with fallbacks ---- */
  --ifa-green:       var(--green-dark, #1f5738);
  --ifa-green-mid:   var(--green, #2c7a4b);
  --ifa-green-tint:  var(--green-light, #e8f4ec);
  --ifa-orange:      var(--orange, #f0641f);
  --ifa-orange-dk:   var(--orange-dark, #d94f10);
  --ifa-ink:         var(--ink, #22281f);
  --ifa-ink-soft:    var(--ink-soft, #5a6357);
  --ifa-line:        var(--line, #ece3d2);

  /* ---- layout knobs ---- */
  --ifa-max: 820px;          /* centred column width on desktop */
  --ifa-pad: 20px;           /* side gutter */
  --ifa-radius: 12px;

  /* =================================================================
     DEVICE CONTROLS — corner photo + hand-lettered script
     These are the desktop values; each breakpoint at the bottom of this
     file overrides only what it needs. Everything else is derived.

     KEEP WIDTH ÷ HEIGHT MATCHING YOUR ARTWORK or it will crop:
       app-corner-bg.png             459 x 795  → ratio 0.577
       good-food-fits-your-life.png  149 x 242  → ratio 0.616
     (the script's height is automatic — only its width is set)
     ================================================================= */

  /* ---- corner photo ---- */
  --ifa-decor-image: url("images/top-corner-img.png");
  --ifa-decor-w: 330px;      /* 330 ÷ 0.577 = 572, so the height below */
  --ifa-decor-h: 572px;
  --ifa-decor-fit: cover;    /* cover | contain */
  --ifa-decor-pos: top right;
  --ifa-decor-top: 0px;
  --ifa-decor-right: 0px;
  --ifa-decor-opacity: 1;    /* the fade now lives in the image itself */
  --ifa-decor-display: block;

  /* ---- second corner photo, bottom left ----
     Same ratio rules as the first. Set --ifa-decor2-display to none to
     drop it at any breakpoint. */
  --ifa-decor2-image: url("images/low-corner-img.png");
  --ifa-decor2-w: 280px;
  --ifa-decor2-h: 485px;      /* 280 ÷ 0.577 */
  --ifa-decor2-fit: cover;
  --ifa-decor2-pos: bottom left;
  --ifa-decor2-bottom: 0px;
  --ifa-decor2-left: 0px;
  --ifa-decor2-opacity: 1;
  --ifa-decor2-display: block;
  --ifa-decor2-fade: 26%;     /* soft TOP edge, see note on the rule below */
  --ifa-decor2-fade-b: 0%;    /* soft BOTTOM edge; only needed when it is lifted
                                 off the section's bottom edge (mobile) */

  /* ---- hand-lettered script ---- */
  --ifa-script-w: 150px;     /* height follows the artwork automatically */
  --ifa-script-top: 8px;
  --ifa-script-right: 0px;
  --ifa-script-gap: 22px;    /* clear space kept between the text and the script */
  --ifa-script-ratio: 0.616; /* 149 ÷ 242 — only used to size the scrim below */

  /* White scrim painted BETWEEN the corner photo and the script, so the
     lettering stays readable when the two overlap. 0 = off. */
  --ifa-script-scrim: 0;
  --ifa-script-scrim-pad: 16px;

  /* ---- SWAPPABLE ICON SIZES — edit these, not the rules below ----
     Store badges keep a fixed box so Android and iPhone always match,
     whatever artwork you drop in. */
  --ifa-badge-w: 150px;            /* width of both store badges */
  --ifa-badge-ratio: 3.33;         /* badge width ÷ height; matches 210x63 artwork */

  /* ---- the three rays above "Tiffin" ----
     em units scale them with the headline; swap to px for a fixed size.
     --ifa-rays-z controls where they sit in the stack (see note below). */
  --ifa-rays-w:     1.32em;
  --ifa-rays-h:     0.95em;
  --ifa-rays-top:  -0.60em;
  --ifa-rays-right:-0.46em;
  --ifa-rays-z:     3;

  /* Feature list icons (Manage your plan … All in one place) */
  --ifa-feature-circle: 34px;      /* the round plate behind the icon */
  --ifa-feature-img: 18px;         /* the icon artwork inside it */
  --ifa-feature-circle-lg: 68px;   /* same two, for "All in one place" on desktop */
  --ifa-feature-img-lg: 36px;

  position: relative;
  overflow: hidden;              /* keeps the corner photo inside the section */
  background: #fff;
  padding: 44px 0 52px;
  font-family: 'Poppins', sans-serif;
  color: var(--ifa-ink-soft);
}

.ifa-app .ifa-wrap{
  position: relative;
  z-index: 1;
  max-width: var(--ifa-max);
  margin: 0 auto;
  padding: 0 var(--ifa-pad);
}

/* ---- decorative photo, top-right, fading away toward the copy ---- */
/* ---- corner photo. No CSS fade or mask: the soft edge is baked into
        the artwork itself, so what you export is exactly what renders. ---- */
.ifa-app .ifa-decor{
  position: absolute;
  top: var(--ifa-decor-top);
  right: var(--ifa-decor-right);
  z-index: 0;
  width: var(--ifa-decor-w);
  height: var(--ifa-decor-h);
  background-image: var(--ifa-decor-image);
  background-size: var(--ifa-decor-fit);
  background-position: var(--ifa-decor-pos);
  background-repeat: no-repeat;
  opacity: var(--ifa-decor-opacity);
  display: var(--ifa-decor-display);
  pointer-events: none;
}

/* ---- second photo, bottom-left. Same treatment as the corner one:
        no CSS fade, the soft edge lives in the artwork. ---- */
.ifa-app .ifa-decor-2{
  position: absolute;
  bottom: var(--ifa-decor2-bottom);
  left: var(--ifa-decor2-left);
  z-index: 0;
  width: var(--ifa-decor2-w);
  height: var(--ifa-decor2-h);
  background-image: var(--ifa-decor2-image);
  background-size: var(--ifa-decor2-fit);
  background-position: var(--ifa-decor2-pos);
  background-repeat: no-repeat;
  opacity: var(--ifa-decor2-opacity);
  display: var(--ifa-decor2-display);
  pointer-events: none;

  /* This image is a mirror of the corner one, so its baked-in soft edge is on
     the RIGHT and its top would otherwise cut off square. This fades the top
     only. If you export dedicated bottom-left artwork with its own soft top
     edge, set --ifa-decor2-fade: 0% and this does nothing. */
  -webkit-mask-image: linear-gradient(to bottom,
              transparent 0%,
              #000 var(--ifa-decor2-fade),
              #000 calc(100% - var(--ifa-decor2-fade-b)),
              transparent 100%);
          mask-image: linear-gradient(to bottom,
              transparent 0%,
              #000 var(--ifa-decor2-fade),
              #000 calc(100% - var(--ifa-decor2-fade-b)),
              transparent 100%);
}

/* ================= header ================= */
.ifa-app .ifa-eyebrow{
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 15px;
  border: 1.5px solid var(--ifa-green-mid);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ifa-green);
  background: #fff;
}

/* the headline block is the positioning context for the script image */
/* The headline reserves the script's width at EVERY size, so the text
   wraps before it rather than running underneath. */
.ifa-app .ifa-head{
  position: relative;
  padding-right: calc(var(--ifa-script-w) + var(--ifa-script-right) + var(--ifa-script-gap));
}

/* White halo behind the script. It lives inside .ifa-wrap (z-index 1), so
   it always paints above the corner photo (z-index 0) and below the script
   itself (z-index 2). Invisible until --ifa-script-scrim is raised. */
.ifa-app .ifa-head::after{
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--ifa-script-top) - var(--ifa-script-scrim-pad));
  right: calc(var(--ifa-script-right) - var(--ifa-script-scrim-pad));
  width: calc(var(--ifa-script-w) + var(--ifa-script-scrim-pad) * 2);
  height: calc(var(--ifa-script-w) / var(--ifa-script-ratio) + var(--ifa-script-scrim-pad) * 2);
  background: radial-gradient(closest-side,
              rgba(255,255,255, var(--ifa-script-scrim)) 52%,
              rgba(255,255,255, 0) 100%);
  pointer-events: none;
}

.ifa-app .ifa-script{
  position: absolute;
  top: var(--ifa-script-top);
  right: var(--ifa-script-right);
  width: var(--ifa-script-w);
  height: auto;              /* keeps the artwork's own proportions */
  z-index: 2;
  pointer-events: none;
}

.ifa-app .ifa-title{
  margin: 0 0 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.18;
  color: #111;
}
.ifa-app .ifa-line{ display: block; }

/* "Anytime. Anywhere!" — inline-block so the brush stroke below it can be
   exactly as wide as the words, not the whole column */
.ifa-app .ifa-title-accent{
  display: inline-block;
  position: relative;
  color: var(--ifa-green-mid);
}

/* ---------------------------------------------------------------------
   THREE RAYS ABOVE "TIFFIN"
   Inline SVG, so it takes its colour from the brand token and stays crisp
   at any size. Position, size and stacking come from the --ifa-rays-*
   variables at the top of this file.

   Stacking order inside this section:
        0  .ifa-decor    the corner photo
        1  .ifa-wrap     all the text content
        2  .ifa-script   the "Good Food Fits Your Life" image
        3  the rays      (raise or lower with --ifa-rays-z)
   --------------------------------------------------------------------- */
.ifa-app .ifa-word{ position: relative; }

.ifa-app .ifa-rays{
  position: absolute;
  right: var(--ifa-rays-right);
  top: var(--ifa-rays-top);
  width: var(--ifa-rays-w);
  height: var(--ifa-rays-h);
  z-index: var(--ifa-rays-z);
  pointer-events: none;
  color: var(--ifa-green-mid);
  overflow: visible;
}

/* orange brush stroke under the accent line */
.ifa-app .ifa-brush{
  position: absolute;
  left: -1.5%;
  bottom: -0.26em;
  width: 104%;
  height: 0.30em;
  color: var(--ifa-orange);
}

.ifa-app .ifa-rule{
  height: 1px;
  background: var(--ifa-line);
  border: 0;
  margin: 6px 0 18px;
}

/* ================= quick actions row ================= */
.ifa-app .ifa-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.ifa-app .ifa-action{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ifa-ink);
}
.ifa-app .ifa-action svg{
  width: 19px;
  height: 19px;
  flex: none;
  color: var(--ifa-green-mid);
}

.ifa-app .ifa-tagline{
  margin: 0 0 22px;
  font-size: 15.5px;
  font-weight: 400;
  color: #111;
}

/* ================= note box ================= */
.ifa-app .ifa-note{
  display: flex;
  gap: 14px;
  background: var(--ifa-green-tint);
  border-radius: var(--ifa-radius);
  padding: 16px 18px;
  margin-bottom: 24px;
}
.ifa-app .ifa-note-icon{
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--ifa-green);
  color: #fff;
}
.ifa-app .ifa-note-icon svg{ width: 20px; height: 20px; }
.ifa-app .ifa-note-title{
  margin: 0 0 3px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ifa-green);
}
.ifa-app .ifa-note-text{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #3f4a3f;
}

/* ================= app bar: "Get Our App" + the 3 stores =================
   Desktop: title block and all three stores sit on ONE line.
   Mobile:  title block on top, the three stores still on ONE line below.   */
.ifa-app .ifa-appbar{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--ifa-radius);
  background: #fff;
  margin-bottom: 30px;
}
.ifa-app .ifa-get{
  display: flex;
  align-items: center;
  gap: 14px;
}
.ifa-app .ifa-get-icon{
  width: 46px;
  height: 46px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ifa-green-mid);
  box-shadow: 0 2px 8px rgba(31,87,56,.12);
}
.ifa-app .ifa-get-icon svg{ width: 22px; height: 22px; }
.ifa-app .ifa-get-title{
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: #111;
}
.ifa-app .ifa-get-sub{
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ifa-ink-soft);
}

/* three stores, always on one line */
.ifa-app .ifa-stores{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
}
.ifa-app .ifa-store{ min-width: 0; }
.ifa-app .ifa-store-label{
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ifa-green);
}
/* Both badges sit in an identical fixed box, so swapping artwork of any
   size never makes one bigger than the other. object-fit keeps the new
   image's own proportions inside that box. */
.ifa-app .ifa-store-badge{
  display: block;
  width: 100%;
  max-width: var(--ifa-badge-w);
  height: calc(var(--ifa-badge-w) / var(--ifa-badge-ratio));
  object-fit: contain;
  object-position: left center;
  border-radius: 8px;
  background: transparent;
}
.ifa-app .ifa-web-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 150px;
  padding: 10px 8px;
  border: 1.5px solid var(--ifa-orange);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  color: var(--ifa-orange-dk);
  background: #fff;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.ifa-app .ifa-web-btn:hover{
  background: var(--ifa-orange);
  color: #fff;
}
.ifa-app .ifa-store-note{
  margin: 6px 0 0;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ifa-ink-soft);
}

/* ================= device mockup + feature list =================
   The features sit BESIDE the mockup at every width.                */
.ifa-app .ifa-showcase{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 18px;
  align-items: center;
  margin-bottom: 8px;
}
.ifa-app .ifa-devices img{
  display: block;
  width: 100%;
  height: auto;
}
.ifa-app .ifa-features{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.ifa-app .ifa-feature{
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #111;
}
.ifa-app .ifa-feature-icon{
  width: var(--ifa-feature-circle);
  height: var(--ifa-feature-circle);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ifa-green-tint);
  color: var(--ifa-green);
}
/* the icon artwork. Every one is the same size regardless of the file's
   own dimensions — object-fit does the fitting, nothing is stretched. */
.ifa-app .ifa-feature-img{
  display: block;
  width: var(--ifa-feature-img);
  height: var(--ifa-feature-img);
  object-fit: contain;
}
.ifa-app .ifa-feature-icon svg{
  width: var(--ifa-feature-img);
  height: var(--ifa-feature-img);
}

/* If your own icons already have their own colour/shape, drop the green
   plate by adding class="ifa-app ifa-feature-plain" on the <section>. */
.ifa-app.ifa-feature-plain .ifa-feature-icon{ background: transparent; }

.ifa-app .ifa-feature--solid .ifa-feature-icon{
  background: var(--ifa-green);
  color: #fff;
}

/* ---- desktop: features become 2 x 2, with "All in One Place" beneath ---- */
@media (min-width: 900px){
  .ifa-app .ifa-appbar{
    grid-template-columns: auto 1fr;
    gap: 26px;
    padding: 18px 22px;
  }
  .ifa-app .ifa-get{ max-width: 260px; }

  .ifa-app .ifa-features{
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
    row-gap: 16px;
  }
  .ifa-app .ifa-feature:nth-child(1){ grid-column: 1; grid-row: 1; }
  .ifa-app .ifa-feature:nth-child(2){ grid-column: 1; grid-row: 2; }
  .ifa-app .ifa-feature:nth-child(3){ grid-column: 2; grid-row: 1; }
  .ifa-app .ifa-feature:nth-child(4){ grid-column: 2; grid-row: 2; }
  .ifa-app .ifa-feature:nth-child(5){ grid-column: 1 / -1; grid-row: 3; }

  /* the summary item reads as the payoff line — twice the size of the rest */
  .ifa-app .ifa-feature--solid{ font-size: 27px; gap: 16px; margin-top: 4px; }
  .ifa-app .ifa-feature--solid .ifa-feature-icon{
    width: var(--ifa-feature-circle-lg);
    height: var(--ifa-feature-circle-lg);
  }
  .ifa-app .ifa-feature--solid .ifa-feature-img,
  .ifa-app .ifa-feature--solid .ifa-feature-icon svg{
    width: var(--ifa-feature-img-lg);
    height: var(--ifa-feature-img-lg);
  }
}

/* =================================================================
   LOWER USP ROW — deliberately identical to the previous .af-row:
   2 x 2 with cross dividers below 992px, one flat row above it,
   same circle sizes, same per-item colours.
   ================================================================= */
/* the USP row sits in a wider wrapper so it keeps the width it had before,
   while the rest of the section stays in the centred --ifa-max column */
.ifa-app .ifa-wrap-wide{
  position: relative;
  z-index: 1;
  max-width: var(--ifa-max-wide, 1180px);
  margin: 0 auto;
  padding: 0 var(--ifa-pad);
}

.ifa-app .ifa-usps{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 34px;
}
.ifa-app .ifa-usp{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px;
}
.ifa-app .ifa-usp-1{ border-right: 1px solid var(--ifa-line); border-bottom: 1px solid var(--ifa-line); }
.ifa-app .ifa-usp-2{ border-bottom: 1px solid var(--ifa-line); }
.ifa-app .ifa-usp-3{ border-right: 1px solid var(--ifa-line); }

.ifa-app .ifa-usp-icon{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ifa-app .ifa-usp-icon svg{ width: 20px; height: 20px; }
.ifa-app .ifa-usp-1 .ifa-usp-icon{ background: var(--ifa-green-tint); color: var(--ifa-green); }
.ifa-app .ifa-usp-2 .ifa-usp-icon{ background: #e7eefb; color: #3163c4; }
.ifa-app .ifa-usp-3 .ifa-usp-icon{ background: #fff1e8; color: var(--ifa-orange); }
.ifa-app .ifa-usp-4 .ifa-usp-icon{ background: #fde8ea; color: #d9364a; }

.ifa-app .ifa-usp-title{ margin: 0 0 3px; font-size: 14.5px; font-weight: 700; }
.ifa-app .ifa-usp-1 .ifa-usp-title{ color: var(--ifa-green); }
.ifa-app .ifa-usp-2 .ifa-usp-title{ color: #3163c4; }
.ifa-app .ifa-usp-3 .ifa-usp-title{ color: var(--ifa-orange-dk); }
.ifa-app .ifa-usp-4 .ifa-usp-title{ color: #d9364a; }
.ifa-app .ifa-usp-text{ margin: 0; font-size: 12.5px; color: var(--ifa-ink-soft); line-height: 1.4; }

@media (min-width: 992px){
  .ifa-app .ifa-usps{ display: flex; flex-direction: row; align-items: stretch; }
  .ifa-app .ifa-usp{ flex: 1 1 0; min-width: 0; padding: 18px 24px; }
  .ifa-app .ifa-usp-1,
  .ifa-app .ifa-usp-2,
  .ifa-app .ifa-usp-3,
  .ifa-app .ifa-usp-4{ border-right: none; border-bottom: none; }
  .ifa-app .ifa-usp + .ifa-usp{ border-left: 1px solid var(--ifa-line); }
}

@media (max-width: 420px){
  .ifa-app .ifa-usp{ padding: 16px 8px; }
}

/* =====================================================================
   DEVICE CONTROLS — per breakpoint
   Only the corner photo and the script are resized here. Keep each
   width ÷ height on the artwork's own ratio (0.577) or it will crop.
   ===================================================================== */

/* ---- tablet ---- */
@media (max-width: 991px){
  .ifa-app{
    --ifa-decor-w: 250px;
    --ifa-decor-h: 433px;       /* 250 ÷ 0.577 */
    --ifa-decor2-w: 210px;
    --ifa-decor2-h: 364px;      /* 210 ÷ 0.577 */
    --ifa-script-w: 118px;
  }
}

/* ---- mobile ----
   The corner photo and the script share the top-right corner here, so a
   white scrim is painted between them to keep the lettering readable.
   Turn the halo up or down with --ifa-script-scrim (0 = off, 1 = solid). */
@media (max-width: 720px){
  .ifa-app{
    --ifa-decor-w: 165px;
    --ifa-decor-h: 286px;       /* 165 ÷ 0.577 */
    /* on phones this rides UP behind the phone/laptop mockup instead of
       sitting behind the USP grid. --ifa-decor2-bottom is measured from the
       section's bottom edge; the mockup band is roughly 394-547px up. */
    --ifa-decor2-w: 150px;
    --ifa-decor2-h: 260px;      /* 150 ÷ 0.577 */
    --ifa-decor2-bottom: 350px;
    --ifa-decor2-fade: 22%;
    --ifa-decor2-fade-b: 20%;
    --ifa-script-w: 100px;
    --ifa-script-top: 2px;
    --ifa-script-gap: 12px;
    --ifa-script-scrim: .94;
    --ifa-script-scrim-pad: 22px;
    padding: 34px 0 42px;
  }
  .ifa-app .ifa-get-title{ font-size: 18px; }
}

@media (max-width: 560px){
  .ifa-app{ --ifa-decor-w: 150px; --ifa-decor-h: 260px; --ifa-decor2-w: 140px; --ifa-decor2-h: 243px; --ifa-decor2-bottom: 372px; --ifa-script-w: 92px; }
  .ifa-app .ifa-stores{ gap: 8px; }
  .ifa-app .ifa-store-label{ font-size: 10.5px; }
  .ifa-app .ifa-web-btn{ font-size: 11px; padding: 9px 6px; }
  .ifa-app .ifa-store-note{ font-size: 9.5px; }

  .ifa-app .ifa-showcase{
    grid-template-columns: .92fr 1.08fr;
    gap: 12px;
    margin-right: -12px;      /* trims the right gutter so the list is not squeezed */
  }
  .ifa-app .ifa-features{ gap: 11px; }
  .ifa-app .ifa-feature{ font-size: 11.5px; font-weight: 400; gap: 8px; }
  .ifa-app{ --ifa-feature-circle: 28px; --ifa-feature-img: 15px; }
}

@media (max-width: 400px){
  .ifa-app{ --ifa-decor-w: 128px; --ifa-decor-h: 222px; --ifa-decor2-w: 128px; --ifa-decor2-h: 222px; --ifa-decor2-bottom: 450px; --ifa-script-w: 82px; --ifa-script-gap: 10px; --ifa-script-scrim-pad: 15px; }
  .ifa-app .ifa-actions{ gap: 10px 16px; }
  .ifa-app .ifa-feature{ font-size: 11px; }
}

@media (prefers-reduced-motion: reduce){
  .ifa-app .ifa-web-btn{ transition: none; }
}