/*
 * Hero install CTA: one platform-aware call to action, shared by every
 * marketing hero that offers both the app and web signup
 * (landing.html / pricing.html).
 *
 * The rule they now follow, which they did not before -- the landing was
 * download-first while the retired services/shops verticals were signup-first,
 * so the same visitor was asked for two different things depending on which
 * page an ad dropped them on:
 *
 *   phone   -> the visitor's own store is the primary CTA, the other store is
 *              demoted to a recognition mark, web signup drops to one line of
 *              text underneath it
 *   desktop -> web signup is the primary CTA, the QR is the bridge to a phone,
 *              and both badges shrink, because neither one is installable from
 *              the machine that is reading them
 *
 * CSS decides first and JS only corrects. The default below is the phone
 * layout, because that is where nearly all of this traffic lands: a Meta ad
 * click opens inside the Facebook or Instagram in-app browser, on a phone. So
 * the common case renders correctly with no script, no flash of the wrong CTA,
 * and no UA read at all. Two things then refine it:
 *
 *   1. the pointer/hover media query below, which identifies a real desktop
 *      before any script runs -- it is what stops a crawler-shaped or JS-off
 *      desktop visitor being handed two badges they cannot install;
 *   2. html[data-surface] and html[data-platform], stamped by
 *      /includes/install-blocks.js. Only a UA read can tell iOS from Android,
 *      so only the script can pick *which* badge is the primary one.
 *
 * The media query is scoped to html:not([data-surface="mobile"]) rather than
 * duplicated as a second desktop block: a media query adds no specificity, so
 * without that guard a phone whose UA the script had already identified could
 * still be pulled into the desktop layout. There is deliberately no desktop
 * value of data-surface driving anything -- "not known to be mobile" plus a
 * fine pointer is the whole desktop test.
 *
 * Colours come in as --cta-* custom properties so the dark landing hero and
 * the light services/shops heroes can share every rule below. Each one falls
 * back to a literal, so a page that sets none of them still renders.
 */

.hero__cta {
  /* Palette hooks. Overridden per page, next to that page's hero tokens. */
  --cta-ink: var(--ink, #0e1513);
  --cta-ink-2: var(--ink-2, #3a4542);
  --cta-ink-3: var(--ink-3, #6b7773);
  --cta-rule: var(--hairline, rgba(14,21,19,0.14));
  --cta-accent: var(--accent, #25D366);
  --cta-pill-bg: var(--ink, #0e1513);
  --cta-pill-fg: #ffffff;
  --cta-qr-bg: var(--surface, #ffffff);
  --cta-qr-border: var(--hairline, rgba(14,21,19,0.14));
  --cta-qr-code: #0e1513;
  --cta-top: 30px;

  /* Download-first. Every value here is switched as a set by the media query
     further down; nothing below this block hardcodes a state. */
  --cta-install-order: 1;
  --cta-web-order: 2;
  --badge-h: 48px;
  --badge-own-h: 60px;
  --badge-alt-h: 32px;
  /* Matches the onboard card and the footers. A hero on a dark background
     raises it -- see the note in landing.shell.html. */
  --badge-alt-op: 0.45;
  --badge-focus: var(--cta-accent);
  --cta-qr-display: none;
  --cta-note-display: inline;
  --cta-pad: 0;
  --cta-radius: 0;
  --cta-bg: transparent;
  --cta-fg: var(--cta-ink);
  --cta-size: 14px;
  --cta-weight: 600;
  --cta-underline: 1px solid var(--cta-rule);
  --cta-hover-underline: var(--cta-accent);
  --cta-hover-lift: 0;
  --cta-hover-shadow: none;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin-top: var(--cta-top);
}

@media (hover: hover) and (pointer: fine) {
  html:not([data-surface="mobile"]) .hero__cta {
    /* Web-first. A machine with a mouse cannot install either app, so the
       badges stop being a call to action and the QR becomes the way across. */
    --cta-install-order: 2;
    --cta-web-order: 1;
    /* Nothing here is installable, so the badges stop being a call to action
       and shrink to recognition marks beside the QR. */
    --badge-h: 38px;
    --badge-own-h: 38px;
    --badge-alt-h: 38px;
    --badge-op: 0.8;
    /* No badge is promoted here, so none is demoted either: an iPad driven by
       a mouse is the only way to reach this state with a known platform, and
       one badge dimmer than the other would be meaningless on it. */
    --badge-alt-op: 0.8;
    --cta-qr-display: flex;
    --cta-note-display: none;
    --cta-pad: 16px 26px;
    --cta-radius: 999px;
    --cta-bg: var(--cta-pill-bg);
    --cta-fg: var(--cta-pill-fg);
    --cta-size: 16px;
    --cta-weight: 600;
    --cta-underline: 0;
    --cta-hover-underline: transparent;
    --cta-hover-lift: -1px;
    --cta-hover-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  }
}

/* --- the badge pair, everywhere -----------------------------------------
 *
 * This half is not about the hero. Every install block on the site carries
 * [data-install] (that attribute is also the analytics placement and the Play
 * install referrer slot), so keying off it means the hero, the onboard card
 * and the four site footers cannot disagree about which badge a visitor's
 * phone should be offered. Only the scale differs, and that is what the tokens
 * are for -- a placement sets three heights and inherits the behaviour.
 *
 * Layout stays with the placement. A footer row and the hero's badges-plus-QR
 * strip are different shapes and should be; what is shared is the answer to
 * "which store is this person's", which is the same answer in all of them. */

/* The four tokens a placement sets, and what they default to when it sets
   none. They are read as var() fallbacks rather than declared on
   [data-install] itself, which matters: the hero sets its scale on .hero__cta,
   an ancestor of the block, and a declaration on [data-install] would shadow
   the inherited value rather than defer to it.

     --badge-h      both stores, platform unknown
     --badge-own-h  the visitor's store
     --badge-alt-h  the other one
     --badge-alt-op how far the other one recedes                             */

[data-install] [data-store] {
  /* The demoted badge is 24-32px of artwork depending on placement, well under
     a thumb. min-height keeps the tap target at 44px however small the badge
     inside it is drawn; the anchor has no background, so the extra hit area is
     invisible and the row stays centred on the artwork. */
  display: flex; align-items: center; min-height: 44px;
  border-radius: var(--badge-radius, 8px);
  transition: transform .16s ease;
}
[data-install] [data-store]:hover { transform: translateY(-2px); }
[data-install] [data-store]:focus-visible { outline: 2px solid var(--badge-focus, var(--accent, #25D366)); outline-offset: 4px; }
/* Height is the shared dimension: the two badges have different aspect ratios
   and both vendors size by height, so never constrain their width. */
[data-install] [data-store] img {
  height: var(--badge-h, 46px); width: auto; display: block;
  /* Opacity transitions, height does not. The script's correction lands after
     first paint on a phone, and animating the promoted badge growing into
     place would advertise the very swap the CSS default exists to hide. */
  opacity: var(--badge-op, 1); transition: opacity .16s ease;
}

/* The visitor's own store, once the script has read the UA. First in the row
   and the largest thing in the block. */
html[data-platform="ios"] [data-install] [data-store="ios"],
html[data-platform="android"] [data-install] [data-store="android"] { order: -1; }
html[data-platform="ios"] [data-install] [data-store="ios"] img,
html[data-platform="android"] [data-install] [data-store="android"] img {
  height: var(--badge-own-h, var(--badge-h, 46px)); opacity: 1;
}

/* The store this phone cannot install from. Kept rather than hidden -- "it is
   on both" is worth saying, and a wrong guess still leaves a working link --
   but small and dim enough that it never reads as a choice to make. */
html[data-platform="ios"] [data-install] [data-store="android"] img,
html[data-platform="android"] [data-install] [data-store="ios"] img {
  height: var(--badge-alt-h, var(--badge-h, 46px)); opacity: var(--badge-alt-op, 1);
}
html[data-platform="ios"] [data-install] [data-store="android"]:hover img,
html[data-platform="android"] [data-install] [data-store="ios"]:hover img { opacity: 1; }

/* --- the hero's badge strip --------------------------------------------- */

.hero__cta .hero__install {
  order: var(--cta-install-order);
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px;
  margin: 0;
}
.hero__cta .hero__badges { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* --- the QR bridge ---------------------------------------------------- */

.hero__cta .hero__qr {
  display: var(--cta-qr-display);
  align-items: center; gap: 14px;
  padding: 12px 16px 12px 12px; border-radius: 18px;
  border: 1px solid var(--cta-qr-border); background: var(--cta-qr-bg);
}
html[dir="rtl"] .hero__cta .hero__qr { padding: 12px 12px 12px 16px; }
.hero__cta .hero__qr-code {
  flex: 0 0 auto; width: 88px; height: 88px; padding: 7px;
  border-radius: 10px; background: #fff; color: var(--cta-qr-code);
}
.hero__cta .hero__qr-code svg { display: block; width: 100%; height: 100%; }
.hero__cta .hero__qr-label { max-width: 130px; font-size: 12.5px; line-height: 1.45; color: var(--cta-ink-2); }

/* --- the web signup --------------------------------------------------- */

/* The landing carries a <p class="hero__web">. It is one element in both
   states -- a pill on a desktop, a line of text on a phone -- rather than two
   elements toggled, so the copy exists once and there is nothing to keep in
   sync. (There used to be a second shape, a .btn pill, for the page family
   that carried .hero__actions instead; it went with services.html and
   shops.html.) */
.hero__cta .hero__web {
  order: var(--cta-web-order);
  margin: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 14px; color: var(--cta-ink-3);
}
.hero__cta .hero__web-note { display: var(--cta-note-display); }

.hero__cta .hero__web-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: var(--cta-pad);
  border: 0; border-radius: var(--cta-radius);
  border-bottom: var(--cta-underline);
  background: var(--cta-bg); color: var(--cta-fg);
  font-size: var(--cta-size); font-weight: var(--cta-weight);
  white-space: nowrap;
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
}
.hero__cta .hero__web-cta:hover {
  border-bottom-color: var(--cta-hover-underline);
  transform: translateY(var(--cta-hover-lift));
  box-shadow: var(--cta-hover-shadow);
}
.hero__cta .hero__web-cta:focus-visible { outline: 2px solid var(--cta-accent); outline-offset: 4px; }

/* --- the landing page's closing CTA ------------------------------------- */

/* The onboard card carries the hero's CTA markup verbatim -- .hero__cta,
   .hero__install, .hero__web -- so everything above already applies to it and
   the two CTAs on that page cannot disagree about what to ask for. All that
   differs is scale: this one sits inside a 560px card, not a hero column.
   (It used to be a two-card fork whose left card had its own .onboard__install
   block and deliberately kept badge-first ordering in every state, which meant
   a desktop visitor was shown two badges they could not install and the actual
   action in 13.5px of grey text. Both went with the fork.)

   Specificity is 0,2,0 so these beat the .hero__cta defaults above; the
   desktop rule below is 0,3,0 so it beats these. Order alone would not settle
   either -- a media query contributes no specificity. */
.onboard__card .hero__cta {
  --badge-h: 42px;
  --badge-own-h: 50px;
  --badge-alt-h: 28px;
  --badge-alt-op: 0.45;
  --badge-focus: var(--brand, #075E54);
}

@media (hover: hover) and (pointer: fine) {
  html:not([data-surface="mobile"]) .onboard__card .hero__cta {
    /* Same trade as the hero makes on a desktop: nothing here is installable,
       so the badges stop being a call to action and shrink to recognition
       marks beside the signup pill. Slightly smaller than the hero's 38px
       because the pill they sit next to is the card's whole width. */
    --badge-h: 34px;
    --badge-own-h: 34px;
    --badge-alt-h: 34px;
    --badge-op: 0.8;
    --badge-alt-op: 0.8;
  }
}

/* --- the site footer's badge pair --------------------------------------- */

/* Store badges live under the tagline rather than in a seventh grid column:
   six columns is already the most this row holds at 1200px. The badge artwork
   is the black variant, which is what it is drawn for on this background.
   Identical on all four pages that carry a footer, which is why it lives here
   rather than four times over. */
.site-footer__app { margin-top: 22px; }
.site-footer__badges {
  --badge-h: 36px;
  --badge-own-h: 42px;
  --badge-alt-h: 24px;
  /* The footer is dark on every page it appears on, and both badge artworks
     are black, so it takes the landing hero's value rather than the onboard
     card's 0.45. Same reason: on a dark ground the lower value stops reading
     as a demoted option and starts reading as a rendering fault. */
  --badge-alt-op: 0.55;
  --badge-radius: 7px;

  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}