/* Generated from site.css between the app-promo markers. Do not edit. */
:where(.appband,.appstrip-wrap,.appshow,.appfacts){
  --bg:#F8F9FC;
  --blue:#163F85;
  --border:#E5E7EB;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gold:#C89A3D;
  --gold-deep:#A87722;
  --gold-hi:#E3C077;
  --gray:#6B7280;
  --head:"Plus Jakarta Sans",system-ui,sans-serif;
  --navy:#0B2F6D;
  --navy-deep:#081F49;
  --r-card:22px;
  --shadow-lift:0 26px 56px -22px rgba(11,47,109,.3);
  --white:#FFFFFF;
}

/* app-promo:start
   ============================================================
   Android app promo — three placements, one component set.
   .appband  navy showroom band   -> catalogue home
   .appstrip one-line strip       -> every page, inside footer chrome
   .appshow  full showcase        -> /products/app/

   Everything between the app-promo:start/end markers is also sliced out
   verbatim by generate.mjs into /products/assets/app-promo.css, so the
   WordPress homepage can load the identical rules without pulling the whole
   catalogue stylesheet. Edit here and only here — the copy is generated.
   ============================================================ */

/* .wrap is defined at the top of this file, outside the markers, so the sliced
   copy would reach WordPress without it — the band would go full-bleed and
   uncentred. Restated here so app-promo.css stands alone. On the catalogue
   these are the same values, so they change nothing. Note .appfacts gets no
   max-width: .appfacts-in owns that, and a two-class selector here would
   outrank it. */
.appband .wrap,.appshow .wrap,.appstrip-wrap .wrap{max-width:1260px;margin:0 auto;padding:0 24px}
.appfacts .wrap{margin:0 auto;padding:0 24px}

/* Same reason: the global a{text-decoration:none} reset sits outside the
   markers, so on WordPress a theme's own link styling would underline the Play
   badge and the "More about the app" link. The :hover rules further down carry
   a pseudo-class and still outrank this, so hover underlines survive. */
.appband a,.appstrip a,.appshow a,.appfacts a{text-decoration:none}

/* And the last two: h1,h2,h3{font-family:var(--head);margin:0;line-height:1.15}
   and *{box-sizing:border-box} are both global resets outside the markers.
   Without the first the headline silently falls back to the body face; without
   the second .wrap becomes 1260+48px and pushes a horizontal scrollbar onto the
   homepage. Each component rule below still sets its own margin-bottom, and
   comes later, so it wins. */
.appband,.appstrip-wrap,.appshow,.appfacts,
.appband *,.appstrip-wrap *,.appshow *,.appfacts *{box-sizing:border-box}
.appband h2,.appshow h1,.appfacts h2{font-family:var(--head);color:var(--navy);margin:0;line-height:1.15}

/* text-transform:none is NOT redundant. On the WordPress side the Elementor kit
   sets `text-transform: capitalize` on headings, which turned this page's H1
   into "Browse. Pick Sizes. Send The List." — the sentence is deliberately
   sentence case. Applies to every heading in the block, not just the H1, or
   "What it does" becomes "What It Does". */
.appband h2,.appshow h1,.appfacts h2,
.appband li b,.appfacts li b,.appcap b,.appstrip-tx b{text-transform:none}

/* Google's own badge artwork. Never restyle the image itself — their brand
   guidelines require it unmodified, and the clear space is baked into the PNG. */
.pbadge{display:inline-block;line-height:0;flex:none;transition:transform .2s var(--ease)}
.pbadge img{width:210px;height:auto}
.pbadge:hover{transform:translateY(-2px)}
.pbadge-sm img{width:172px}

/* A desktop visitor cannot install an Android app by clicking. */
.appqr{display:flex;align-items:center;gap:12px}
.appqr-i{width:104px;height:104px;background:#fff;border-radius:12px;padding:7px;flex:none}
.appqr-i svg{width:100%;height:100%;display:block}
.appqr span{font-size:.8rem;line-height:1.35;max-width:12ch}
.appqr-dark span{color:#9FB2D4}
.appqr-light span{color:var(--gray)}

.appph{flex:none;background:#0A0E17;border-radius:32px;padding:8px;
  box-shadow:0 28px 60px -24px rgba(8,31,73,.55)}
.appph img{border-radius:25px;display:block;width:100%;height:auto;background:#fff}

/* ---- A ---- */
.appband{background:var(--navy-deep);color:#DCE5F5;position:relative;overflow:hidden;isolation:isolate}
.appband::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:22px 22px}
.appband::after{content:"";position:absolute;z-index:-1;width:520px;height:520px;right:-140px;top:-190px;
  border-radius:50%;background:radial-gradient(circle,rgba(200,154,61,.22),transparent 68%)}
.appband-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding:60px 24px 0}
.appband-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:16px}
.appband-eyebrow img{width:26px;height:26px;border-radius:7px}
.appband h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.6rem);font-weight:800;letter-spacing:-.02em;
  text-wrap:balance;margin-bottom:14px}
.appband h2 i{color:var(--gold-hi);font-style:normal}
.appband-sub{color:#A9BEE0;font-size:1.04rem;max-width:46ch;margin:0 0 26px}
.appband ul{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:13px}
.appband li{display:flex;gap:12px;align-items:flex-start}
.appband li i{flex:none;width:19px;height:19px;border-radius:50%;background:var(--gold);
  margin-top:3px;position:relative}
.appband li i::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;
  border:solid var(--navy-deep);border-width:0 2px 2px 0;transform:rotate(42deg)}
.appband li b{display:block;color:#fff;font-weight:600;font-size:.97rem}
.appband li span{display:block;color:#8FA3BC;font-size:.86rem;line-height:1.45}
.appband-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.appband-free{font-size:.83rem;color:#8FA3BC}
.appband-free b{color:var(--gold-hi);display:block;font-size:.95rem}
.appband-more{margin:18px 0 60px;font-size:.88rem}
.appband-more a{color:var(--gold-hi);font-weight:600}
.appband-more a:hover{text-decoration:underline}
.appband-stage{display:flex;justify-content:center;align-items:flex-end;align-self:stretch;padding-top:26px}
.appband-stage .appph{transform:rotate(-3deg) translateY(6px);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(200,154,61,.35)}

/* ---- C ---- */
.appstrip-wrap{background:var(--bg);padding:34px 0 6px}
.appstrip{background:linear-gradient(105deg,var(--navy-deep),var(--blue) 118%);
  border-radius:var(--r-card);padding:20px 26px;display:flex;align-items:center;gap:22px;
  box-shadow:var(--shadow-lift);position:relative;overflow:hidden;isolation:isolate}
.appstrip::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:20px 20px}
.appstrip-ic{width:56px;height:56px;border-radius:13px;flex:none;box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
.appstrip-tx{flex:1;min-width:0}
.appstrip-tx b{display:block;font-family:var(--head);font-weight:700;font-size:1.06rem}
.appstrip-tx b a{color:#fff}
.appstrip-tx b a:hover{color:var(--gold-hi)}
.appstrip-tx span{display:block;color:#A9BEE0;font-size:.88rem}

/* ---- B ---- */
.appshow{background:var(--white);padding:52px 0 60px;text-align:center}
.appshow-kick{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:12px}
.appshow h1{font-family:var(--head);color:var(--navy);font-size:clamp(1.7rem,3vw,2.4rem);
  font-weight:800;letter-spacing:-.02em;margin:0 auto 12px;max-width:19ch;text-wrap:balance}
.appshow-sub{color:var(--gray);max-width:56ch;margin:0 auto 40px}
.appshow-rail{display:flex;justify-content:center;align-items:flex-end;gap:26px;margin-bottom:38px}
.appcol{display:flex;flex-direction:column;align-items:center;gap:14px}
.appcap{font-size:.8rem;color:var(--gray);max-width:20ch;line-height:1.4}
.appcap b{display:block;color:var(--navy);font-family:var(--head);font-weight:700;
  font-size:.92rem;margin-bottom:2px}
.appshow-foot{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap;
  border-top:1px solid var(--border);padding-top:32px;max-width:640px;margin:0 auto}
.appfacts{background:var(--bg);padding:46px 0 54px}
.appfacts-in{max-width:760px}
.appfacts h2{font-size:1.35rem;font-weight:800;margin-bottom:20px}
.appfacts ul{list-style:none;margin:0;padding:0;display:grid;gap:15px}
.appfacts li{display:flex;gap:12px;align-items:flex-start}
.appfacts li i{flex:none;width:19px;height:19px;border-radius:50%;background:var(--gold);
  margin-top:3px;position:relative}
.appfacts li i::after{content:"";position:absolute;left:6px;top:4px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.appfacts li b{display:block;color:var(--navy);font-family:var(--head);font-weight:700;font-size:.98rem}
.appfacts li span{display:block;color:var(--gray);font-size:.9rem;line-height:1.5}
.appfacts-note{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--border);
  color:var(--gray);font-size:.9rem}
.appfacts-note a{color:var(--gold-deep);font-weight:600}
.appfacts-note a:hover{text-decoration:underline}

@media (max-width:900px){
  .appband-in{grid-template-columns:1fr;gap:32px;padding:44px 24px 0}
  .appband-more{margin-bottom:0}
  .appband-stage{padding:0 0 44px}
  .appstrip{flex-direction:column;text-align:center}
  .appstrip-tx{text-align:center}
  .appshow-rail{flex-wrap:wrap;gap:18px}
  .appshow-rail .appph{width:180px!important}
}
@media (max-width:520px){
  .appqr{display:none}
  .appband-cta{gap:16px}
}