/* ============================================================================
   Home band — "From sign-up to paid in three steps".
   Figma 2N553Cls5WgWmoHrH1EVVv: desktop 3065:37590 (1512x1008),
   mobile 3116:70600 (393x861).

   REBUILT 27 Aug 2026 from the horizontal design. The previous file described
   three full-width alternating rows with overlapping art; nothing in that
   geometry survives, so it was replaced rather than extended.

   ONE COMPONENT, TWO READINGS. Desktop and mobile are the same DOM: a flex
   track of three cards. Desktop lets all three sit side by side and stops the
   scrolling; mobile makes the same track a scroll-snap rail. Building the
   mobile carousel as a second markup block would guarantee the two drift.

   LEADING. Every string in this design has lineHeightPx set explicitly, and
   several are tighter than the browser default (the card title is 24/31.68,
   the eyebrow 14/21). They are written as px, not ratios, so a font swap
   cannot change the card height.
   ========================================================================= */

/* --- 3065:37590 — the frame. Column, gap 40, padding 40/40/120, align
       CENTER. The gradient stops are 52.74% -> 92.52%, not 0 -> 100%. ----- */
.afxs {
  position: relative;
  /* clip-x only: the step art deliberately overflows its box upward, and
     `overflow: hidden` would slice it. These are legal on separate axes. */
  overflow-x: clip;
  overflow-y: visible;
  padding: 40px 40px 120px;
  background: linear-gradient(180deg, #FFFFFF 52.74%, #EBEDF2 92.52%);
  isolation: isolate;
}

/* 3108:48842 — container 1432 wide, column, gap 40, centred. */
.afxs-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1432px;
  margin: 0 auto;
}

/* --- 3065:37592 — header, column, gap 16, centred ---------------------- */
.afxs-head { width: 100%; text-align: center; }

/* 3065:37593 — eyebrow row, gap 7, padding 6 0. SF Pro 510/14/21 ls -.42. */
/* CENTRED BY ITS OWN MARGINS, not only by justify-content.
   atlas-eyebrow.css styles .afxs-eyebrow too and sets `display: inline-flex`.
   Which of the two wins is decided by stylesheet ORDER, and the order differs
   per page: index loads steps first, /competitions loads eyebrow first. When
   this rule wins the element is a block-level flex box and sat flush left.
   fit-content + auto margins centre it under either outcome. */
.afxs-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: fit-content;
  margin: 0 auto; padding: 6px 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: #0D0D0D;
}
.afxs-eyebrow img { display: block; width: 16px; height: 16px; }
.afxs-eyebrow i { font-style: normal; color: rgba(12,13,13,.6); }

/* 3065:37603 — heading, two 64/64 lines, ls -1.92. Line 1 gradient-filled. */
.afxs-title {
  margin: 16px 0 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px;
  color: #0D0D0D;
}
.afxs-title span { display: block; }
.afxs-title-fade {
  background: linear-gradient(120.95deg, #0D0D0D 63%, #CECECE 93.18%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* ink guard. background-clip:text paints only inside the border box, so a
     descender hanging below the last line box gets no paint and is sliced
     flat. Push the paint box down and take the space straight back. */
  padding-bottom: .2em; margin-bottom: -.2em;
}

/* --- 3116:134472 — the mobile progress bar. Two 4px round-capped rules,
       track #053F3B at 16%, fill #7CB1AC. Desktop has no rail to report on,
       so it is not rendered there at all. ------------------------------- */
.afxs-progress { display: none; }
.afxs-progress-fill {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: var(--af-teal, #7CB1AC);
  /* the fraction the rail has scrolled, written by atlas-steps.js. The
     fallback is one card of three, so the bar is never empty if JS is off. */
  width: calc(var(--afxs-progress, .333) * 100%);
  transition: width var(--t-fast, .16s) var(--e-out, ease-out);
}

/* --- 3073:190576 — the three cards. Row, gap 24, align CENTER. --------- */
.afxs-rail { position: relative; width: 100%; }
.afxs-track {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  margin: 0; padding: 0;
  list-style: none;
}

/* 3073:190577 — card 461.33x535, radius 32, padding 24, column, gap 24.
   Two fills: solid white, then a sage ramp running bottom-to-top. */
.afxs-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 32px;
  background:
    linear-gradient(0deg, #FFFFFF 30%, rgba(143,188,185,.32) 100%),
    #FFFFFF;
}

/* 3073:190578 — card header, column, gap 16. */
.afxs-card-head { display: flex; flex-direction: column; gap: 16px; }

/* 3073:190579 — "Step n" pill, radius 57, padding 8/12, gap 4, blur 8.35.
   The gradient carries PAINT OPACITY .12, which is why it reads as a pale
   mint wash and not a dark green pill. Applied on its own layer so the ramp
   stays under the text rather than fading it. */
.afxs-pill {
  position: relative; overflow: hidden;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  border-radius: 57px;
  -webkit-backdrop-filter: blur(8.35px); backdrop-filter: blur(8.35px);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 16px; letter-spacing: -.96px;
  color: #053F3B;
}
.afxs-pill::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(73.7deg, #053F3B 0%, rgba(5,63,59,.79) 59.83%, #FFFFFF 100%);
  opacity: .12;
  pointer-events: none;
}
.afxs-pill img { position: relative; display: block; width: 20px; height: 20px; }
.afxs-pill span { position: relative; }

/* 3073:190582 — card title 24/31.68 ls -.72, weight 590. */
.afxs-h3 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 31.68px; letter-spacing: -.72px;
  color: #0D0D0D;
}

/* 3073:190583 — the illustration box, 413.33x251 inside the card's padding.
   The art is LARGER than the box and hangs above it, so offsets are written
   as percentages of the box, not pixels: the card is fluid and pixel offsets
   would drift at every width between the two breakpoints. */
.afxs-art {
  position: relative;
  width: 100%;
  aspect-ratio: 413.33 / 251;
  /* the render overflows the top of this box by design */
  overflow: visible;
}
.afxs-render { position: absolute; display: block; width: auto; height: auto; }
/* 3073:190660 — 280x280 at box (67, -14) */
.afxs-art--1 .afxs-render { width: 67.75%; left: 16.21%; top: -5.58%; aspect-ratio: 1; }
/* 3073:190682 — 328x328 at box (43.4, -38) */
.afxs-art--2 .afxs-render { width: 79.36%; left: 10.50%; top: -15.14%; aspect-ratio: 1; }
/* 3073:190684 — 346x251 at box (34.6, 0) */
.afxs-art--3 .afxs-render { width: 83.72%; left: 8.37%;  top: 0;       aspect-ratio: 346 / 251; }

/* 3073:190668 — "Only $5 To Start", step 1 only. Radius 58, padding 8/16,
   gap 6, white at 10% with a glass inner light and a soft drop. */
.afxs-badge {
  position: absolute;
  left: 0; bottom: 9.56%;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: 58px;
  /* The node JSON says white text on a 10% white fill. That is NOT what the
     file renders: the badge carries Figma's GLASS material, which brightens
     the plate to ~#F6FAFA and flips the ink dark. Sampled off the reference
     render, the pill is near-white and the ink is #263F42 — and it has to be,
     because this badge sits over the PALE top of the card, where white text
     on a 10% white plate is invisible. Values below are the rendered truth,
     not the JSON. */
  background: rgba(249,251,251,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 6px 12px 17.6px rgba(0,0,0,.12),
              inset 3px -4px 4.8px rgba(124,177,172,.32);
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 24px; line-height: 32px; letter-spacing: -.72px;
  color: #263F42;
  white-space: nowrap;
}
.afxs-badge img { display: block; width: 28px; height: 28px; }

/* 3073:190585 — body 20/26.4 ls -.6, #3F4547. margin-top:auto pins it to the
   bottom of the card so three cards of unequal art still align their text. */
.afxs-p {
  margin: auto 0 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px;
  color: #3F4547;
}

/* 3073:190627 / 3073:190628 — the two chevrons, 60x60, centred in the 24px
   gaps. Absolutely placed rather than added to the flex track, so they add
   nothing to the track's width and cannot change where the cards land. */
.afxs-link {
  position: absolute;
  top: 50%;
  width: 60px; height: 60px;
  margin-top: -30px;
  border-radius: 999px;
  background: #F9F9F7;
  box-shadow: 0 8px 12px rgba(0,0,0,.08);
  z-index: 2;
}
.afxs-link::before {
  content: '';
  position: absolute; inset: 0;
  background: url("/assets/figma/steps-chevron.svg") center / 28px 28px no-repeat;
}
/* one card plus half a gap, less half the chevron: 33.333% of the track is
   the card edge, +12 centres it in the gap, -30 centres the chevron on it. */
.afxs-link--1 { left: calc(33.333% - 18px); }
.afxs-link--2 { left: calc(66.667% - 18px); }

/* 3108:48869 — CTA 241x56, radius 100, lime, 1.5px gradient hairline. */
.afxs-cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 241px; height: 56px;
  padding: 18px 32px; box-sizing: border-box;
  border-radius: var(--r-pill, 100px);
  background: var(--af-lime);
  box-shadow: 2px 14px 24px rgba(38,63,66,.12);
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  text-transform: capitalize; text-decoration: none;
  /* set explicitly. This is a link inside a page that colours links, and a
     lime label on a lime pill is invisible, not subtle. */
  color: var(--af-lime-ink, #001D21);
  white-space: nowrap;
}
.afxs-cta::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; background: var(--af-card-g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* ============================================================================
   Below 1200: the cards get narrow before they get short, and 20px body copy
   in a 300px column reads badly. Step down the type before the layout.
   ========================================================================= */
@media (max-width: 1200px) {
  .afxs-title { font-size: 52px; line-height: 54px; letter-spacing: -1.56px; }
  .afxs-p { font-size: 17px; line-height: 23px; letter-spacing: -.51px; }
  .afxs-badge { font-size: 20px; line-height: 28px; }
}

/* ============================================================================
   3116:70600 — mobile. The track becomes a scroll-snap rail: card 345 wide,
   gap 24, one card visible with the next peeking. The 24px section padding is
   moved onto the rail so the first card lines up with the heading while the
   rail itself still scrolls edge to edge.
   ========================================================================= */
@media (max-width: 900px) {
  .afxs { padding: 24px 0 80px; }
  .afxs-container { gap: 40px; padding: 0; }
  .afxs-head { padding: 0 24px; }
  .afxs-title { font-size: 42px; line-height: 42px; letter-spacing: -1.26px; }
  .afxs-title-fade { background: linear-gradient(165.4deg, #0D0D0D 0%, #CECECE 100%);
                     -webkit-background-clip: text; background-clip: text; }

  .afxs-progress {
    display: block;
    width: calc(100% - 48px);
    margin: 0 24px;
    height: 4px;
    border-radius: 2px;
    background: rgba(5,63,59,.16);
  }

  .afxs-rail {
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    /* the 24px gutter lives on the track, so card 1's snap position is 24px
       in and the browser snaps to it on load — scrolling by 24 and eating the
       gutter. scroll-padding moves the snapport instead, so card 1 rests
       against its gutter at scrollLeft 0. */
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* the art hangs above its box; without room the rail's own clip cuts it */
    padding-top: 40px;
    margin-top: -40px;
  }
  .afxs-rail::-webkit-scrollbar { display: none; }

  .afxs-track { padding: 0 24px; width: max-content; }
  .afxs-card {
    flex: 0 0 345px;
    width: 345px;
    gap: 16px;
    padding: 16px;
    border-radius: 24px;
    scroll-snap-align: start;
  }
  .afxs-h3 { font-size: 24px; line-height: 31.68px; }
  .afxs-p { font-size: 16px; line-height: 21.12px; letter-spacing: -.48px; }
  .afxs-badge { font-size: 20px; line-height: 32px; letter-spacing: -.6px; }
  .afxs-link { display: none; }
  .afxs-cta { margin: 0 24px; }
}

/* ============================================================================
   Motion. Transform and opacity only, existing tokens only.
   ========================================================================= */
.afxs-cta { transition: transform var(--t-instant) var(--e-out),
                        box-shadow var(--t-fast) var(--e-out); }
.afxs-chev { width: 20px; height: 20px; flex: none; transition: transform var(--t-fast) var(--e-out); }
.afxs-cta:active { transform: scale(.97); }
.afxs-render { transition: transform var(--t-slow) var(--e-out); }

@media (hover: hover) and (pointer: fine) {
  .afxs-cta:hover { box-shadow: 2px 18px 30px rgba(38,63,66,.18); }
  .afxs-cta:hover .afxs-chev { transform: translateX(2px); }
  .afxs-card:hover .afxs-render { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .afxs-cta, .afxs-chev, .afxs-render, .afxs-progress-fill { transition: none; }
  .afxs-rail { scroll-behavior: auto; }
}