/*
 * Hero install CTA: one platform-aware call to action, shared by every
 * marketing hero that offers both the app and web signup
 * (landing.html / services.html / shops.html).
 *
 * The rule all three now follow, which they did not before -- the landing was
 * download-first and services/shops 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;
  --cta-arrow: 14px;

  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);
    --cta-arrow: 16px;
  }
}

/* --- 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 --------------------------------------------------- */

/* Two shapes of the same CTA, one per page family: the landing carries a
   <p class="hero__web"> and services/shops carry the .btn pill they already
   had. Both are the same 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. */
.hero__cta .hero__web,
.hero__cta .hero__actions {
  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,
.hero__cta .hero__actions .btn {
  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,
.hero__cta .hero__actions .btn: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,
.hero__cta .hero__actions .btn:focus-visible { outline: 2px solid var(--cta-accent); outline-offset: 4px; }
.hero__cta .hero__actions .btn svg { width: var(--cta-arrow); height: var(--cta-arrow); }
/* The arrow points at the next step, so in Hebrew and Arabic it points left. */
html[dir="rtl"] .hero__cta .hero__actions .btn svg { transform: scaleX(-1); }

/* --- the onboard card's badge pair -------------------------------------- */

/* The self-serve card leads with the stores, mirroring the hero. margin-top:
   auto floors the badges so they sit level with the concierge card's button
   however far the two paragraphs above them diverge in length.
   The card keeps its own order in every state: unlike the hero it has no QR
   and no competing pill, so "install the app, or start on the web underneath"
   already reads correctly on a desktop. What it takes from the shared rule is
   which of the two badges is the visitor's. */
.onboard__install {
  --badge-h: 42px;
  --badge-own-h: 50px;
  --badge-alt-h: 28px;
  --badge-alt-op: 0.45;
  --badge-focus: var(--brand, #075E54);

  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.onboard__web { margin: 16px 0 0; text-align: center; font-size: 13.5px; }
.onboard__web a { color: var(--brand); font-weight: 600; border-bottom: 1px solid transparent; }
.onboard__web a:hover { border-bottom-color: var(--brand); }

/* --- 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;
}