/* assets/css/apps.css
 * The apps page. Three products on one page, so the job of the layout is to
 * make it obvious which one somebody is supposed to download.
 */

.apps-hero {
  display: flex;
  align-items: center;
  min-height: var(--hero-h);
  padding: 40px 0;
  background: var(--band);
}

/* Same split as pricing — 1fr copy to 1.16fr art — so this hero sits on the
   same grid as the one beside it in the nav. */
/* The art takes more of the row than the other heroes do — 715px against
   pricing's 640. It carries three device screens, and at 640 the till's
   receipt column stopped being readable.
   1.45fr with a 44px gap leaves the copy 493px, which is the floor before
   "Three apps, one club" starts breaking badly at --hero 58px. */
.apps-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: 44px;
  align-items: center;
}

/* BAKED ONTO THE BAND, NOT TRANSPARENT.
 *
 * WebP stores alpha as its own plane and this drawing has a lot of edge, so
 * with transparency it came out several times heavier than any other hero.
 * Flattened onto --band it is 106KB.
 *
 * THE COLOUR IS #a6e8c4, which is --verde-300. I baked #b7e6c9 the first time
 * and it showed as a visible rectangle around the art — the value is checked
 * against tokens.css now rather than remembered.
 *
 * THE COST: the mint is part of the picture. If --band ever changes, re-export
 * from src/art/hero-apps-src.png — the transparent original, kept in the repo
 * but outside assets/ so the 1MB master is not deployed alongside the 106KB
 * one the page actually uses. */
.apps-hero__art {
  width: 100%;
  height: auto;
}

.apps-hero > .container {
  width: 100%;
  max-width: var(--hero-w);
}

.apps-hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--hero);
  line-height: var(--hero-lh);
  --hard-shadow-offset: 3px;
}

.apps-hero__lead {
  max-width: 600px;
  margin-top: 20px;
  font-size: var(--lead);
  line-height: 29px;
  color: var(--ink-soft);
}

/* ---- The three apps ---------------------------------------------------- */

.apps {
  padding-top: 70px;
}

.app + .app {
  margin-top: 26px;
}

.app {
  padding: 40px 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

/* WHO IT IS FOR, BEFORE WHAT IT IS CALLED.
   Somebody landing here is working out which of three apps they need, and
   "For your members" answers that faster than "Verde" does. */
.app__who {
  font-family: var(--font-accent);
  font-size: 19px;
  line-height: 24px;
  color: var(--brand);
}

.app__name {
  margin-top: 4px;
  font-size: var(--h3);
  line-height: var(--h3-lh);
}

.app__lead {
  max-width: 640px;
  margin-top: 12px;
  font-size: var(--lead);
  line-height: 29px;
  color: var(--ink-soft);
}

.app__points {
  margin-top: 22px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 34px;
}

.app__points li {
  position: relative;
  padding-left: 30px;
  font-size: var(--body);
  line-height: 25px;
}

.app__points li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 19px;
  height: 19px;
  background: url("../img/bullet-check.png") center / contain no-repeat;
}

/* ---- Store links -------------------------------------------------------- */

.app__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.app__store {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-btn);
  background: var(--forest);
  color: var(--white);
  font-size: var(--body);
  text-decoration: none;
}

.app__store:hover { opacity: 0.88; }

/* NOT A DISABLED BUTTON. A greyed-out button invites a click that does
   nothing; this is a statement, so it is styled as one. */
.app__soon {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-btn);
  color: var(--ink-soft);
  font-size: var(--body);
}

.app__note {
  margin-top: 26px;
  font-size: var(--body);
  line-height: 25px;
  color: var(--ink-soft);
}

.app__note a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Closing ----------------------------------------------------------- */

.apps-foot {
  padding: 70px 0 90px;
  text-align: center;
}

.apps-foot__lead {
  max-width: 560px;
  margin: 0 auto 26px;
  font-size: var(--lead);
  line-height: 29px;
  color: var(--ink-soft);
}

@media (max-width: 1100px) {
  .apps-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  /* The drawing goes first on a narrow screen: it says "three apps" faster
     than the headline does. */
  .apps-hero__art {
    order: -1;
    max-width: 560px;
  }
}

@media (max-width: 900px) {
  .app {
    padding: 30px 24px;
  }

  .app__points {
    grid-template-columns: minmax(0, 1fr);
  }

  .apps-foot {
    padding: 50px 0 64px;
  }
}