/* ============================================================================
   cta.css — the homepage's calls to action, loaded after noir.css.

   One way to act is always in reach: the hero's badge on the first screen,
   CTAs on the beats of the scroll demo, one per section after it, a slim
   dock in between, and a QR code on desktop (an iPhone app cannot be
   installed from a laptop). Same language as the rest of noir: ink ground,
   hairlines, Space Mono labels, cobalt as the single accent.
   ============================================================================ */

/* -- Shared pieces ------------------------------------------------------------ */

/* A text CTA: mono caps on a cobalt underline (matches .what__more). */
.cta-link {
  display: inline-block;
  font: 400 12px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: color 200ms var(--craft-ease-io, ease);
}
.cta-link:hover,
.cta-link:focus-visible { color: var(--accent); }

/* A solid cobalt pill, for the dock and the Android swap. */
.cta-pill,
.cta-dock__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms ease, transform 150ms ease;
}
.cta-pill:hover,
.cta-dock__btn:hover { background: var(--accent-hover); color: var(--accent-fg); transform: translateY(-1px); }

/* QR code: dark modules on a paper tile in every theme, or phones cannot
   read it. Only where it helps: a wide screen with a mouse. */
.cta-qr {
  display: none;
  align-items: center;
  gap: 12px;
  color: var(--fg-subtle);
  text-decoration: none;
  font: 400 11px/1.45 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cta-qr img,
.cta-dock__qr img {
  box-sizing: content-box;
  padding: 5px;
  background: #fff;
  border-radius: 8px;
}
.cta-qr img { width: 46px; height: 46px; transition: transform 200ms var(--craft-ease, ease); transform-origin: left center; }
.cta-qr:hover { color: var(--fg); }
.cta-qr:hover img { transform: scale(1.9); }
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .cta-qr { display: inline-flex; }
}

/* -- 1. Hero: the first screen always shows a way to act --------------------- */
.hero-intro .walsh-hero-div-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 100%;
}
.hero-intro .app-cta-cluster { margin-top: 0; }
.hero-intro .cta-qr { padding-left: clamp(12px, 1.4vw, 20px); border-left: var(--noir-hair); }
/* Rating, then the no-download path, stacked under the badge row. */
.hero-cta-sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
@media (max-width: 991px) {
  .hero-intro .walsh-hero-div-block { align-items: center; }
  .hero-cta-sub { align-items: center; }
}

/* Laptops: noir sizes the headline by width, so on a 1366×768 screen the
   block ran 40px past the fold and the badge was cut off. Tie the type and
   the gaps to the viewport height as well, so the badge row always sits on
   the first screen. */
@media (min-width: 992px) {
  .hero-intro {
    gap: min(2em, 2.8vh);
    min-height: calc(100vh - 128px);
    min-height: calc(100dvh - 128px);
  }
  .walsh-background-darkgreen .hero-intro .walsh-heading-large-black {
    font-size: min(max(4.25rem, 5.2vw), 9rem, 12vh) !important;
  }
  .hero-intro .craft-rule { margin: 0; }
}

/* Phones: the stacked hero spent its first screen on air. Tighten the top
   and the gaps so the badge clears the cookie banner on a first visit. */
@media (max-width: 991px) {
  .hero-intro { padding-top: 1em; gap: 1.1em; }
}
@media (max-width: 767px) {
  .hero-intro .walsh-hero-div-block { margin-top: 4px; gap: 14px; }
  .hero-intro .app-rating { text-align: center; }
}

/* -- 3. CTAs on the beats of the scroll demo -------------------------------- */
.step-cta { margin-top: 22px; }
.step-close { margin-top: 26px; }
.hero-step .step-close__lede {
  max-width: none;
  margin: 0 0 16px;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.step-close__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}
@media (max-width: 991px) {
  .step-cta { margin-top: 12px; }
  .step-close { margin-top: 14px; }
  .hero-step .step-close__lede { margin-bottom: 10px; }
  .step-close__row { justify-content: center; gap: 10px 18px; }
  .step-close .app-store-badge img { height: 44px; }
}
/* Captions that are faded out must not catch clicks meant for the live one
   (they pin in the same place). */
.walsh-background-darkgreen.is-js .hero-step__body { pointer-events: none; }
.walsh-background-darkgreen.is-js .hero-step.is-active .hero-step__body { pointer-events: auto; }

/* -- 4. Sections ------------------------------------------------------------ */

a.proof-stat--link {
  color: inherit;
  text-decoration: none;
  transition: background-color 200ms ease;
}
a.proof-stat--link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
a.proof-stat--link span span { color: var(--accent); }

.reviews-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: clamp(32px, 4vw, 48px);
}
.reviews-cta__note {
  margin: 0;
  text-align: center;
  font: 400 11px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.reviews-cta__note strong { color: var(--fg); font-weight: 400; }

.walsh-cta-center-wrapper .app-cta-cluster { justify-content: center; }
.walsh-cta-center-wrapper .cta-qr { text-align: left; }
.final-try { margin-top: 22px; }

/* -- 2. The dock ------------------------------------------------------------- */
.cta-dock {
  position: fixed;
  z-index: 50;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border: var(--noir-hair, 1px solid var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(calc(100% + 28px));
  opacity: 0;
  visibility: hidden;
  transition: transform 420ms var(--craft-ease, ease), opacity 260ms ease, visibility 0s linear 420ms;
}
.cta-dock[hidden] { display: none; }
.cta-dock.is-on {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform 420ms var(--craft-ease, ease), opacity 260ms ease, visibility 0s;
}
.cta-dock__qr { display: none; line-height: 0; }
.cta-dock__qr img { display: block; width: 56px; height: 56px; }
.cta-dock__text {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cta-dock__text strong {
  font: 400 18px/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--fg);
}
.cta-dock__sub {
  font: 400 10px/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.cta-dock__sub--desk { display: none; }
.cta-dock__try { display: none; }
.cta-dock__btn { min-height: 44px; padding: 0 20px; }

/* Desktop: a compact card in the corner, QR first, so a laptop visitor can
   move straight to their phone. It sits in the left column's empty corner
   while the demo runs. */
@media (min-width: 992px) {
  .cta-dock {
    left: var(--content-padding, 32px);
    right: auto;
    bottom: 24px;
    gap: 16px;
    padding: 10px 12px 10px 10px;
    border-radius: 18px;
  }
  .cta-dock__text { flex: none; }
  .cta-dock__try {
    display: inline-block;
    font: 400 11px/1.4 var(--font-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-subtle);
    text-decoration: none;
    border-bottom: 1px solid var(--border-strong);
    padding-bottom: 3px;
    margin-right: 8px;
  }
  .cta-dock__try:hover { color: var(--fg); border-bottom-color: var(--accent); }
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  /* A laptop cannot install an iPhone app; the QR is the action, so the card
     drops the button and stays small enough to sit over any section. */
  .cta-dock { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 6px; padding-right: 18px; }
  .cta-dock[hidden] { display: none; }
  .cta-dock__qr { display: block; grid-row: 1 / 3; }
  .cta-dock__text { align-self: end; }
  .cta-dock__sub--touch { display: none; }
  .cta-dock__sub--desk { display: block; }
  .cta-dock__btn { display: none; }
  .cta-dock__try { align-self: start; justify-self: start; margin: 0; }
}

/* Phones: the demo pins its stage at the top and the caption under it, so
   the caption ran beneath the dock. While the dock has the bottom of the
   screen, the stage gives up the dock's height (eased, never a jump), and
   the caption moves up with it. --look-h and the caption's top repeat
   noir.css's formulas with the room taken off 50dvh. */
@property --dock-room {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
@media (max-width: 991px) {
  html { --dock-room: 0px; transition: --dock-room 420ms var(--craft-ease, ease); }
  html.has-dock { --dock-room: 76px; }
  .stage {
    --look-h: min(calc(50vh - var(--dock-room)), 460px, calc((100vw - 48px) * 1.25));
    --look-h: min(calc(50dvh - var(--dock-room)), 460px, calc((100vw - 48px) * 1.25));
  }
  .walsh-background-darkgreen.is-js .hero-step__body {
    top: calc(155px + min(calc(50vh - var(--dock-room)), 460px, (100vw - 48px) * 1.25));
    top: calc(155px + min(calc(50dvh - var(--dock-room)), 460px, (100vw - 48px) * 1.25));
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-dock,
  .cta-dock.is-on { transition: opacity 1ms, visibility 0s; transform: none; }
  .cta-qr:hover img { transform: none; }
}

/* -- 6. Android: the badge is swapped for a browser CTA (js/cta.js) ---------- */
.android-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.android-cta__note {
  font: 400 10px/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The swapped pill already says "try it in your browser"; drop the
   text links that would repeat it right beside it. */
.is-android .hero-try,
.is-android .final-try,
.is-android .step-close__row > .cta-link { display: none; }
.is-android .cta-qr,
.is-android .cta-dock__qr { display: none !important; }