/* Kleva Loyalty landing page.
   Direction: keyline-led ink and paper. The mark's heavy black outline is the
   governing graphic language. App green is the only action colour. The four
   logo colours appear in the mark, in Kai's art, and as small rhythm accents. */

/* ------------------------------ Fonts ------------------------------ */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/bricolage-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/instrument-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/instrument-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------ Tokens ----------------------------- */

:root {
  /* App palette, leading (matches the mobile app users will download) */
  --green: #0a9d6e;
  --green-light: #2a8f60;
  --green-dark: #0c5a37;

  /* Logo palette, used where the mark and its echoes appear */
  --logo-red: #DF1F1C;
  --logo-yellow: #FCC40E;
  --logo-blue: #065D9A;
  --logo-green: #018042;

  --ink: #1D1D1B;
  --paper: #FEFEFE;
  --paper-dim: #F6F6F4;

  --keyline: 3px solid var(--ink);
  --shadow-hard: 6px 6px 0 var(--ink);

  --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;

  --step-0: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.8vw, 3.6rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.8vw, 4.6rem);

  --space-s: clamp(1rem, 2vw, 1.5rem);
  --space-m: clamp(1.75rem, 3.5vw, 2.75rem);
  --space-l: clamp(3rem, 7vw, 6rem);
  --space-xl: clamp(4.5rem, 10vw, 8.5rem);

  --measure: 34rem;
  --wrap: 68rem;
}

/* ------------------------------ Base ------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html:not(.motion) { scroll-behavior: auto; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-s);
}

p { margin: 0 0 var(--space-s); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green-dark); }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0 0 8px 8px;
}
.skip-link:focus { top: 0; }

.section__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-s);
}

/* ---------------------------- Buttons ------------------------------ */

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  font: 600 1rem var(--font-body);
  color: var(--paper);
  background: linear-gradient(135deg, var(--green-light), var(--green-dark));
  border: var(--keyline);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--small { padding: 0.5rem 1.1rem; font-size: 0.9rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--ink { background: var(--ink); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35); }

html:not(.motion) .btn { transition: none; }

/* ---------------------------- Top bar ------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem var(--space-s);
  background: var(--paper);
  border-bottom: var(--keyline);
}
.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
.topbar__mark { width: 38px; height: 38px; }
.topbar__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

/* ------------------------------ Hero ------------------------------- */

.hero { border-bottom: var(--keyline); }

.hero__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--space-l) var(--space-s) var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__mark {
  position: relative;
  width: min(58vw, 300px);
  aspect-ratio: 1;
  margin-bottom: var(--space-m);
}
.hero__mark picture, .hero__mark .seg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__title { font-size: var(--step-4); max-width: 14ch; }

.hero__sub {
  max-width: var(--measure);
  font-size: var(--step-1);
  line-height: 1.55;
}

.hero__note {
  margin-top: var(--space-s);
  font-size: 0.9rem;
  opacity: 0.75;
}

/* Segment assembly: the one loud moment on the page. Runs once on load,
   only when .motion is set. Without it (reduced motion, no JS) the mark
   simply sits assembled. */
.motion .seg { opacity: 0; animation: seg-in 700ms cubic-bezier(0.22, 1.2, 0.36, 1) forwards; }
.motion .seg--yellow { transform: translate3d(-70px, 0, 0) rotate(-14deg); animation-delay: 100ms; }
.motion .seg--red    { transform: translate3d(0, -70px, 0) rotate(10deg);  animation-delay: 240ms; }
.motion .seg--green  { transform: translate3d(70px, 0, 0) rotate(14deg);   animation-delay: 380ms; }
.motion .seg--blue   { transform: translate3d(0, 70px, 0) rotate(-10deg);  animation-delay: 520ms; }

@keyframes seg-in {
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
}

.motion .hero__mark { animation: mark-settle 400ms ease-out 1150ms backwards; }
@keyframes mark-settle {
  0% { transform: scale(1); }
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* --------------------------- Email capture ------------------------- */

.capture {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 30rem;
  margin-top: var(--space-s);
}

.capture__input {
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0.85rem 1.2rem;
  font: 400 1rem var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: var(--keyline);
  border-radius: 999px;
}
.capture__input::placeholder { color: #6b6b68; }

.capture__msg { flex-basis: 100%; margin: 0; font-weight: 600; min-height: 1.6em; }
.capture__msg[data-state="error"] { color: var(--logo-red); }
.closer .capture__msg[data-state="error"] { color: #ffd7d5; }
.capture__msg[data-state="success"] { color: var(--green-dark); }
.closer .capture__msg[data-state="success"] { color: var(--paper); }

.capture--hero .capture__msg:empty { display: none; }
.capture__noscript { max-width: var(--measure); margin-inline: auto; text-align: center; }

.capture.is-sending .capture__btn { opacity: 0.6; pointer-events: none; }

/* ----------------------------- Problem ----------------------------- */

.problem {
  background: var(--ink);
  color: var(--paper);
  border-bottom: var(--keyline);
}
.problem .section__inner { text-align: center; }
.problem__title { font-size: var(--step-3); margin-inline: auto; max-width: 18ch; }
.problem__copy { max-width: var(--measure); margin-inline: auto; opacity: 0.85; }

/* Scattered loyalty cards. JS drifts each at its own rate while the
   section scrolls; without JS they sit in their scattered pose. */
.cardfan {
  position: relative;
  height: clamp(240px, 44vw, 340px);
  max-width: 40rem;
  margin: var(--space-m) auto 0;
}
.fancard {
  position: absolute;
  width: clamp(150px, 30vw, 220px);
  aspect-ratio: 1.586;
  padding: 0.8rem 1rem;
  background: var(--paper);
  color: var(--ink);
  border: var(--keyline);
  border-radius: 12px;
  box-shadow: var(--shadow-hard);
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fancard span { font: 600 0.8rem var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.fancard i { font-style: normal; font-size: 0.75rem; opacity: 0.6; }
.fancard::after {
  content: '';
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  width: 26px;
  height: 18px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 3px, var(--ink) 3px 5px);
  opacity: 0.35;
}
/* Rotation lives in a custom property so the JS parallax can compose
   its translate with it instead of overwriting it. */
.fancard { transform: rotate(var(--rot, 0deg)); }
.fancard--red    { --rot: -8deg; left: 2%;  top: 6%;  border-top: 8px solid var(--logo-red); }
.fancard--yellow { --rot: 6deg;  right: 4%; top: 0;   border-top: 8px solid var(--logo-yellow); }
.fancard--blue   { --rot: 4deg;  left: 12%; bottom: 4%; border-top: 8px solid var(--logo-blue); }
.fancard--green  { --rot: -5deg; right: 10%; bottom: 10%; border-top: 8px solid var(--logo-green); }

/* ----------------------------- Solution ---------------------------- */

.solution .section__inner { text-align: center; }
.solution__title { font-size: var(--step-3); }

/* Four scattered mini cards slide into one Kleva card when the block
   scrolls into view. Default state (no JS / reduced motion): converged. */
.converge {
  position: relative;
  height: 210px;
  max-width: 26rem;
  margin: var(--space-m) auto;
}
.minicard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  aspect-ratio: 1.586;
  margin: -47px 0 0 -75px;
  border: var(--keyline);
  border-radius: 10px;
  background: var(--paper);
  transition: transform 650ms cubic-bezier(0.22, 1.1, 0.36, 1), opacity 650ms ease;
}
.minicard--red    { background: var(--logo-red); }
.minicard--yellow { background: var(--logo-yellow); }
.minicard--blue   { background: var(--logo-blue); }
.minicard--green  { background: var(--logo-green); }
.minicard--kleva {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 170px;
  margin: -54px 0 0 -85px;
  box-shadow: var(--shadow-hard);
  z-index: 2;
}
.minicard--kleva img { width: 44px; height: 44px; }
.minicard--kleva span { font-family: var(--font-display); font-size: 1.4rem; }

/* Scattered start state, applied only while waiting for the converge cue */
.motion [data-converge]:not(.is-converged) .minicard--red    { transform: translate3d(-120px, -34px, 0) rotate(-14deg); }
.motion [data-converge]:not(.is-converged) .minicard--yellow { transform: translate3d(118px, -40px, 0) rotate(12deg); }
.motion [data-converge]:not(.is-converged) .minicard--blue   { transform: translate3d(-104px, 42px, 0) rotate(8deg); }
.motion [data-converge]:not(.is-converged) .minicard--green  { transform: translate3d(110px, 46px, 0) rotate(-10deg); }
.motion [data-converge]:not(.is-converged) .minicard--kleva  { transform: scale(0.9); opacity: 0; }

.is-converged .minicard:not(.minicard--kleva) { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.94); opacity: 0.35; }
.is-converged .minicard--kleva { transform: scale(1); opacity: 1; }

.claims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-s);
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.claim {
  padding: 1.4rem 1.4rem 1.1rem;
  border: var(--keyline);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-hard);
}
.claim h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.claim p { margin: 0; font-size: 0.97rem; }
.claim--red { border-top: 8px solid var(--logo-red); }
.claim--yellow { border-top: 8px solid var(--logo-yellow); }
.claim--green { border-top: 8px solid var(--logo-green); }

/* ------------------------------- Kai ------------------------------- */

.kai {
  background: var(--paper-dim);
  border-top: var(--keyline);
  border-bottom: var(--keyline);
  overflow: hidden;
}
.kai__grid {
  display: grid;
  gap: var(--space-m);
  align-items: center;
}
@media (min-width: 780px) {
  .kai__grid { grid-template-columns: 1fr 1fr; }
}

.kai__art {
  position: relative;
  display: flex;
  justify-content: center;
}
.kai__img {
  position: relative;
  z-index: 2;
  width: min(72vw, 400px);
  height: auto;
}
.kai__sun {
  position: absolute;
  z-index: 1;
  top: 6%;
  left: 50%;
  width: min(64vw, 360px);
  aspect-ratio: 1;
  margin-left: calc(min(64vw, 360px) / -2);
  border: var(--keyline);
  border-radius: 50%;
  background: linear-gradient(160deg, var(--logo-yellow) 10%, #f28c1e 60%, var(--logo-red) 105%);
}
.kai__bubble {
  position: absolute;
  z-index: 3;
  top: 3%;
  right: max(0px, calc(50% - 310px));
  max-width: 200px;
  margin: 0;
  padding: 0.8rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  background: var(--paper);
  border: var(--keyline);
  border-radius: 14px 14px 14px 2px;
  box-shadow: 4px 4px 0 var(--ink);
}
.kai__title { font-size: var(--step-3); }
.kai__text p { max-width: var(--measure); }

/* ------------------------------ Closer ----------------------------- */

.closer {
  background: linear-gradient(150deg, var(--green-light), var(--green-dark));
  color: var(--paper);
}
.closer__inner { text-align: center; }
.closer__title { font-size: var(--step-3); }
.closer__copy { max-width: var(--measure); margin-inline: auto; }
.closer .capture { margin-inline: auto; }
.closer a { color: var(--paper); }
.closer__kai { display: flex; justify-content: center; margin-top: var(--space-s); }
.closer__kai[hidden] { display: none; }
.closer__kai img { width: 150px; height: 225px; }

/* ------------------------------ Footer ----------------------------- */

.footer {
  background: var(--ink);
  color: var(--paper);
}
.footer__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: var(--space-m) var(--space-s);
  text-align: center;
}
.footer__mark { width: 52px; height: 52px; margin: 0 auto 0.8rem; }
.footer__legal { margin-bottom: 0.3rem; font-weight: 600; }
.footer__partner { margin: var(--space-s) 0 0; font-size: 0.9rem; opacity: 0.8; }
.footer a { color: var(--paper); }

.capture--footer { margin-inline: auto; max-width: 34rem; }
.capture--footer .capture__input { flex: 1 1 11rem; }
.capture--footer .capture__textarea {
  flex: 1 1 100%;
  border-radius: 18px;
  min-height: 5.5rem;
  resize: vertical;
  font: inherit;
  line-height: 1.5;
}
.capture--footer .capture__msg[data-state="error"] { color: #ffd7d5; }
.capture--footer .capture__msg[data-state="success"] { color: var(--paper); }
.capture--footer .capture__msg:empty { display: none; }

/* ------------------------- Eyebrows and beads ---------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font: 600 0.85rem var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-s);
}
.kai .eyebrow { justify-content: flex-start; }
.eyebrow__beads { display: inline-flex; gap: 4px; }
.eyebrow__beads i {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid var(--ink);
}
.eyebrow--dark .eyebrow__beads i { border-color: var(--paper); }
.eyebrow__beads i:nth-child(1) { background: var(--logo-red); }
.eyebrow__beads i:nth-child(2) { background: var(--logo-yellow); }
.eyebrow__beads i:nth-child(3) { background: var(--logo-green); }
.eyebrow__beads i:nth-child(4) { background: var(--logo-blue); }

/* --------------------------- Scroll reveals ------------------------ */

/* Hidden start state exists only when JS and motion are both available,
   so no-JS and reduced-motion users always see the finished page. */
html.js.motion .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.js.motion .reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ------------------------- Reduced motion -------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ------------------------------ Small screens ---------------------- */

@media (max-width: 560px) {
  /* Keep the scattered pose inside a narrow viewport */
  .minicard { width: 118px; margin: -37px 0 0 -59px; }
  .minicard--kleva { width: 150px; margin: -47px 0 0 -75px; }
  .minicard--kleva img { width: 36px; height: 36px; }
  .motion [data-converge]:not(.is-converged) .minicard--red    { transform: translate3d(-72px, -30px, 0) rotate(-14deg); }
  .motion [data-converge]:not(.is-converged) .minicard--yellow { transform: translate3d(70px, -34px, 0) rotate(12deg); }
  .motion [data-converge]:not(.is-converged) .minicard--blue   { transform: translate3d(-62px, 34px, 0) rotate(8deg); }
  .motion [data-converge]:not(.is-converged) .minicard--green  { transform: translate3d(66px, 38px, 0) rotate(-10deg); }
  .converge { height: 170px; }
}

@media (max-width: 420px) {
  .capture__btn { flex-basis: 100%; }
  .kai__bubble { position: static; margin: 0.8rem auto 0; max-width: 260px; border-radius: 14px; }
  .fancard { box-shadow: 4px 4px 0 var(--ink); }
}