/* ==========================================================================
   HOW IT WORKS PAGE  (how-it-works.php)

   The page is a journey, so it is drawn as one line running from the first
   step to the last. Three deliberate shifts of rhythm keep it from becoming
   five identical rows:

     1. the hero is a two-column split with glass labels floating on the
        screenshot;
     2. the five steps hang off a central rail, alternating left and right,
        each photograph tilted a couple of degrees towards the reader and
        flattening when the pointer lands on it;
     3. the NFC section abandons the rail entirely for a dark bento panel of
        frosted tiles, because that part happens away from the screen.

   Mobile collapses all of it to one column with the rail on the left, and
   every step puts its image above its words — the order the brief asks for
   and the order the eye wants when there is no room to put them side by side.

   Every value comes from tokens.css. The --hw-* group belongs to this page.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */
.hwhero {
  padding-block: calc(var(--space-section) * 0.75) var(--space-12);
}

.hwhero__inner {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.hwhero__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}

.hwhero__title {
  max-width: 15ch;
  margin: 0;
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.hwhero__lede {
  max-width: 50ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.hwhero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hwhero__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.hwhero__note .icon {
  color: var(--color-success);
  flex: none;
}

/* ---- The screenshot, and the two labels floating over it ---- */
.hwhero__media {
  position: relative;
}

.hwhero__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--hw-media-radius);
  background: var(--color-surface);
  box-shadow: var(--hw-media-shadow);
  aspect-ratio: var(--hw-media-ratio);
}

.hwhero__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inset rather than hung off the corners, so nothing can poke out of the
   page at 320px and start a sideways scroll. */
.hwhero__float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--hw-glass-border);
  border-radius: var(--radius-lg);
  background: var(--hw-glass-bg);
  backdrop-filter: var(--hw-glass-blur);
  -webkit-backdrop-filter: var(--hw-glass-blur);
  box-shadow: var(--hw-glass-shadow);
  color: var(--hw-glass-text);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.hwhero__float strong {
  display: block;
  font-weight: var(--weight-semibold);
}

.hwhero__float span {
  color: var(--hw-glass-text-soft);
  font-size: var(--text-xs);
}

.hwhero__float .icon {
  flex: none;
  color: var(--color-accent-text);
}

.hwhero__float--top {
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
}

.hwhero__float--bottom {
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
}

/* The URL label is the smaller promise of the two; on a narrow phone it is
   the one that gets in the way of the photograph, so it goes. */
@media (max-width: 29.99rem) {
  .hwhero__float--bottom { display: none; }
}

@media (min-width: 60rem) {
  .hwhero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: var(--space-12);
  }
}


/* --------------------------------------------------------------------------
   2. THE JUMP STRIP
   Five pills, one per step. A table of contents for the journey, and on a
   phone a sideways scroller rather than four wrapped rows.
   -------------------------------------------------------------------------- */
.hwjump {
  padding-block: 0 var(--space-12);
}

.hwjump__list {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.hwjump__list li { scroll-snap-align: start; }

.hwjump__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.hwjump__link b {
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}

.hwjump__link:hover,
.hwjump__link:focus-visible {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}

/* Set by script as each step reaches the middle of the screen. */
.hwjump__link[aria-current="true"] {
  color: var(--color-accent-text);
  border-color: var(--color-accent-soft-border);
  background: var(--color-accent-soft);
}

.hwjump__link[aria-current="true"] b {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

@media (min-width: 60rem) {
  .hwjump__list {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}


/* --------------------------------------------------------------------------
   3. THE FIVE STEPS
   -------------------------------------------------------------------------- */
.steps {
  padding-block: var(--space-section-sm);
}

.steps__list {
  position: relative;
  display: grid;
  gap: var(--hw-step-gap);
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}

/* The rail, drawn twice: the whole route, then the part already walked
   painted over it. --hw-progress is 0% until script moves it, so with no
   script there is simply a line. */
.steps__list::before,
.steps__list::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--hw-marker) / 2);
  width: var(--hw-rail-w);
  margin-inline-start: calc(var(--hw-rail-w) / -2);
  border-radius: var(--radius-full);
  pointer-events: none;
}

.steps__list::before {
  inset-block-end: 0;
  background: var(--hw-line);
}

.steps__list::after {
  height: var(--hw-progress);
  max-height: 100%;
  background-image: var(--hw-line-done);
  transition: height var(--duration-base) var(--ease-out);
}

/* ---- One step ---- */
.step {
  position: relative;
  display: grid;
  grid-template-columns: var(--hw-marker) minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-5);
  align-items: start;
}

/* The numbered disc. Its halo is painted in the page colour so the rail
   appears to pass behind it rather than through it. */
.step__marker {
  position: relative;
  z-index: var(--z-raised);
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: var(--hw-marker);
  height: var(--hw-marker);
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  box-shadow: 0 0 0 var(--hw-marker-ring) var(--color-bg);
  color: var(--color-accent-text);
  font-size: var(--hw-num-size);
  font-weight: var(--weight-extrabold);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-spring),
              box-shadow var(--duration-base) var(--ease-out);
}

.step.is-active .step__marker {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
  transform: scale(1.06);
  box-shadow: 0 0 0 var(--hw-marker-ring) var(--color-bg), var(--shadow-accent);
}

.step__media {
  grid-column: 2;
  grid-row: 1;
}

.step__body {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: 34rem;
}

.step__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.step__kicker .icon { flex: none; }

.step__title {
  margin: 0;
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.step__text {
  margin: 0;
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.step__points {
  margin: 0;
  font-size: var(--text-sm);
}

/* ---- The photograph ---- */
.step__fig {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--hw-media-radius);
  background: var(--color-surface);
  box-shadow: var(--hw-media-shadow);
  aspect-ratio: var(--hw-media-ratio);
  transition: transform var(--duration-slow) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
}

.step__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A frosted caption sitting on the image, so the picture carries a fact
   rather than only a mood. */
.step__tag {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-start: var(--space-4);
  inset-inline-end: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hw-glass-border);
  border-radius: var(--radius-md);
  background: var(--hw-glass-bg);
  backdrop-filter: var(--hw-glass-blur);
  -webkit-backdrop-filter: var(--hw-glass-blur);
  color: var(--hw-glass-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.step__tag .icon {
  flex: none;
  color: var(--color-accent-text);
}

@media (min-width: 60rem) {
  .steps__list {
    margin-top: var(--space-16);
  }

  .steps__list::before,
  .steps__list::after {
    inset-inline-start: 50%;
  }

  .step {
    grid-template-columns: minmax(0, 1fr) var(--hw-marker) minmax(0, 1fr);
    column-gap: var(--space-10);
    align-items: center;
  }

  .step__marker {
    grid-column: 2;
    grid-row: 1;
  }

  /* Odd steps: words on the left, picture on the right. The block is pushed
     against the rail with auto margin while the text inside it stays
     left-aligned — right-aligned sentences are harder to read and a
     right-aligned tick list puts its ticks on the wrong side.

     The explicit width is load-bearing: an auto margin on a grid item turns
     off the default stretch and sizes it to its contents instead, and a
     lazily-loaded photograph has no contents yet — which collapses the whole
     column to two pixels until it arrives. */
  .step__body {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    margin-inline-start: auto;
  }

  .step__media {
    grid-column: 3;
    grid-row: 1;
    width: 100%;
    max-width: 30rem;
    margin-inline-end: auto;
  }

  /* Even steps: the same thing mirrored. */
  .step:nth-child(even) .step__body {
    grid-column: 3;
    margin-inline-start: 0;
    margin-inline-end: auto;
  }

  .step:nth-child(even) .step__media {
    grid-column: 1;
    margin-inline-start: auto;
    margin-inline-end: 0;
  }

  /* The tilt. Towards the rail on both sides, so the two columns lean in at
     each other rather than all leaning the same way. */
  .step__fig {
    transform: perspective(var(--hw-media-depth)) rotateY(calc(var(--hw-media-tilt) * -1));
  }

  .step:nth-child(even) .step__fig {
    transform: perspective(var(--hw-media-depth)) rotateY(var(--hw-media-tilt));
  }

  .step__fig:hover,
  .step__media:focus-within .step__fig {
    transform: perspective(var(--hw-media-depth)) rotateY(0deg) translateY(-4px) scale(1.012);
    box-shadow: var(--shadow-float);
  }
}


/* --------------------------------------------------------------------------
   4. THE NFC PANEL
   The one part of the journey that happens away from a screen, so it leaves
   the rail behind and becomes a dark bento of frosted tiles over a
   photograph. Always dark, in both themes, because that is what makes it
   read as a different place on the page.
   -------------------------------------------------------------------------- */
.hwnfc {
  padding-block: var(--space-section-sm);
}

.hwnfc__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  border-radius: var(--hw-cta-radius);
}

.hwnfc__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hwnfc__panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(60% 70% at 85% 10%, rgb(var(--rgb-blue-500) / 0.35) 0%, transparent 70%),
    linear-gradient(180deg, rgb(var(--rgb-slate-900) / 0.88) 0%, rgb(var(--rgb-slate-900) / 0.95) 100%);
}

.hwnfc__head {
  display: grid;
  gap: var(--space-3);
  max-width: 46ch;
  margin-bottom: var(--space-8);
}

.hwnfc__title {
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.hwnfc__lede {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* ---- Bento ---- */
.bento {
  display: grid;
  gap: var(--hw-bento-gap);
}

/* No backdrop blur on these, deliberately. They sit on an overlay that is
   already nine-tenths opaque, so there is nothing left behind them to blur —
   and six stacked blur layers over a photograph, for an effect nobody can
   see, is a bill only a cheap phone ends up paying. The frosting on this
   page is spent where it reads: the labels lying on the photographs. */
.bento__item {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  min-height: var(--hw-bento-min);
  border: 1px solid var(--color-border);
  border-radius: var(--hw-bento-radius);
  background: var(--color-surface-translucent);
  box-shadow: var(--shadow-inset-top);
}

.bento__item h3 {
  margin: 0;
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
}

.bento__item p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.bento__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
}

/* The picture tile carries no padding — it is the picture. */
.bento__item--media {
  padding: 0;
  overflow: hidden;
  min-height: 15rem;
}

.bento__item--media img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
}

.bento__item--lead {
  gap: var(--space-4);
}

.bento__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
}

.bento__price b {
  font-size: var(--text-h4);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}

.bento__price span {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

@media (min-width: 48rem) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .bento__item--media { grid-column: span 7; grid-row: span 2; }
  .bento__item--lead  { grid-column: span 5; }
  .bento__item--wide  { grid-column: span 5; }
  .bento__item--third { grid-column: span 4; }
}


/* --------------------------------------------------------------------------
   5. CLOSING PANEL
   -------------------------------------------------------------------------- */
.hwcta {
  padding-block: var(--space-section-sm) var(--space-section);
}

.hwcta__panel {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-5);
  overflow: hidden;
  min-height: var(--hw-cta-min);
  padding: clamp(1.5rem, 1rem + 2.6vw, 3.5rem);
  border-radius: var(--hw-cta-radius);
}

.hwcta__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hwcta__panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--hw-cta-overlay);
}

.hwcta__title {
  max-width: 18ch;
  margin: 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.hwcta__lede {
  max-width: 48ch;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.hwcta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hwcta__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}

.hwcta__note .icon { flex: none; }


/* --------------------------------------------------------------------------
   6. REDUCED MOTION
   The tilt is decoration; the rail fill is feedback. Both are switched off
   for anyone who has asked for less movement — the fill simply stops being
   animated, it does not stop being drawn.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .step__fig,
  .step:nth-child(even) .step__fig,
  .step__fig:hover,
  .step__media:focus-within .step__fig {
    transform: none;
  }

  .steps__list::after,
  .step__marker,
  .hwjump__link {
    transition: none;
  }
}