/* ============================================================================
   Free Trial band 1 — hero.  Figma 774:269166 (1512 x 890), file
   rijNBFC24rPaqbSoj29uvJ. Every dimension below is the value in the node JSON.
   Tokens come from atlas-tokens.css; the navbar is the shared .afx-nav from
   atlas-chrome.css and is NOT rebuilt 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 stop positions are wrong on any non-square
   box. Each gradient below carries its derived angle and stops.

   PAINT OPACITY: the REST `spec` view omits per-paint opacity. The lime
   button's stroke carries one (0.6), so it is folded into the rgba() alphas.
   Do not "correct" it back to --af-card-g.

   HEIGHT: 890 is the whole band including the navbar (774:269192 at y 10) and
   the stat strip (y 781..871). There is no announcement bar in this frame —
   the nav sits flush at the top of the page. If the assembled page needs
   .afx-bar above the hero, it adds 56px that the Figma frame does not have.
   ========================================================================= */

.afxfh { position: relative; min-height: 890px; overflow: hidden; background: var(--af-black); }
.afxfh *, .afxfh *::before, .afxfh *::after { box-sizing: border-box; }

/* --- 774:269166 frame fill — image 36b78910…, scaleMode FILL.
       FILL is Figma's "Fill" i.e. cover, centred. The source is 1672x941 into
       a 1512x890 box, so it scales to the height and loses 34px off each side.
       No imageTransform on this one, unlike the home hero. -------------------- */
.afxfh-bg {
  position: absolute; inset: 0;
  background: url('/assets/figma/freetrial-hero-bg.webp') no-repeat 50% 50% / cover;
  pointer-events: none;
}

/* --- 774:269167 "Ellipse 473" — 1693x956 at x -776 y 117, #051F1D,
       LAYER_BLUR 516.4 (Figma radius is 2x the CSS one -> 258.2px),
       mix-blend-mode HARD_LIGHT.
       The left edge is at x=-776 of the 1512 frame, so from a 50% origin that
       is -776 - 756 = -1532.
       DECLARED DEVIATION: the node also carries BACKGROUND_BLUR 315.6. Chrome
       composites backdrop-filter on a mix-blend-mode element as an opaque
       frosted plate over the whole ellipse, which buries the glass artwork.
       Layer blur + hard-light alone matches the reference render, so the
       background blur is dropped deliberately — same call as the home hero. */
.afxfh-glow {
  position: absolute; left: 50%; top: 117px;
  width: 1693px; height: 956px; margin-left: -1532px;
  background: var(--af-hero-glow); border-radius: 50%;
  filter: blur(258.2px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}

/* --- 774:269168 "Overlay" — 1512x900 at y 0 (the home hero puts the same
       rectangle at y 56, under the announcement bar; here it is flush). ------ */
.afxfh-overlay {
  position: absolute; left: 0; top: 0; width: 100%; height: 900px;
  background: linear-gradient(89.91deg,
              rgba(5,63,59,.62) .05%,
              rgba(194,213,213,0) 21.06%,
              rgba(194,213,213,0) 81.86%,
              rgba(5,63,59,.4) 98.4%);
  pointer-events: none;
}

.afxfh-inner { position: relative; z-index: 2; }

/* --- the content column. 774:269184 sits at x 46 and the stat rules start at
       x 46 too, so this page is drawn on a 46px gutter, not the 40px one the
       home page uses. Fixed 1512 stage, centred, so nothing left-aligns above
       the design width. --------------------------------------------------- */
.afxfh-stage { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 46px; }

/* --- 774:269184 — content frame 1054x452 at (46, 196), column, gap 32.
       The navbar is 10 (margin) + 59 (height) = 69 tall, so 196 - 69 = 127 of
       MARGIN. Padding here would inflate the box and drag every child down. */
.afxfh-body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  width: 1054px; margin-top: 127px;
}

/* 774:269185 — DM Sans 500 / 14 / 21px (150%), #FFF, 283 wide */
.afxfh-eyebrow {
  margin: 0;
  font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: var(--af-white);
}

/* 774:269186 — SF Pro 510 / 110 / 99px (90%) / ls -3% ; 760x198, i.e. two
   lines. Fixed width, not max-width: the wrap "A $1,000 / challenge. On us."
   is the design's. The fill under the white one is a near-white top-light
   ramp, derived at 126.84deg with stops at 54.88% and 93.2%. */
.afxfh-h1 {
  width: 760px; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 99px; letter-spacing: -3.3px;
  color: var(--af-white);
  background: linear-gradient(126.84deg, #F8F8F8 54.88%, #FFFFFF 93.2%);
  -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.
     This one needs the guard at the top as well: the "$" in "A $1,000" rises
     3px above the first line box and was losing its tip the same way. */
  padding-bottom: .2em; margin-bottom: -.2em;
  padding-top: .06em; margin-top: -.06em;
}

/* 774:269187 — SF Pro 510 / 18 / 27px / ls -2%, opacity .8, 556x81 (3 lines) */
.afxfh-lead {
  width: 556px; margin: 0;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px;
  color: var(--af-white); opacity: .8;
}

/* --- 774:269188 — CTA row 423x56, gap 12 ---------------------------------- */
.afxfh-ctas { display: flex; flex-direction: row; align-items: center; gap: 12px; }

/* 774:269189 — 198x56, radius 100, fill #E1FFA0, padding 18/32, gap 8,
   drop shadow 2/14/24.1 rgba(38,63,66,.12), 1.5px INSIDE gradient stroke.
   The stroke paint carries opacity .6, which is why it reads far softer than
   the home button's --af-card-g; the .6 is folded into the alphas below.
   Ink is #001D21 — set, never inherited. Both labels carry textCase TITLE. */
.afxfh-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 18px 32px; border-radius: var(--r-pill);
  background: var(--af-lime); color: var(--af-ink-teal);
  box-shadow: 2px 14px 24.1px 0 rgba(38,63,66,.12);
  font-family: var(--font-sans); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  text-transform: capitalize; text-decoration: none; white-space: nowrap; border: 0;
  transition: transform var(--t-instant) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}
/* a border cannot take a gradient, hence the padding/mask ring */
.afxfh-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(130.48deg,
              rgba(5,63,59,.6) 37.77%, rgba(5,63,59,.162) 68.02%, rgba(5,63,59,.6) 96.57%);
  -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;
}
/* I774:269189;194:75574 — the 20x20 double chevron, second stroke at .4
   opacity, ink #001D21. Byte-identical to the home export, so the existing
   file is reused rather than duplicated. */
.afxfh-chev { width: 20px; height: 20px; flex: none; display: block;
              transition: transform var(--t-fast) var(--e-out); }

/* 774:269190 — 213x55, radius 50, 1px INSIDE rgba(255,255,255,.08),
   backdrop-blur 27.8 (Figma radius is 2x the CSS one -> 13.9px), no fill */
.afxfh-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 55px; padding: 18px 32px; border-radius: var(--r-50);
  border: 1px solid var(--w-08); background: transparent;
  -webkit-backdrop-filter: blur(13.9px); backdrop-filter: blur(13.9px);
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  color: var(--af-white); text-transform: capitalize;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}

/* --- 774:269169 / 774:269174 / 774:269179 — the stat strip.
       Three 449x90 columns at x 46 / 534 / 1022, y 781. That is a 39 gap and a
       total of 1425, which is 5 wider than the 1420 the 46px gutter leaves and
       sits 2.5px right of the frame centre. Reproduced as drawn: the strip
       keeps its 449 columns and overflows the stage by those 5px on the right,
       which is invisible (the rule inside each column is only 436 wide) and
       keeps all three rules on their drawn x. The content frame ends at 648,
       so 781 - 648 = 133 of MARGIN. ---------------------------------------- */
.afxfh-stats { display: flex; flex-direction: row; gap: 39px; width: 1425px; margin-top: 133px; }
/* column: 449x90, column, gap 17. The rule is a Figma VECTOR of height 0 with
   a 1px CENTER stroke, so it contributes nothing to the 90: 0 + 17 + 73. A CSS
   hairline has to be a real 1px box, so the gap absorbs it — 1 + 16 + 73 = 90,
   and the label still lands on its drawn y of 798. */
.afxfh-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 449px; flex: none; }
/* 774:269170 — 436-wide vector with a 1px CENTER stroke rgba(255,255,255,.25) */
.afxfh-rule { width: 436px; height: 1px; background: var(--w-25); }
/* 774:269171 — 73 tall, column, gap 4 */
.afxfh-stat-body { display: flex; flex-direction: column; gap: 4px; }
/* 774:269172 — Saans 400 / 14 / 21px, opacity .8 */
.afxfh-stat-label {
  font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; color: var(--af-white); opacity: .8;
}
/* 774:269173 — Saans 600 / 32 / 48px */
.afxfh-stat-value {
  font-family: var(--font-alt); font-weight: var(--w-semi);
  font-size: 32px; line-height: 48px; color: var(--af-white);
}

/* ============================================================================
   Motion. Existing --t-* / --e-* tokens only, transform and opacity only.
   Nothing above the fold is hidden and nothing drifts on its own.
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  .afxfh-btn:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); }
  .afxfh-btn:hover .afxfh-chev { transform: translateX(2px); }
  .afxfh-btn-ghost:hover { background-color: var(--w-06); }
}
.afxfh-btn:active, .afxfh-btn-ghost:active { transform: scale(.97); }

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

/* ---------------------------------------------------------------- responsive
   The file draws this page at 1512 only, so everything below is derived rather
   than matched. Flagged for the handover.
   ========================================================================= */
/* The 1425 strip is 5px wider than the 46px gutter leaves, which is fine at the
   design width but would clip a whole rule once the stage starts shrinking, so
   below 1512 the columns become equal fractions of the column instead. */
@media (max-width: 1511px) {
  .afxfh-stats { width: 100%; gap: 39px; }
  .afxfh-stat { width: auto; flex: 1 1 0; min-width: 0; }
  .afxfh-rule { width: 100%; }
}
@media (max-width: 1180px) {
  .afxfh-body { width: 100%; }
  .afxfh-h1 { width: auto; max-width: 640px; font-size: 80px; line-height: 74px; letter-spacing: -2.4px; }
  .afxfh-stats { gap: 32px; }
}
@media (max-width: 760px) {
  .afxfh { min-height: 0; padding-bottom: 64px; }
  .afxfh-stage { padding: 0 var(--gutter); }
  .afxfh-body { margin-top: 72px; }
  .afxfh-h1 { font-size: 48px; line-height: 46px; letter-spacing: -1.44px; }
  .afxfh-lead { width: auto; }
  .afxfh-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .afxfh-btn, .afxfh-btn-ghost { width: 100%; }
  .afxfh-stats { flex-direction: column; margin-top: 56px; gap: 24px; }
  .afxfh-stat-value { font-size: 28px; line-height: 40px; }
}


/* ---------------------------------------------------------------------------
   MOBILE PERFORMANCE, 3 Aug 2026
   This decorative glow carries filter: blur(258px) over a box ~1693x956. Blur
   cost is O(area x radius), so on a phone GPU it is one of the most expensive
   things on the page — and because it sits in the backdrop root, anything that
   samples the backdrop (the mobile menu's overlay) had to resolve it first,
   which took ~15s. A 258px-blurred solid ellipse is, visually, a radial
   gradient; below 768 it is drawn as one, for nothing.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .afxfh-glow {
    filter: none;
    background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%);
  }
}