/* ===========================================================================
   Flightly: live product panels

   The sections that explain the app used to show a screenshot of it. These
   are the app's own states rebuilt as markup, so they can change with the
   step the copy is on instead of sitting there as a still.

   Nothing here invents numbers that move on their own: a panel shows one
   fixed, documented state, and the only thing that changes is which panel
   is on screen.
   =========================================================================== */

/* ----------------------------------------------------- shared card pieces */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: 0.75rem; font-weight: var(--fw-bold); letter-spacing: 0.01em;
  background: rgba(23, 24, 28, 0.07); color: var(--ink);
}
.chip--offer   { background: rgba(90, 94, 216, 0.12); color: var(--brand); }
.chip--pending { background: rgba(176, 124, 20, 0.12); color: #96690f; }
.chip--ok      { background: rgba(22, 128, 74, 0.12); color: #16804a; }

/* ------------------------------------------------- the four reward stages */
/* All four panels occupy the same grid cell, so they stack on top of each
   other and the container is exactly as tall as the tallest one. The first
   version gave the container a fixed 4/5 aspect and absolutely positioned
   the panels inside it, which left a third of the card empty under the
   content whichever stage was showing. */
.stages {
  display: grid;
  width: 100%; max-width: 360px;
  margin-inline: auto;
}
.stage {
  grid-area: 1 / 1;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-start; gap: 14px;
  border-radius: var(--radius-media);
  background: transparent;
  border: 0;
  box-shadow: none;
  /* Only the active panel is painted and only it can be read out: the other
     three are inert rather than stacked invisibly on top of it. */
  opacity: 0; visibility: hidden;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    visibility 0s linear var(--dur);
}
.stage.is-active {
  opacity: 1; visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* The device carries its own frame and shadow, so no border or radius
   here: a rounded box around a phone that is already rounded looks like a
   mistake. It is cropped at the bottom, so the phone runs past the panel
   rather than sitting in it. */
.stage__art {
  display: block;
  width: 100%; height: auto;
  filter: drop-shadow(0 26px 44px rgba(23, 24, 28, 0.26));
}

/* ------------------------------------- add a trip, dark on dark

   The section sits on the black band, so these are near-black panels with a
   hairline rather than white cards: a light card on black is a hole punched
   in the page. The phone is the real device shot and it bleeds off the left
   edge on purpose, so the composition reads as a continuing surface rather
   than as three objects centred in a box. */
.addtrip {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .addtrip { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); gap: 24px; }
}

.addtrip__phone {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  background: #0d0f11;
  border: 1px solid rgba(255, 255, 255, 0.07);
  min-height: 420px;
}
/* Centred in its panel, not hanging off the left. The bleed looked right
   in the reference because their phone is wider than its frame; ours is
   not, and off-centre just read as a mistake. */
.addtrip__phone img {
  position: absolute;
  left: 50%; top: 8%;
  transform: translateX(-50%);
  width: 78%; height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
}
@media (max-width: 899px) {
  .addtrip__phone { min-height: 340px; }
  .addtrip__phone img { width: 58%; }
}

.addtrip__col { display: grid; gap: 20px; grid-template-rows: auto 1fr; }

.panel {
  padding: 22px;
  border-radius: 26px;
  background: #0d0f11;
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--on-dark);
}

/* The status row. It was clipped on the right on purpose, to echo the
   reference's horizontally scrolling cards, but the third card is the one
   the whole section is about and half of it was off the panel. All three
   fit now: equal columns, nothing cut. */
.panel--rail { overflow: visible; }
.statrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.statcard {
  min-width: 0;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  padding: 13px 14px;
  border-radius: 16px;
  background: #16191d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: grid; gap: 9px;
}
.statcard.is-live {
  background: linear-gradient(160deg, #4f53d6, #3f43c4);
  border-color: rgba(255, 255, 255, 0.18);
}
.statcard__label { font-size: clamp(0.6875rem, 1vw, 0.8125rem); font-weight: var(--fw-bold); color: var(--grey); }
.statcard.is-live .statcard__label { color: rgba(255, 255, 255, 0.92); }
.statcard__bar {
  display: block; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}
.statcard__bar i { display: block; height: 100%; width: 50%; border-radius: 999px; background: var(--white); }
.statcard__value { font-size: clamp(1.0625rem, 1.6vw, 1.375rem); font-weight: var(--fw-bold); color: var(--white); }
.statcard__value small { font-size: clamp(0.625rem, 0.8vw, 0.75rem); font-weight: var(--fw-medium); color: var(--grey); }
.statcard.is-live .statcard__value small { color: rgba(255, 255, 255, 0.8); }

.panel--flow { display: grid; align-content: start; gap: 12px; }
.addtrip__field {
  padding: 13px 15px; border-radius: 14px;
  background: #16191d; border: 1px solid rgba(255, 255, 255, 0.07);
}
.addtrip__label {
  display: block; font-size: 0.6875rem; font-weight: var(--fw-bold);
  letter-spacing: 0.08em; text-transform: uppercase; color: #6e767f;
  margin-bottom: 5px;
}
.addtrip__value {
  display: flex; align-items: center;
  font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--white);
  font-variant-numeric: tabular-nums;
  min-height: 1.4em;
}
.addtrip__caret {
  display: inline-block; width: 2px; height: 1.05em; margin-left: 2px;
  background: var(--brand);
  animation: addtrip-caret 1s steps(1) infinite;
}
@keyframes addtrip-caret { 50% { opacity: 0; } }
.addtrip__cta {
  width: 100%;
  min-height: 46px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: var(--brand); color: var(--brand-ink);
  font: inherit; font-weight: var(--fw-bold);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.addtrip__list { display: grid; gap: 10px; }
.addtrip__trip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 15px; border-radius: 14px;
  background: #16191d; border: 1px solid rgba(255, 255, 255, 0.06);
}
.addtrip__trip b { font-size: 0.9375rem; color: var(--white); }
.addtrip__when { display: block; font-size: 0.75rem; color: var(--grey); margin-top: 2px; }

.addtrip__steps { display: grid; gap: 26px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: s; }
@media (min-width: 820px) { .addtrip__steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.addtrip__step { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.addtrip__step::before {
  counter-increment: s; content: counter(s);
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  font-size: 0.8125rem; font-weight: var(--fw-bold);
}
.addtrip__step h3 { font-size: 1.0625rem; font-weight: var(--fw-bold); margin-bottom: 4px; }
.addtrip__step p { font-size: var(--fs-small); color: var(--grey); }

/* ----------------------------------------- the phone at the page's end

   A still render, large, rising out of the bottom edge and cut off by it,
   with the same travel pieces that orbit the hero scattered around it: the
   page opens and closes on the same objects.

   Earlier versions of this were a WebGL mesh, then a studio relight of that
   mesh, then a CSS perspective tilt. All three tried to make a phone
   interesting by moving it. The end of a page wants the thing itself. */
.endphone {
  position: relative;
  margin-top: 64px;
  margin-bottom: calc(-1 * var(--section-y));
  min-height: clamp(300px, 34vw, 440px);
  display: flex; justify-content: center; align-items: flex-end;
  pointer-events: none;
}
.endphone__device {
  position: relative; z-index: 2;
  display: block;
  width: clamp(250px, 31vw, 400px);
  height: auto;
  /* sunk well into the edge: only the top third of the device is on the page */
  margin-bottom: -40%;
  filter: drop-shadow(0 -10px 70px rgba(90, 94, 216, 0.26))
          drop-shadow(0 24px 50px rgba(0, 0, 0, 0.6));
}

.endphone__field { position: absolute; inset: 0; z-index: 1; }
.endphone__tile {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w);
  transform: translate(-50%, -50%) rotate(var(--r));
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 34px -14px rgba(0, 0, 0, 0.7);
}
/* the ones further back, softened so the eye goes to the device */
.endphone__tile--back { filter: blur(4px); opacity: 0.45; }

@media (max-width: 980px) {
  .endphone__tile--back { display: none; }
  .endphone__tile { width: calc(var(--w) * 0.8); }
}
@media (max-width: 760px) {
  .endphone { margin-top: 44px; min-height: 260px; }
  .endphone__device { width: min(70vw, 290px); margin-bottom: -44%; }
  /* only the outermost pieces survive, so the copy above keeps its air */
  .endphone__tile { width: calc(var(--w) * 0.62); opacity: 0.85; }
}

.phone3d__steps {
  display: grid; gap: 28px; margin: 28px 0 0; padding: 0; list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .phone3d__steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.phone3d__step { display: grid; gap: 12px; justify-items: center; text-align: center; }
/* Numbered, in the brand colour. The three markers here used to be the
   reference's leftover icons, a green tick and a teal star, which belonged
   to another product and fought the indigo everywhere else on the page. */
.phone3d__num {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(90, 94, 216, 0.16);
  color: #a9adf5;
  font-size: 0.8125rem; font-weight: var(--fw-bold);
}
.phone3d__step p { font-size: var(--fs-small); color: var(--grey); max-width: 34ch; }