/* ============================================================================
   Free Trial band 2 — "Four steps. $0 risk."
   Figma 774:269211 (1512 x 2648), file rijNBFC24rPaqbSoj29uvJ.
   Every dimension below is the value in the node JSON. Tokens come from
   atlas-tokens.css.

   This is the dark twin of the home "three steps" band (705:16456): same disc
   /bloom art rig and the same negative-gap row stack, redrawn on the shell
   gradient with four steps instead of three. Nothing is inherited from
   atlas-steps.css — that file is light-mode and its fills are wrong here.

   GRADIENTS: re-derived from gradientHandlePositions in pixel space, not taken
   from fx.py — fx.py projects the handle in normalised box space and drops the
   aspect ratio, so its angles and stops are wrong on any non-square box. Each
   value below carries its derived angle and stops, and the band fill was
   pixel-checked against the 1512x2648 reference export (y=0 -> #2F2F2F,
   y=976 -> #0E0E0E, flat after).

   PAINT OPACITY: the REST `spec` view omits per-paint opacity. The Step pill
   gradient is 9%, the three glass discs are 10/15/40% on the fill and 24% on
   the ring. Those are read off the raw fill JSON and folded into the rgba()
   alphas. Do not "correct" them.
   ========================================================================= */

/* --- 774:269211, the frame itself.
       The frame carries TWO opaque 180deg paints; the topmost one wins, and it
       is the one that renders: #303030 -> #0F0F0F at 36.85% of 2648 = y 976.
       clipsContent is false in the file, so the lower dot field bleeds 762px
       past the bottom edge; on a page band that would push a scrollbar, so the
       section clips. Declared deviation.
       Content is 120 + 321 (header) + 32 + 2055 (steps) + 120 = 2648. --------- */
.afxfs {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 36.85%);
  isolation: isolate;
}
.afxfs *, .afxfs *::before, .afxfs *::after { box-sizing: border-box; }

/* --- 774:269212 — the upper dot field. In the file it is a 1642x1370 pattern
       of ~20,000 2px ellipses under an ALPHA mask (774:269213, a 179.43deg
       ramp that only lets the pattern through in two bands). Exported already
       masked at its 1512x1234 result rather than shipping 20k DOM nodes.
   --- 774:289536 — the lower dot field, unmasked, 1642x1370 at (-98, 2040).
       Both are authored at a fixed width, so they stay CENTRED on the 1512
       stage rather than stretching; the pattern fades out at its own edges, so
       there is no seam above 1512. ------------------------------------------ */
.afxfs-dots {
  position: absolute; left: 50%; top: 0; z-index: 0;
  width: 1512px; height: 1234px; margin-left: -756px;
  background: url('/assets/figma/freetrial-dots-top.webp') no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}
.afxfs-dots--lower {
  top: 2040px; width: 1642px; height: 1370px; margin-left: -854px;   /* -98 - 756 */
  background-image: url('/assets/figma/freetrial-dots-bottom.webp');
}

/* --- 774:309924 — header 469x321 at frame x 522 (centred), column, gap 32,
       align CENTER. The frame's own y is 120, which is the section's padding. */
.afxfs-head { position: relative; z-index: 2; width: 469px; margin: 0 auto; text-align: center; }

/* 774:309926 — eyebrow row 106x33, gap 7, padding 6 0, radius 57.
   Its one fill is visible:false (the hover state), so the row has no plate.
   774:309935 — SF Pro 510 / 14 / 21px / ls -3%, #FFF. */
.afxfs-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0; padding: 6px 0; height: 33px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: var(--af-white);
}
.afxfs-eyebrow img { display: block; width: 16px; height: 16px; }

/* 774:309936 — heading frame 469x192, gap 0, two 96/96 lines, ls -3%.
   774:309937 "Four steps." carries the ramp; 774:309938 "$0 risk." is flat
   white. The ramp derives to 125.14deg with stops at 43.79% and 93.19% — the
   fill beneath it (#FFFFFF -> #CECECE) is fully covered and is not built. */
.afxfs-title {
  margin: 16px 0 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 96px; line-height: 96px; letter-spacing: -2.88px;
  color: var(--af-white);
}
.afxfs-title span { display: block; }
.afxfs-title-fade {
  background: linear-gradient(125.14deg, #F8F8F8 43.79%, #636363 93.19%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* ink guard. background-clip:text paints the gradient only inside this
     element's border box, so the descender that hangs below the last line
     box gets no paint at all and is sliced off flat. Push the paint box
     down and take the same space straight back, so the glyphs are whole
     and nothing below this element moves. */
  padding-bottom: .2em; margin-bottom: -.2em;
}

/* 774:309939 — 491x48 at x -11 of the 469 header, i.e. 11px wider on each
   side. SF Pro 510 / 16 / 24px / ls -3%, opacity .8. */
.afxfs-sub {
  width: 491px; margin: 32px -11px 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px;
  color: var(--af-white); opacity: .8;
}

/* --- 774:309858 — steps column 1073x2055 at frame x 220 (centred), column,
       gap 9, align CENTER. Header ends at 441, this starts at 473, so 32 of
       MARGIN. Padding here would inflate the box and drag the rows down. ---- */
.afxfs-steps { position: relative; z-index: 1; width: 1073px; margin: 32px auto 0; }

/* 774:309859 — the four rows, 1073x1990, column, gap -70 (they overlap).
   4 x 550 - 3 x 70 = 1990. */
.afxfs-rows { position: relative; }

/* 774:309860 / 09869 / 09878 / 09890 — row 1073x550, gap 60, align CENTER.
   Art 509.1 + 60 + card 503.9 = 1073. Rows 1 and 3 put the art on the left.
   The card is first in the DOM in every row so the reading order is always
   badge -> heading -> body; row-reverse does the visual swap without touching
   source order. */
.afxfs-row {
  position: relative;
  display: flex; flex-direction: row; align-items: center; gap: 60px;
  height: 550px;
}
.afxfs-row--art-left { flex-direction: row-reverse; }
.afxfs-row + .afxfs-row { margin-top: -70px; }

/* 774:309868 etc — the step card, 503.9 x 156/182, column, gap 24. */
.afxfs-card { position: relative; z-index: 2; width: 503.9px; flex: none; }

/* I…;186:20207 — "Step n" pill, h36, row, gap 4, padding 8/12, radius 57.
   Fill is linear-gradient(83.41deg, #7CB1AC -4.5%, rgba(124,177,172,.79)
   61.69%, #FFF 106.13%) at PAINT OPACITY .09 — that 9% is why it reads as a
   dim teal wash rather than a solid chip. It is applied on its own layer so
   the ramp stays readable. Backdrop blur 8.35.
   I…;186:20209 — SF Pro 510 / 16 / 16px / ls -6%, #7CB1AC at opacity .8. */
/* the 503.9x36 row the pill lives in. A flex wrapper, not a bare inline-flex,
   so no baseline descender slack creeps into the 24px gap. */
.afxfs-pillrow { display: flex; align-items: flex-start; height: 36px; }
.afxfs-pill {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 4px;
  height: 36px; 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: var(--af-teal);
}
.afxfs-pill::before {
  content: ''; position: absolute; inset: 0; opacity: .09; pointer-events: none;
  background: linear-gradient(83.41deg, #7CB1AC -4.5%, rgba(124,177,172,.79) 61.69%, #FFFFFF 106.13%);
}
.afxfs-pill img { position: relative; display: block; width: 20px; height: 20px; }
.afxfs-pill span { position: relative; opacity: .8; }

/* I…;596:30921 — copy block, 24 below the pill, column, gap 12.
   I…;596:30917 SF Pro 590 / 24 / 31.68 / ls -3%, #FFF.
   I…;186:20210 SF Pro 510 / 20 / 26.4  / ls -3%, #FFF at opacity .7. */
.afxfs-h3 {
  margin: 24px 0 0;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 24px; line-height: 31.68px; letter-spacing: -.72px;
  color: var(--af-white);
}
.afxfs-p {
  margin: 12px 0 0;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 20px; line-height: 26.4px; letter-spacing: -.6px;
  color: var(--af-white); opacity: .7;
}

/* --- the art: 509.1 x 550, three concentric glass discs over a blurred conic
       bloom, with the render on top. Same rig as the home band, dark fills. -- */
.afxfs-art { position: relative; width: 509.1px; height: 550px; flex: none; }

/* 774:309863 — GRADIENT_ANGULAR (conic), 447.2x361.5 at (31.5,0), node opacity
   .2, LAYER_BLUR 168.44 (Figma radius is 2x the CSS one -> 84.22px). The
   handle resolves to a start angle of 224.8deg. */
.afxfs-bloom {
  position: absolute; left: 31.5px; top: 0; width: 447.2px; height: 361.5px;
  opacity: .2; filter: blur(84.22px); border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 224.8deg at 50% 50%,
              #053F3B 27.58%, #7CB1AC 58.86%, #053F3B 75.48%, #F4F7FF 96.21%);
}

/* 774:309864 / 09865 / 09866 — the discs. Stroke is 1.319 wide and CENTER
   aligned, drawn as a gradient ring via the padding/mask recipe because a
   border cannot take a gradient. BACKGROUND_BLUR 65.95 on all three (Figma
   radius is 2x the CSS one -> 32.97px). */
.afxfs-disc {
  position: absolute; border-radius: 50%; pointer-events: none;
  -webkit-backdrop-filter: blur(32.97px); backdrop-filter: blur(32.97px);
}
.afxfs-disc::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; padding: 1.32px;
  -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;
}
/* 774:309864 — fill paint opacity .10, so .18 x .10 = .018; ring paint .24 */
.afxfs-disc--1 {
  left: 0; top: 40.9px; width: 509.096px; height: 509.096px;
  background: linear-gradient(180deg, rgba(0,38,34,.018) 0%, rgba(15,15,15,0) 99.39%);
}
.afxfs-disc--1::before { background: linear-gradient(115.75deg, rgba(143,232,223,.24) 16.2%, rgba(255,255,255,0) 29.91%); }
/* 774:309865 — fill paint opacity .15 */
.afxfs-disc--2 {
  left: 57.3px; top: 98.2px; width: 394.565px; height: 394.565px;
  background: linear-gradient(180deg, rgba(73,102,99,.15) 0%, rgba(15,15,15,0) 100%);
}
.afxfs-disc--2::before { background: linear-gradient(115.75deg, rgba(255,255,255,.24) 16.2%, rgba(255,255,255,0) 29.91%); }
/* 774:309866 — fill paint opacity .40, so .23 x .40 = .092 */
.afxfs-disc--3 {
  left: 115.8px; top: 156.7px; width: 277.517px; height: 277.517px;
  background: linear-gradient(141.3deg, rgba(79,129,124,.092) 22.35%, rgba(15,15,15,0) 52.96%);
}
.afxfs-disc--3::before { background: linear-gradient(117.02deg, rgba(255,255,255,.24) 16.92%, rgba(255,255,255,0) 41.98%); }

/* 774:309867 / 09877 / 09885 / 09899 — the renders. Every fill is a CROP with
   an imageTransform, not a cover, so each one was exported from Figma at its
   drawn box (2x) and is placed 1:1. Width and height do the scaling and the
   intrinsic ratio is deliberately ignored. */
.afxfs-render { position: absolute; z-index: 1; display: block; pointer-events: none; }
.afxfs-render--1 { left: 67px;   top: 106px; width: 375px; height: 375px; }
.afxfs-render--2 { left: 43.1px; top: 74px;  width: 402px; height: 402px; }
.afxfs-render--3 { left: 55px;   top: 110px; width: 399px; height: 364px; }
.afxfs-render--4 { left: 56.1px; top: 90px;  width: 379px; height: 335px; }

/* 774:309900 / 774:309910 — the two badges over step 4's render, inside
   774:309898 (471x335 at art-relative 18.1, 90). Both are h58, row, gap 6,
   padding 8/24, radius 58, fill #000 at paint opacity .1, GLASS, drop shadow
   6/12/17.6 rgba(0,0,0,.35) and an inner shadow 3/-4/4.8 rgba(124,177,172,.32).
   DECLARED DEVIATIONS: Figma's GLASS effect exposes no radius and has no CSS
   equivalent, so it is approximated with a backdrop blur (the same call
   atlas-chrome.css makes for the navbar); and the inner shadow's LINEAR_DODGE
   blend cannot be expressed on a CSS inset shadow, so it is composited
   normally.
   774:309909 / 774:309922 — SF Pro 860 / 28 / 42 / ls -3%, each with its own
   white -> #344543 ramp. */
.afxfs-badge {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 58px; padding: 8px 24px;
  border-radius: 58px;
  background: rgba(0,0,0,.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 6px 12px 17.6px rgba(0,0,0,.35),
              inset 3px -4px 4.8px rgba(124,177,172,.32);
  pointer-events: none;
}
.afxfs-badge img { display: block; width: 28px; height: 28px; }
.afxfs-badge span {
  font-family: var(--font-display); font-weight: var(--w-heavy);
  font-size: 28px; line-height: 42px; letter-spacing: -.84px;
  white-space: nowrap;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.afxfs-badge--clock { left: 18.1px;  top: 108px; width: 195px; }
.afxfs-badge--coin  { left: 242.1px; top: 341px; width: 247px; }
.afxfs-badge--clock span { background: linear-gradient(59.01deg,  #FFFFFF 67.88%, #344543 126.94%); }
.afxfs-badge--coin  span { background: linear-gradient(121.93deg, #FFFFFF 43.79%, #344543 105.52%); }

/* --- 774:309887 — the wide hairline sweep, dropped into row 3 at (-220, 41),
       i.e. frame x 0 / y 1474. The row is 1073 wide, so 50% - 756 lands its
       left edge on the frame's. Both strokes are #04294D at 21% and 80% node
       opacity: on this near-black band it is all but invisible, which is what
       the file draws. Kept for fidelity, 4KB. ------------------------------ */
.afxfs-sweep {
  position: absolute; left: 50%; top: 41px;
  width: 2011.5px; height: 836.5px; margin-left: -756px;
  background: url('/assets/figma/freetrial-connector.svg') no-repeat 0 0 / 100% 100%;
  pointer-events: none;
}

/* --- 774:309940 — the S-curve that threads the four steps together. It is the
       LAST child of the frame, so it draws over the cards, the art and the
       CTA. Group is 1089x1789 at frame (220, 514) with group opacity .7; the
       two vectors carry their own .45 / .21, which Figma bakes into the SVG
       exports. Each export is its render bounds, 1075x1791 at (219, 513), i.e.
       one pixel of stroke bleed outside the node box. ---------------------- */
.afxfs-scurve {
  position: absolute; z-index: 3; left: 50%; top: 514px;
  width: 1089px; height: 1789px; margin-left: -536px;   /* 220 - 756 */
  opacity: .7; pointer-events: none;
}
.afxfs-scurve i {
  position: absolute; left: -1px; top: -1px; width: 1075px; height: 1791px;
  background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%;
}
.afxfs-scurve i:nth-child(1) { background-image: url('/assets/figma/freetrial-scurve-a.svg'); }
.afxfs-scurve i:nth-child(2) { background-image: url('/assets/figma/freetrial-scurve-b.svg'); }
/* 774:309943 "blur" — 548.08x195.02 at group-relative (540.9, 904.2), a black
   radial at paint opacity .1 under the group's .7, so 7% at the centre.
   DECLARED DEVIATION: its BACKGROUND_BLUR 2.5 (CSS 1.25px) is dropped — a
   1px backdrop-filter over a 548x195 plate costs a compositing layer and
   changes nothing you can see. */
.afxfs-scurve b {
  position: absolute; left: 540.9px; top: 904.2px; width: 548.08px; height: 195.02px;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 100%);
}

/* --- 774:309923 — the lime CTA, 241x56, 9 below the rows and centred.
       Same component as the hero button: radius 100, fill #E1FFA0, drop shadow
       2/14/24.1 rgba(38,63,66,.12), 1.5px INSIDE gradient stroke whose paint
       carries opacity .6 (folded into the alphas). Label carries textCase
       TITLE. Ink is #17301F — set, never inherited. ------------------------- */
.afxfs-cta {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 241px; height: 56px; margin: 9px auto 0;
  padding: 18px 32px;
  border-radius: var(--r-pill);
  background: var(--af-lime);
  box-shadow: 2px 14px 24.1px 0 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;
  color: var(--af-lime-ink);
  transition: transform var(--t-instant) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}
.afxfs-cta::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(125.04deg,
              rgba(5,63,59,.6) 40.72%, rgba(5,63,59,.162) 68.58%, rgba(5,63,59,.6) 94.89%);
  -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;
}
.afxfs-cta img { display: block; width: 20px; height: 20px;
                 transition: transform var(--t-fast) var(--e-out); }

/* ============================================================================
   Motion. Existing --t-* / --e-* tokens only, transform and opacity only.
   The discs, the sweep and the S-curve are static, as drawn — nothing here
   drifts on its own and nothing is hidden pending a scroll.
   ========================================================================= */
.afxfs-render { transition: transform var(--t-slow) var(--e-out); }

@media (hover: hover) and (pointer: fine) {
  .afxfs-cta:hover { box-shadow: 2px 18px 30px rgba(38,63,66,.18); }
  .afxfs-cta:hover img { transform: translateX(2px); }
  .afxfs-row:hover .afxfs-render { transform: translateY(-4px); }
}
.afxfs-cta:active { transform: scale(.97); }

.afxfs a:focus-visible {
  outline: 2px solid var(--af-lime); outline-offset: 3px; border-radius: var(--r-pill);
  transition: outline-offset var(--t-fast) var(--e-out);
}

/* ============================================================================
   Below 1512 the 1073 column no longer fits. The rows stack, the negative gap
   goes away, and the two decorative sweeps are dropped rather than left to
   float over a layout they were never drawn for. The file has no frames below
   1512, so everything here is derived, not matched.
   ========================================================================= */
@media (max-width: 1152px) {
  .afxfs { padding: 96px 0; }
  .afxfs-head { width: 100%; max-width: 469px; padding: 0 var(--gutter); }
  .afxfs-title { font-size: 64px; line-height: 66px; letter-spacing: -1.92px; }
  .afxfs-sub { width: auto; max-width: 491px; margin: 32px auto 0; }
  .afxfs-steps { width: 100%; max-width: 1073px; padding: 0 var(--gutter); }
  .afxfs-row { gap: 32px; }
  .afxfs-card { width: auto; flex: 1 1 auto; min-width: 0; }
  .afxfs-scurve, .afxfs-sweep, .afxfs-dots--lower { display: none; }
}
@media (max-width: 860px) {
  .afxfs-title { font-size: 44px; line-height: 46px; letter-spacing: -1.32px; }
  .afxfs-row, .afxfs-row--art-left { flex-direction: column; height: auto; gap: 8px; }
  .afxfs-row + .afxfs-row { margin-top: 32px; }
  .afxfs-art { transform: scale(.78); transform-origin: top center; margin-bottom: -120px; }
  .afxfs-card { width: 100%; }
  .afxfs-p { font-size: 18px; line-height: 24px; }
}