/* Hero (v5.html): the headline in anti-colour — it prints the difference with the field behind it,
   so it reads near-white over the purple and purple over the lime glass mark, never white on lime.
   The blend has to reach the canvas, so the body gives up its own stacking context (z-index: auto)
   and its children take the layer it held. Loaded after hero-v3.css. */
.stage__body { z-index: auto; }
.stage__text > * { position: relative; z-index: 2; }
.stage__title { mix-blend-mode: difference; }
/* each half of the headline on one line ("Payments are technology." / "Business is people."); the
   first is wider than the copy column and runs on over the card, as the headline is meant to */
.stage__title > [data-scramble] { white-space: nowrap; }
/* the headline scrambles in with the copy (scripts/motion.js): until then the load intro keeps it hidden */
.js-motion.is-intro:not(.intro-4) .stage__title { visibility: hidden; }

/* the top bar: the wordmark larger, the button a size up (in-btn--m in v5.html instead of the s of
   hero-v3.css). The wordmark is five layers, one per letter: each is the whole SVG as a mask, cut
   down to its letter by a clip (the edges halfway between the letters' outlines), over a vertical
   gradient 2.6 times its height — brand lime on top, then a light glint and purple, black below. At
   rest the black end shows; under the pointer (or keyboard focus) the gradient slides down, so each
   letter fills with lime from the top, one after another from the first; on the way out the black
   rises back up the same way. Either way the gradient runs a pixel past the box, so no edge row is
   left bare (it cut off the round bottoms of c, a and s), and the glint and purple stay out of view */
.site-header .header__wordmark { position: relative; display: block; height: 22px; aspect-ratio: 438.3 / 96.49; }
.site-header .header__wordmark > span {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--green) 0%, var(--green) 41%, #efffc2 46%, #5a35c0 52%, var(--black) 58%, var(--black) 100%) 0 calc(100% + 1px) / 100% 260% no-repeat;
  -webkit-mask: url("../assets/incas-wordmark-black.svg") center / contain no-repeat;
          mask: url("../assets/incas-wordmark-black.svg") center / contain no-repeat;
  transition: background-position .5s cubic-bezier(.4, 0, .2, 1);
}
.site-header .header__wordmark > span:nth-child(1) { clip-path: inset(0 92.43% 0 0); }
.site-header .header__wordmark > span:nth-child(2) { clip-path: inset(0 69.22% 0 7.57%); transition-delay: 80ms; }
.site-header .header__wordmark > span:nth-child(3) { clip-path: inset(0 45.35% 0 30.78%); transition-delay: 160ms; }
.site-header .header__wordmark > span:nth-child(4) { clip-path: inset(0 20.95% 0 54.65%); transition-delay: 240ms; }
.site-header .header__wordmark > span:nth-child(5) { clip-path: inset(0 0 0 79.05%); transition-delay: 320ms; }
.site-header .header__logo:focus-visible .header__wordmark > span { background-position: 0 -1px; }
@media (hover: hover) { .site-header .header__logo:hover .header__wordmark > span { background-position: 0 -1px; } }
@media (prefers-reduced-motion: reduce) { .site-header .header__wordmark > span { transition-duration: .01s; transition-delay: 0s; } }
/* "Become a partner" set like the section links on the left: the same 14/20 type, regular weight */
.site-header .header__link { font-weight: 400; }
@media (min-width: 1441px) {
  .site-header .header__wordmark { height: calc(22 * var(--s)); }
  .site-header .header__cta {
    height: calc(44 * var(--s)); padding: 0 calc(20 * var(--s)); border-radius: calc(12 * var(--s));
    font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s));
  }
}

/* the geography above the headline (in place of the one-line eyebrow of hero-v3.css): a lime globe,
   the markets in white, the note after them muted */
.stage__geo { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--space-6); font-size: 18px; line-height: 26px; color: rgba(255, 255, 255, .72); }
.stage__geo svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--green); }
.stage__geo b { font-weight: 500; color: var(--white); }
@media (min-width: 1441px) {
  .stage__geo { gap: calc(10 * var(--s)); margin-bottom: calc(24 * var(--s)); font-size: calc(18 * var(--s)); line-height: calc(26 * var(--s)); }
  .stage__geo svg { width: calc(22 * var(--s)); height: calc(22 * var(--s)); margin-top: calc(2 * var(--s)); }
}

/* the headline a fifth smaller than in hero-v3.css on landscape screens, and the glass mark too: 48%
   of the card's height instead of 60% (placement() in v5.html), its stand-ins with it */
@media (min-aspect-ratio: 1001/1000) {
  .stage__title { font-size: clamp(32px, 4vw, 57.6px); }
  .stage__fallback, .stage__intro { height: 48%; }
}
@media (min-aspect-ratio: 1001/1000) and (min-width: 1441px) {
  .stage__title { font-size: calc(57.6 * var(--s)); }
}

/* the facts on landscape screens: the names a size up. In one row they need more room than the corner
   has below 1440px, so there they stack (hero-v3.css does so below 1280px) and the copy keeps its width */
@media (min-aspect-ratio: 1001/1000) {
  .stage__lead { text-wrap: pretty; } /* the copy column is narrower now: no lone last word */
  .stage__fact dt { font-size: 20px; line-height: 28px; }
}
@media (min-aspect-ratio: 1001/1000) and (max-width: 1439px) {
  .stage__facts { flex-direction: column; gap: var(--space-4); }
  .stage__fact { padding: 0; border-left: 0; }
}
@media (min-aspect-ratio: 1001/1000) and (min-width: 1441px) {
  .stage__fact dt { font-size: calc(20 * var(--s)); line-height: calc(28 * var(--s)); }
}

/* the copy's left edge on landscape screens, by eye: the button's box is the line. The headline's
   capitals (P, B in Stolzl) carry 0.09em of side bearing and the globe's circle sits 2px inside its
   icon box, so both looked set in from the button; they step back by as much. The lead's own bearing
   (about half a pixel) is left as is. */
@media (min-aspect-ratio: 1001/1000) {
  .stage__title { margin-left: -0.09em; }
  .stage__geo svg { margin-left: -2px; }
}
@media (min-aspect-ratio: 1001/1000) and (min-width: 1441px) {
  .stage__geo svg { margin-left: calc(-2 * var(--s)); }
}

/* Safari drops the card's rounded corners when a child blends (mix-blend-mode on the headline) over
   the shader canvas: overflow: hidden no longer clips the composited layers. A clip-path does, in
   every browser, and follows the same radius as hero-v3.css (20px, scaled above 1440px). */
.stage { clip-path: inset(0 round var(--radius-lg)); }
@media (min-width: 1441px) { .stage { clip-path: inset(0 round calc(20 * var(--s))); } }

/* ---------- Portrait screens (phones): the purple card is exactly the screen's height ----------
   Three rows: the mark's room on top takes whatever the copy and the facts leave (never less than
   140px), the copy, then the facts in one row. The mark (the shader's glass one, placed by
   placement() in v5.html, and the intro's grey one, placed by scripts/motion.js) sits in the middle
   of that room, 82% of its height and at most 80vw. On very short screens the card grows past the screen instead of
   squeezing the copy. The desktop layout is untouched. */
.stage__mark { display: none; }
@media (max-aspect-ratio: 1/1) {
  .stage {
    --stage-h: max(calc(100svh - var(--bar-h) - var(--stage-gap)), 480px);
    height: auto; min-height: var(--stage-h);
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(140px, 1fr) auto auto;
    align-items: start; align-content: stretch;
    row-gap: var(--space-5); padding-top: var(--space-4); padding-bottom: var(--space-6);
  }
  .stage__mark { display: block; grid-row: 1; grid-column: 1; align-self: stretch; }
  /* the intro's grey mark and the no-WebGPU one, where placement() draws the glass mark: the centre and
     height of the mark's room are measured by scripts/motion.js (--mark-x/-y/-h); the fallbacks only
     matter until it has run */
  .stage__fallback, .stage__intro { left: var(--mark-x, 50%); top: var(--mark-y, 28%); height: var(--mark-h, min(30svh, 70vw)); }
  .stage__body { grid-row: 2; grid-column: 1; padding-top: 0; }
  .stage__facts { grid-row: 3; grid-column: 1; }
  /* the copy, tighter: a smaller geography line, centred with its globe in the run of the text, the
     headline, then the button — no lead paragraph on phones */
  .stage__geo { display: block; margin-bottom: var(--space-4); font-size: 14px; line-height: 20px; }
  .stage__geo svg { display: inline-block; width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: -3px; }
  .stage__geo-note { display: block; } /* the note on a line of its own, not split across two */
  /* three lines: "Payments are / technology. / Business is people." — the type follows the card's
     width (screen minus 2 × 8px gap and 2 × 20px padding) so that "Business is people." (about
     8.6em) stays on one line, while the longer first line wraps */
  .stage__title { font-size: min(40px, calc((100vw - 56px) / 8.9)); }
  .stage__title > [data-scramble] { white-space: normal; }
  .stage__lead { display: none; }
  .stage__cta { margin-top: var(--space-6); }
  /* the facts side by side, split by a thin rule, as on the desktop */
  .stage__facts { flex-direction: row; gap: 0; }
  .stage__fact { flex: 1 1 0; min-width: 0; padding: 0 var(--space-3); border-left: 1px solid rgba(255, 255, 255, .2); }
  .stage__fact:first-child { padding-left: 0; border-left: 0; }
  .stage__fact dt { font-size: 13px; line-height: 18px; }
  .stage__fact dd { font-size: 12px; line-height: 16px; }
  /* with scripts/hero-facts.js: one fact at a time in the same place, taking turns every 3 s —
     the one leaving drifts up and blurs away, the next rises in from below */
  .stage__facts.is-rotating { display: grid; }
  .stage__facts.is-rotating .stage__fact {
    grid-area: 1 / 1; padding: 0; border-left: 0;
    opacity: 0; transform: translateY(10px); filter: blur(4px);
    transition: opacity .45s ease-in-out, transform .45s ease-in-out, filter .45s ease-in-out;
  }
  .stage__facts.is-rotating .stage__fact.is-current { opacity: 1; transform: none; filter: none; }
  .stage__facts.is-rotating .stage__fact.is-exit { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
  /* the copy, the button and the facts centred under the mark */
  .stage__text { align-items: center; margin: 0 auto; text-align: center; }
  .stage__facts { text-align: center; }
  .stage__facts.is-rotating .stage__fact dt { font-size: 15px; line-height: 22px; }
  .stage__facts.is-rotating .stage__fact dd { font-size: 14px; line-height: 20px; }
}
@media (max-aspect-ratio: 1/1) and (prefers-reduced-motion: reduce) {
  .stage__facts.is-rotating .stage__fact { transition: none; }
}
/* short phones (iPhone SE and the like): the mark may shrink further and the button comes closer, so
   the card still ends at the screen's bottom edge */
@media (max-aspect-ratio: 1/1) and (max-height: 720px) {
  .stage { grid-template-rows: minmax(110px, 1fr) auto auto; row-gap: var(--space-4); }
  .stage__cta { margin-top: var(--space-5); }
}

/* Phones and tablets: the top bar is the wordmark alone, centred — the hero's own button is the call to action */
@media (max-width: 900px) {
  .site-header .header__cta { display: none; }
  .site-header .header__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}