/* TPP expressive marketing layer: the reference stylesheet (kit D67, rebuilt to the homepage canvas's AA2 by D68).

   PUBLIC MARKETING SURFACES ONLY: the public recruitment and customer sites, decks and social video. Never the partner
   site, the customer app, a sign-in page or any email. Load after tokens/tokens.css (and tokens/components.css if the
   page uses the components), then tpp-motion.js with `defer`. Every value is a --tpp-mkt-* or core token.

   The patterns, each readable whole with no script and under reduced motion:
     .mkt-aurora          the hero's aurora ground, settling once on load (under five seconds)
     [data-mkt-plates]    the hero set-piece: the mark's three plates panning in from the side, once
     .mkt-ground, .mkt-band, .mkt-panel, .mkt-corner, .mkt-page, .mkt-foot   the page's grounds, following the theme
     .mkt-glass           a glass card; add .mkt-glass--hover for the hover and focus ring (nothing lifts)
     [data-mkt-loop]      the product moments, each tile on its own clock from when it comes into view, with the pause control
     .tpp-button.mkt-on-blue  the kit's secondary button on the blue panel and the footer

   Motion runs only when the root element carries .mkt-motion, which the page's first inline script sets unless the
   reader asks for reduced motion (the one line is in guidelines/expressive-layer.md). With no script, no class: every
   pattern shows its final frame. */

/* ---- type and text ---- */
.mkt { color: var(--tpp-mkt-text); }
.mkt-hero-title { font-family: var(--tpp-font-sans); font-weight: var(--tpp-font-weight-regular);
  font-size: var(--tpp-mkt-font-size-hero); line-height: var(--tpp-mkt-line-height-hero);
  letter-spacing: var(--tpp-mkt-letter-spacing-hero); text-wrap: balance; }
.mkt-section-title { font-family: var(--tpp-font-sans); font-weight: var(--tpp-font-weight-regular);
  font-size: var(--tpp-mkt-font-size-section); line-height: var(--tpp-mkt-line-height-section);
  letter-spacing: var(--tpp-mkt-letter-spacing-section); text-wrap: balance; }
.mkt-secondary { color: var(--tpp-mkt-text-secondary); }
.mkt-accent { color: var(--tpp-mkt-accent-strong); }

/* ---- grounds ---- */
.mkt-page { background: var(--tpp-mkt-page); }
.mkt-ground { background: var(--tpp-mkt-gradient-ground); }
.mkt-band { background: var(--tpp-mkt-gradient-band); }
.mkt-panel { background: var(--tpp-mkt-gradient-panel); color: var(--tpp-mkt-text-on-blue); }
.mkt-corner { background: var(--tpp-mkt-gradient-corner); }
.mkt-foot { background: var(--tpp-mkt-foot); color: var(--tpp-mkt-text-on-blue); }

/* The aurora: a layer inside the hero band, so its settle scales the ground and never the copy. */
.mkt-aurora { position: absolute; inset: 0; background: var(--tpp-mkt-gradient-aurora); transform-origin: 50% 100%; }
/* The band under the aurora carries the aurora's foot, so nothing paler ever shows behind it. */
.mkt-aurora-band { background: var(--tpp-mkt-aurora-ground-3); }
.mkt-motion .mkt-aurora { animation: mkt-settle var(--tpp-mkt-duration-drift) var(--tpp-mkt-ease-standard) both; }
/* Scaled from the band's foot, so the foot never lifts off the section below while it settles. */
@keyframes mkt-settle { from { transform: scale(1.08); } to { transform: none; } }

/* ---- the hero set-piece: the plates pan in (D68, as amended the same day) ----
   The plates' final frame is in the markup. With .mkt-motion the plates wait unseen for tpp-motion.js, which slides them
   in from the right one after another, bottom plate first, and rests them in register. If the script never runs, the
   failsafe shows the final frame after 2.5 s. */
[data-mkt-plates] { display: block; overflow: visible; pointer-events: none; }
.mkt-motion [data-mkt-plates] .mkt-plates__group { opacity: 0; animation: mkt-failsafe 1ms 2.5s both; }
@keyframes mkt-failsafe { to { opacity: 1; } }
.mkt-plates__plate--1 { fill: url(#mkt-plate-1); }
.mkt-plates__plate--2 { fill: url(#mkt-plate-2); }
.mkt-plates__plate--3 { fill: url(#mkt-plate-3); }
.mkt-plates__stop--1a { stop-color: var(--tpp-mkt-plate-1-from); } .mkt-plates__stop--1b { stop-color: var(--tpp-mkt-plate-1-to); }
.mkt-plates__stop--2a { stop-color: var(--tpp-mkt-plate-2-from); } .mkt-plates__stop--2b { stop-color: var(--tpp-mkt-plate-2-to); }
.mkt-plates__stop--3a { stop-color: var(--tpp-mkt-plate-3-from); } .mkt-plates__stop--3b { stop-color: var(--tpp-mkt-plate-3-to); }

/* ---- glass ---- */
.mkt-glass { position: relative; border-radius: var(--tpp-mkt-radius); background: var(--tpp-mkt-gradient-glass);
  border: var(--tpp-border-hairline) solid var(--tpp-mkt-glass-edge);
  box-shadow: var(--tpp-mkt-shadow-glass), inset 0 1px 0 var(--tpp-mkt-glass-highlight);
  -webkit-backdrop-filter: blur(var(--tpp-mkt-glass-blur)); backdrop-filter: blur(var(--tpp-mkt-glass-blur)); }
.mkt-glass--pill { border-radius: var(--tpp-radius-full); }
/* The hover ring and glow are drawn once on a pseudo-element and faded in: opacity only, and nothing lifts (D33). */
.mkt-glass--hover::after { content: ""; position: absolute; inset: calc(-1 * var(--tpp-border-hairline)); border-radius: inherit;
  pointer-events: none; opacity: 0; box-shadow: 0 0 0 var(--tpp-border-hairline) var(--tpp-mkt-hover-ring), var(--tpp-mkt-shadow-glow);
  transition: opacity var(--tpp-mkt-duration-instant) var(--tpp-mkt-ease-standard); }
@media (hover: hover) { .mkt-glass--hover:hover::after { opacity: 1; } }
.mkt-glass--hover:focus-within::after { opacity: 1; }

/* ---- buttons: the kit's own button component (tpp-button, D34), unchanged ----
   A marketing page uses the component as the product does: one primary (the page's one filled blue area, D18), then
   secondary and tertiary. The layer adds one thing: on the blue panel and the navy footer a secondary button takes the
   on-blue text and edge (mkt-on-blue), because the interactive blue does not read on blue. An arrow inside a button slides
   4 px on hover. */
.tpp-button.mkt-on-blue { color: var(--tpp-mkt-text-on-blue); border-color: var(--tpp-mkt-text-on-blue-secondary); }
.tpp-button.mkt-on-blue:hover:not(:disabled):not([aria-disabled="true"]),
.tpp-button.mkt-on-blue:active:not(:disabled):not([aria-disabled="true"]) { color: var(--tpp-mkt-text-on-blue); border-color: var(--tpp-mkt-text-on-blue); background-color: var(--tpp-mkt-panel-plate); }
.tpp-button .mkt-arrow { width: var(--tpp-space-5); height: var(--tpp-space-5); flex: none; fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .tpp-button .mkt-arrow { transition: transform var(--tpp-mkt-duration-quick) var(--tpp-mkt-ease-emphasised); }
  .tpp-button:hover .mkt-arrow { transform: translateX(var(--tpp-space-1)); } }

/* ---- the product moments (D64, D65 as amended by D68) ----
   Each tile runs on its own clock (tpp-motion.js): it starts when it comes into view, then loops on its own cycle
   (data-loop, in seconds; the loop token by default) from its own start offset (data-start), so no two tiles land a beat
   together. A beat is any element with data-at (seconds into the cycle; data-off to leave early): it arrives on the
   emphasised curve with no bounce, holds, and every beat leaves together just before the cycle ends. data-fx picks the
   gesture: rise (the default), slide (in from the right), pop (a tag's confirmation), grow (a bar from its start), fade.
   A rotor (data-mkt-rotate, with data-every seconds) moves its children through the positions it names in data-positions,
   as a stack whose top card changes or a carousel. Without script, under reduced motion and when paused, every tile
   rests on its final frame, the markup's own. */
.mkt-ready [data-mkt-tile] [data-at] { transition: opacity var(--tpp-mkt-duration-leave) var(--tpp-mkt-ease-standard),
  transform var(--tpp-mkt-duration-leave) var(--tpp-mkt-ease-standard); }
.mkt-ready [data-mkt-tile] [data-at].is-on { transition-duration: var(--tpp-mkt-duration-arrive); transition-timing-function: var(--tpp-mkt-ease-emphasised); }
.mkt-ready [data-mkt-tile] [data-at]:not(.is-on) { opacity: 0; transform: translateY(var(--tpp-mkt-arrival-distance)) scale(.98); }
.mkt-ready [data-mkt-tile] [data-at][data-fx="slide"]:not(.is-on) { transform: translateX(calc(var(--tpp-mkt-arrival-distance) * 2)); }
.mkt-ready [data-mkt-tile] [data-at][data-fx="pop"]:not(.is-on) { transform: scale(.6); }
.mkt-ready [data-mkt-tile] [data-at][data-fx="fade"]:not(.is-on) { transform: none; }
.mkt-ready [data-mkt-tile] [data-at][data-fx="grow"] { transform-origin: left center; }
.mkt-ready [data-mkt-tile] [data-at][data-fx="grow"]:not(.is-on) { opacity: 1; transform: scaleX(0); }
[data-mkt-rotate] > * { transition: transform var(--tpp-mkt-duration-arrive) var(--tpp-mkt-ease-emphasised),
  opacity var(--tpp-mkt-duration-arrive) var(--tpp-mkt-ease-standard), z-index var(--tpp-mkt-duration-arrive) step-end; }
[data-mkt-progress] { transform-origin: left center; transition: transform var(--tpp-mkt-duration-arrive) var(--tpp-mkt-ease-emphasised); }
/* Words (data-fx="words"): the bubble fades in where it sits and its words rise in one after another, a short step
   apart, on the emphasised curve with no bounce; they leave together. The voice waveform: seven bars breathing out of
   step, well under three flashes a second, only while the moments move. Transform and opacity only. */
.mkt-ready [data-mkt-tile] [data-at][data-fx="words"]:not(.is-on) { transform: none; }
.mkt-ready [data-fx="words"] .mkt-w { display: inline-block; transition: opacity var(--tpp-mkt-duration-leave) var(--tpp-mkt-ease-standard),
  transform var(--tpp-mkt-duration-arrive) var(--tpp-mkt-ease-emphasised); }
.mkt-ready [data-fx="words"].is-on .mkt-w { transition-delay: calc(var(--i) * var(--tpp-mkt-duration-instant) * .4); }
.mkt-ready [data-at][data-fx="words"]:not(.is-on) .mkt-w { opacity: 0; transform: translateY(.35em); }
/* The same words inside a rotor's swap: they come in once the words before have gone, and go at once. */
.mkt-ready [data-pos="on"] [data-fx="words"] .mkt-w { transition-delay: calc(var(--i) * var(--tpp-mkt-duration-instant) * .4 + var(--tpp-mkt-duration-leave)); }
.mkt-ready [data-pos="on"] .caption[data-fx="words"] .mkt-w { transition-delay: calc((var(--i) + 4) * var(--tpp-mkt-duration-instant) * .4 + var(--tpp-mkt-duration-leave)); }
.mkt-ready [data-pos="off"] [data-fx="words"] .mkt-w { opacity: 0; transform: translateY(.35em); transition-delay: 0s; }
/* Depth ([data-mkt-depth]): the layers carry their own translate from the pointer; under reduced motion they stay put. */
.mkt-ready .mkt-wave > span { animation: mkt-wave calc(var(--tpp-mkt-duration-arrive) * 1.2) var(--tpp-mkt-ease-standard) infinite alternate; }
.mkt-ready .mkt-wave > span:nth-child(2) { animation-delay: calc(var(--tpp-mkt-duration-arrive) * -.3); }
.mkt-ready .mkt-wave > span:nth-child(3) { animation-delay: calc(var(--tpp-mkt-duration-arrive) * -.8); }
.mkt-ready .mkt-wave > span:nth-child(4) { animation-delay: calc(var(--tpp-mkt-duration-arrive) * -.5); }
.mkt-ready .mkt-wave > span:nth-child(5) { animation-delay: calc(var(--tpp-mkt-duration-arrive) * -1.1); }
.mkt-ready .mkt-wave > span:nth-child(6) { animation-delay: calc(var(--tpp-mkt-duration-arrive) * -.2); }
.mkt-ready .mkt-wave > span:nth-child(7) { animation-delay: calc(var(--tpp-mkt-duration-arrive) * -.7); }
@keyframes mkt-wave { to { transform: scaleY(1); } }
[data-mkt-loop].is-paused .mkt-wave > span { animation-play-state: paused; }
:root:not(.mkt-ready) .mkt-wave { display: none; }
/* The typing dots: three dots breathing in turn, well under three flashes a second (WCAG 2.3.1). */
.mkt-dots { display: inline-flex; gap: var(--tpp-space-1); }
.mkt-dots > span { width: var(--tpp-space-1); height: var(--tpp-space-1); border-radius: var(--tpp-radius-full); background: currentColor; opacity: .35; }
.mkt-ready .mkt-dots > span { animation: mkt-breathe calc(var(--tpp-mkt-duration-arrive) * 2) var(--tpp-mkt-ease-standard) infinite alternate; }
.mkt-ready .mkt-dots > span:nth-child(2) { animation-delay: calc(var(--tpp-mkt-duration-arrive) * .66); }
.mkt-ready .mkt-dots > span:nth-child(3) { animation-delay: calc(var(--tpp-mkt-duration-arrive) * 1.33); }
@keyframes mkt-breathe { to { opacity: 1; } }
[data-mkt-loop].is-paused .mkt-dots > span { animation-play-state: paused; }
/* The typing bubble exists only while the moments move; the final frame shows the reply itself. */
:root:not(.mkt-ready) .mkt-typing { display: none; }

/* ---- still means still ---- */
@media (prefers-reduced-motion: reduce) {
  .mkt-aurora, [data-mkt-plates] .mkt-plates__group { animation: none !important; opacity: 1 !important; transform: none !important; }
  .mkt-dots > span, .mkt-wave > span { animation: none !important; }
  [data-mkt-depth] * { translate: none !important; animation: none !important; }
  [data-mkt-pause] { display: none; }
}
[data-motion="reduce"] .mkt-aurora, [data-motion="reduce"] [data-mkt-plates] .mkt-plates__group { animation: none !important; opacity: 1 !important; transform: none !important; }
[data-motion="reduce"] .mkt-dots > span, [data-motion="reduce"] .mkt-wave > span { animation: none !important; }
[data-motion="reduce"] [data-mkt-pause] { display: none; }