/* ==========================================================================
   Felicet Rewards — in-app milestone pages.
   Mobile-first: these open inside the Partner and Business apps, so the phone
   is the design target and the desktop view is the adaptation.
   Light emerald palette, deliberately separate from the orange corporate site.
   ========================================================================== */

:root {
  --ground:      #eef7f2;
  --ground-2:    #e2f0e9;
  --surface:     #ffffff;
  --surface-2:   #f6fbf8;

  --ink:         #10231b;
  --ink-2:       #40564c;
  --ink-3:       #6d857a;

  --line:        rgba(16, 35, 27, 0.11);
  --line-2:      rgba(16, 35, 27, 0.22);

  --emerald:     #0f9d63;
  --emerald-2:   #0b7a4c;
  --emerald-ink: #ffffff;
  --emerald-sub: #d8f2e5;
  --emerald-tint:#effbf5;

  --gold:        #e0a020;
  --gold-soft:   #fdf3dd;

  --locked:      #9db0a6;

  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --col:   560px;
  --pad:   20px;
  --r:     14px;
  --r-sm:  8px;
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: light;
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0;
  text-transform: uppercase;
}
p { margin: 0; }
a { color: var(--emerald-2); }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }

.shell {
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- top bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(238, 247, 242, 0.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar__in {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}
.bar__brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.bar__brand span { color: var(--emerald); }

/* ---------- hero ---------- */

.hero {
  padding-block: 22px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px 6px 9px;
  border-radius: 999px;
  background: var(--emerald);
  color: var(--emerald-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pill--locked { background: var(--locked); }
.pill--gold   { background: var(--gold); color: #33240a; }
.pill__dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
}

.hero h1 {
  font-size: clamp(2.4rem, 11vw, 3.4rem);
  line-height: 0.92;
}
.hero h1 em { font-style: normal; color: var(--emerald); display: block; }
.hero__sub {
  color: var(--ink-2);
  font-size: 1.0625rem;
  max-width: 34ch;
}

/* the product stage */
.art {
  position: relative;
  width: 100%;
  border-radius: var(--r);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, #ffffff 0%, var(--emerald-tint) 42%, var(--emerald-sub) 100%);
  border: 1px solid var(--line);
  padding: 8px;
}
.art svg { display: block; width: 100%; height: auto; }
.art__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--gold);
  color: #33240a;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
}
.art__free {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 0.95;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(15, 157, 99, 0.35);
}
.art__free small { display: block; font-size: 8px; letter-spacing: 0.1em; opacity: 0.85; }

/* ---------- blocks ---------- */

.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stack { display: flex; flex-direction: column; gap: 16px; padding-bottom: 28px; }

.block h2 {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 9px;
}
.block h2::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--emerald);
}
.block p { color: var(--ink-2); }

.kicker {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emerald-2);
}

/* contents list */
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--ink-2);
}
.ticks li::before {
  content: "";
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--emerald-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%230f9d63' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  border: 1px solid rgba(15, 157, 99, 0.25);
}
.ticks strong { color: var(--ink); font-weight: 700; }

/* rules */
.rules { list-style: none; margin: 0; padding: 0; counter-reset: r; display: flex; flex-direction: column; gap: 12px; }
.rules li {
  counter-increment: r;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 11px;
  align-items: start;
  color: var(--ink-2);
}
.rules li::before {
  content: counter(r);
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

/* ---------- progress ladder ---------- */

.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ladder li {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  text-decoration: none;
  color: inherit;
}
.ladder li + li { border-top: 1px dashed var(--line); }
.ladder a { text-decoration: none; color: inherit; display: contents; }

.ladder__day {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--emerald-tint);
  border: 1.5px solid rgba(15, 157, 99, 0.3);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--emerald-2);
  line-height: 1;
}
.ladder__name { font-weight: 600; color: var(--ink); line-height: 1.25; }
.ladder__name small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); }
.ladder__go { color: var(--emerald); font-size: 18px; }

.ladder li.is-here .ladder__day { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.ladder li.is-here .ladder__name { color: var(--emerald-2); }

/* ---------- CTA ---------- */

.cta {
  background: linear-gradient(160deg, var(--emerald) 0%, var(--emerald-2) 100%);
  color: #fff;
  border-radius: var(--r);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
  align-items: center;
}
.cta h2 { font-size: 1.6rem; color: #fff; }
.cta h2::before { display: none; }
.cta p { color: rgba(255, 255, 255, 0.86); font-size: 15px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--emerald-2);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  padding-block: 13px;
}
.btn--solid { background: var(--emerald); color: #fff; }

/* ---------- FAQ ---------- */

details {
  border-top: 1px solid var(--line);
  padding-block: 12px;
}
details:first-of-type { border-top: 0; padding-top: 0; }
summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  color: var(--emerald);
  font-size: 20px;
  line-height: 1;
  flex: 0 0 auto;
}
details[open] summary::after { content: "–"; }
details p { padding-top: 8px; font-size: 15px; }

/* ---------- fine print + footer ---------- */

.fine {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
}
.fine strong { color: var(--ink-2); }

.foot {
  padding: 22px 0 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ink-3);
  font-size: 13px;
}
.foot a { color: var(--ink-2); text-decoration: none; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; }

/* ---------- hub cards ---------- */

.cards { display: flex; flex-direction: column; gap: 14px; }
.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(16, 35, 27, 0.09); }
.card__art {
  background: radial-gradient(120% 100% at 50% 0%, #fff 0%, var(--emerald-tint) 55%, var(--emerald-sub) 100%);
  border-bottom: 1px solid var(--line);
  padding: 4px;
}
.card__art svg { display: block; width: 100%; height: auto; }
.card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; }
.card__day {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emerald-2);
}
.card__body h3 { font-size: 1.45rem; }
.card__body p { color: var(--ink-2); font-size: 14.5px; }

/* desktop: still a phone-shaped column, just roomier */
@media (min-width: 720px) {
  :root { --pad: 28px; }
  .hero h1 { font-size: 3.6rem; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .cards .card:first-child { grid-column: 1 / -1; }
  .shell--wide { max-width: 940px; }
}

.app-note {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

/* ==========================================================================
   Motion. Everything here starts from a visible resting state — the page is
   fully composed on first paint and the animation is what happens next.
   ========================================================================== */

@keyframes float-art {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
@keyframes badge-bob {
  0%, 100% { transform: rotate(-7deg) scale(1); }
  50%      { transform: rotate(-7deg) scale(1.06); }
}
@keyframes ring-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 157, 99, 0.45); }
  70%  { box-shadow: 0 0 0 14px rgba(15, 157, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 157, 99, 0); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.art svg            { animation: float-art 6s ease-in-out infinite; }
.art svg .spark     { animation: twinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.art svg .spark:nth-of-type(2n) { animation-delay: 0.9s; }
.art svg .spark:nth-of-type(3n) { animation-delay: 1.7s; }
.art__free          { transform: rotate(-7deg); animation: badge-bob 3.4s ease-in-out infinite; }
.ladder li.is-here .ladder__day { animation: ring-pulse 2.6s ease-out infinite; }

/* Revealed only if it was below the fold when the page loaded — what is
   on screen at first paint is never hidden. */
.will-reveal { opacity: 0; }
.will-reveal.revealed { animation: rise-in 0.6s var(--ease) both; }

/* the day meter */
.meter { display: flex; flex-direction: column; gap: 10px; }
.meter__track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--emerald-sub);
  overflow: hidden;
}
.meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--emerald) 0%, var(--gold) 100%);
  transition: width 1.4s var(--ease);
}
.meter__ticks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.meter__ticks b { color: var(--emerald-2); font-weight: 500; }
.meter__now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--emerald-2);
  font-variant-numeric: tabular-nums;
}
.meter__now small {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-2);
  margin-left: 6px;
}

.card { animation: rise-in 0.5s var(--ease) both; }
.cards .card:nth-child(2) { animation-delay: 0.06s; }
.cards .card:nth-child(3) { animation-delay: 0.12s; }
.cards .card:nth-child(4) { animation-delay: 0.18s; }
.cards .card:nth-child(5) { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .art svg, .art svg .spark, .art__free, .ladder li.is-here .ladder__day,
  .card, .will-reveal.revealed { animation: none !important; }
  .will-reveal { opacity: 1; }
  .art__free { transform: rotate(-7deg); }
  .meter__fill { transition: none; }
}

/* a real photograph in the product stage, when one exists */
.art__photo,
.card__art .art__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--r) - 6px);
}
.art:has(.art__photo) { padding: 6px; }
.art__photo { animation: none; }

/* the referral band on the hub */
.refer-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-color: rgba(15, 157, 99, 0.35);
  background:
    linear-gradient(180deg, var(--emerald-tint) 0%, var(--surface) 100%);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.refer-band:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16, 35, 27, 0.1); }
.refer-band h2 { margin-bottom: 8px; }
.refer-band__amt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 8vw, 3rem);
  line-height: 1;
  color: var(--gold);
  white-space: nowrap;
}
@media (max-width: 560px) {
  .refer-band { grid-template-columns: minmax(0, 1fr); }
  .refer-band__amt { font-size: 2.4rem; }
}