/* ── Motion ─────────────────────────────────────────────────────────────
   Everything below animates transform and opacity only. Reveal state is a
   class the IntersectionObserver in motion.js adds exactly once. */

[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }

[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ── Skip link ──────────────────────────────────────────────────────── */

.skip {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-2);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  transition: transform 0.2s var(--ease);
}

.skip:focus { transform: translateY(calc(100px + var(--space-2))); }

/* ── Nav ────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  border-block-end: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.nav.is-scrolled {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px);
  border-block-end-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--nav-h);
}

.nav__brand { flex-shrink: 0; }

/* The "shrink on scroll" is a transform on the wordmark, not a height change
   on the bar. Animating the bar's height would relayout the whole page on
   every scroll frame; scaling the logo is composited and costs nothing. */
.nav__brand img {
  width: 112px;
  height: auto;
  transform-origin: center;
  transition: transform 0.3s var(--ease);
}

.nav.is-scrolled .nav__brand img { transform: scale(0.86); }

.nav__links {
  display: flex;
  gap: var(--space-3);
  margin-inline-start: auto;
  font-size: var(--step--1);
  color: var(--subink);
}

.nav__links a { transition: color 0.2s var(--ease); }
.nav__links a:hover { color: var(--teal); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.nav__links + .nav__actions { margin-inline-start: 0; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__brand img { width: 92px; }
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.7em 1.4em;
  min-height: 44px;
  border-radius: 999px;
  font-weight: 700;
  font-size: var(--step--1);
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn__icon { width: 18px; height: 18px; flex-shrink: 0; }

.btn--teal {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--teal) 28%, transparent);
}

.btn--teal:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--teal) 38%, transparent);
}

.btn--teal:active { transform: translateY(0); }

.btn--ghost {
  border: 1.5px solid var(--line);
  color: var(--ink);
}

.btn--ghost:hover { transform: translateY(-2px); border-color: var(--teal); }

.pill {
  padding: 0.45em 0.9em;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--subink);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pill:hover { color: var(--teal); border-color: var(--teal); transform: translateY(-1px); }

/* ── Footer ─────────────────────────────────────────────────────────── */

.foot {
  margin-block-start: var(--space-8);
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--line);
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
}

/* Unlike .nav__brand img, the footer wordmark had no dedicated sizing rule —
   only the global img/svg reset (max-width: 100%; height: auto) applied, so
   the browser used the width HTML attribute directly as the rendered width.
   That made the width attribute load-bearing for actual layout, not just an
   aspect-ratio hint, so correcting it to the logo's real pixel dimensions
   (final review, Fix 1) needed an explicit width here to keep the rendered
   size exactly what it already was. */
.foot__inner img { width: 120px; height: auto; }

.foot__tag { color: var(--subink); font-size: var(--step--1); margin-block-start: var(--space-1); }

.foot__links { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--step--1); }
.foot__links a { color: var(--subink); transition: color 0.2s var(--ease); }
.foot__links a:hover { color: var(--teal); }

.foot__rights { color: var(--subink); font-size: var(--step--1); }
.foot__dot { color: var(--teal); }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(var(--space-5), 8vw, var(--space-8));
  background:
    radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 60%),
    var(--paper);
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; }
}

.hero__copy { display: flex; flex-direction: column; gap: var(--space-3); }

.hero__title { font-size: var(--step-5); }

/* Each row is forced onto its own line regardless of viewport width, so the
   animated word always lands at the end of the first line rather than
   wherever natural wrapping happens to break it. */
.hero__title-row { display: block; }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-2); }

.hero__art { display: flex; justify-content: center; }

.phone {
  width: min(300px, 70vw);
  padding: 10px;
  border-radius: 42px;
  background: var(--ink);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--ink) 22%, transparent);
}

.phone img { border-radius: 32px; }

/* ── Rotator ────────────────────────────────────────────────────────── */

.rotator {
  --rotator-swap: 520ms;
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  color: var(--teal);
}

.rotator__word {
  display: inline-block;
  width: var(--rotator-w, auto);
  transition:
    width var(--rotator-swap) var(--ease),
    transform calc(var(--rotator-swap) / 2) var(--ease),
    opacity calc(var(--rotator-swap) / 2) var(--ease);
}

.rotator__word.is-out { transform: translate3d(0, -0.9em, 0); opacity: 0; }
.rotator__word.is-in { animation: rotator-in calc(var(--rotator-swap) / 2) var(--ease); }

@keyframes rotator-in {
  from { transform: translate3d(0, 0.9em, 0); opacity: 0; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

/* Off-screen twin used only to measure the next word's width. */
.rotator__mirror {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
  font: inherit;
  font-weight: inherit;
}

/* ── Category ticker ────────────────────────────────────────────────────
   Two identical halves translated by -50% give a seamless loop with no JS.
   Direction is right-to-left in both languages, so the animation is written
   against a fixed axis rather than a logical one. */

.ticker-wrap {
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.ticker {
  display: flex;
  width: max-content;
  animation: ticker-slide 38s linear infinite;
}

.ticker:hover,
.ticker:focus-within { animation-play-state: paused; }

.ticker__set {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding-inline: calc(var(--space-5) / 2);
  list-style: none;
}

.ticker__set li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.ticker__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

@keyframes ticker-slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker { animation: none; }
  .ticker-wrap { overflow-x: auto; }
}

/* ── Sections ───────────────────────────────────────────────────────── */

.section { padding-block: clamp(var(--space-5), 7vw, var(--space-7)); }
.section > .u-wrap > h2 { margin-block-end: var(--space-4); }

/* ── Cards ──────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 10%, transparent);
}

.card__shot {
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--teal-soft);
  aspect-ratio: 4 / 3;
}

.card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ── Steps ──────────────────────────────────────────────────────────── */

.steps {
  position: relative;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.steps__line {
  position: absolute;
  inset-block-start: 22px;
  inset-inline: 8%;
  width: 84%;
  height: 2px;
  z-index: 0;
}

@media (max-width: 760px) { .steps__line { display: none; } }

.step { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-1); }

.step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 700;
  font-size: var(--step-0);
  margin-block-end: var(--space-1);
}

/* ── Trust ──────────────────────────────────────────────────────────── */

.trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding-block: var(--space-4);
  border-block: 1px solid var(--line);
}

.trust__list li {
  font-weight: 700;
  color: var(--subink);
  font-size: var(--step-0);
}

.trust__list li::before { content: "✓"; color: var(--teal); margin-inline-end: 0.4em; }

/* ── Download ───────────────────────────────────────────────────────── */

.dl__inner {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 900px) {
  .dl__inner { grid-template-columns: 1.1fr 0.9fr; }
}

.dl__copy { display: flex; flex-direction: column; gap: var(--space-3); }

.dl__qr {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--step--1);
  color: var(--subink);
}

/* A QR is only useful to someone on a different device from the one holding
   the camera, so it is desktop-only. */
@media (min-width: 900px) { .dl__qr { display: flex; } }

.dl__char { justify-self: center; width: min(250px, 60vw); height: auto; }

/* ── Band ───────────────────────────────────────────────────────────── */

.band {
  background: var(--teal);
  color: #fff;
  padding-block: var(--space-6);
}

.band__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.band h2 { font-size: var(--step-3); }
.band p { opacity: 0.92; margin-block-start: var(--space-1); }

.btn--paper {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.16);
}

.btn--paper:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgb(0 0 0 / 0.22); }

/* ── Merchant hero character ────────────────────────────────────────── */

.hero__char { justify-self: center; width: min(265px, 60vw); height: auto; }

/* ── Offer ──────────────────────────────────────────────────────────────
   The single ORANGE hit on the page — WENSA_BRAND_SKILL.md §1 rule 3. */

.offer {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.offer__badge {
  display: inline-block;
  padding: 0.35em 1em;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 700;
  margin-block-end: var(--space-2);
}

.offer__title { font-size: var(--step-3); }
.offer__body { margin-block-start: var(--space-2); font-size: var(--step-1); }

.offer__fine {
  margin-block-start: var(--space-3);
  color: var(--subink);
  font-size: var(--step--1);
}

.offer__free {
  margin-block-start: var(--space-1);
  color: var(--teal);
  font-weight: 700;
  font-size: var(--step--1);
}

.card--flat {
  background: transparent;
  border-color: var(--line);
}

.card--flat:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--teal) 40%, transparent);
  box-shadow: none;
}

/* ── Plans ──────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-block-start: var(--space-4);
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 10%, transparent); }

.plan--popular {
  border-color: var(--teal);
  background: var(--teal-soft);
}

.plan__badge {
  position: absolute;
  inset-block-start: -12px;
  inset-inline-start: var(--space-3);
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: var(--step--1);
  font-weight: 700;
}

.plan__name { font-size: var(--step-1); }
.plan__price { font-size: var(--step-2); font-weight: 700; color: var(--teal); }
.plan__note { font-size: var(--step--1); font-weight: 700; color: var(--teal); }
.plan__features { color: var(--subink); font-size: var(--step--1); line-height: 2; }

/* ── FAQ ────────────────────────────────────────────────────────────────
   Native <details> so it works with JS off and is keyboard-accessible for
   free. Only the marker rotation is styled. */

.faq { max-width: 760px; margin-inline: auto; margin-block-start: var(--space-4); }

.faq details {
  border-block-end: 1px solid var(--line);
  padding-block: var(--space-2);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  color: var(--teal);
  font-size: var(--step-2);
  line-height: 1;
  transition: transform 0.25s var(--ease);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq p { margin-block-start: var(--space-2); color: var(--subink); }