/* ============================================================================ Free Trial final CTA — "Pass it. Get paid. Buy your next." Figma 774:330453 "Frame 2147259241" (1512 x 1597), file rijNBFC24rPaqbSoj29uvJ. HEIGHT — read this before touching min-height. The frame is 1597 tall but that INCLUDES the site footer as a child: 774:330484 "Frame 2147259186", 1488 x 803, at (12, 793.1). The footer ships as its own reusable band (atlas-footer.css / fragments/footer.html), so this file stops at the footer's outer margin: 1597 - 803 = 794. Reserving the full 1597 leaves an 803px hole above the footer — the exact trap the home band hit. GRADIENTS: re-derived from gradientHandlePositions in pixel space. 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. Per-paint opacity is folded into the rgba() alphas (the REST `spec` view omits it). Figma child order is back-to-front. Paint order, footer excluded: 774:330454 bg photo 1512x851 @ (0, 0.1), blendMode SCREEN 774:330455 Ellipse 473 1693x956 @ (27, -124.9), #051F1D, blur, HARD_LIGHT 774:330456 black plate 737x41 @ (388, 724.1), blur 774:330457 "light" haze 1764.3x1464.1 @ (-126, -351.9) 774:330471 content col 558x392 @ (477, 120.1) 774:330484 FOOTER — not built here 774:330562 Mask group — its only child is isMask AND visible:false. Skipped. 774:330564 proof row 421x16 @ (545.5, 734.1) ========================================================================= */ .afxfc { position: relative; isolation: isolate; min-height: 794px; overflow: hidden; /* Two stacked linear fills with identical handles; the top one wins. The ramp finishes at 43.89% of the 1597 frame, i.e. 700.9px, and everything below that is flat #0F0F0F. Expressed in px so cutting the footer off the band does not stretch the ramp. */ background: linear-gradient(180deg, #303030 0, #0F0F0F 701px); font-family: var(--font-sans); color: var(--af-white); } .afxfc *, .afxfc *::before, .afxfc *::after { box-sizing: border-box; } /* --- 774:330454 "image 1167" — 1512x851 at y 0.1, scaleMode FILL (centre crop, no imageTransform, so `cover` is exact), blendMode SCREEN. FULL BLEED: this is a band background, not placed art. Pinned at 1512 it stops short on wider viewports and leaves a bare strip of flat band colour down the right. ------------------------------------------------ */ .afxfc__bg { position: absolute; left: 0; right: 0; top: 0; width: auto; min-width: 1512px; height: 851px; background: url('/assets/figma/ftc-bg.webp') center / cover no-repeat; mix-blend-mode: screen; pointer-events: none; } /* --- 774:330455 "Ellipse 473" — 1693x956 at (27, -124.9), #051F1D, LAYER_BLUR 516.4 (Figma radius is 2x the CSS blur() value), HARD_LIGHT. 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 photo behind it. Layer blur + hard-light alone matches the reference, so the background blur is dropped deliberately — same call as the hero and the home CTA. */ .afxfc__glow { position: absolute; left: 50%; top: -124.9px; margin-left: -729px; width: 1693px; height: 956px; background: var(--af-hero-glow); border-radius: 50%; filter: blur(258.2px); mix-blend-mode: hard-light; pointer-events: none; } /* --- 774:330456 — 737x41 at (388, 724.1), solid black, LAYER_BLUR 74.6. A soft dark plate that sits the proof row off the photo. ------------- */ .afxfc__plate { position: absolute; left: 50%; top: 724.1px; margin-left: -368px; width: 737px; height: 41px; background: var(--af-black); filter: blur(37.3px); pointer-events: none; } /* --- 774:330457 -> 774:330458 "light" — a four-group white haze at node opacity 0.3. Exported flat rather than rebuilt: it is eight overlapping blurred rectangles inside two nested rotations and nothing about it is reproducible in CSS. The clipping frame carries rotation 19.039, which Figma bakes into the export, so it is placed unrotated at its AABB origin (-126, -351.9) at 1764.3 x 1464.1. --------------------------- */ .afxfc__light { position: absolute; left: 50%; top: -351.9px; margin-left: -882px; width: 1764.3px; height: 1464.1px; pointer-events: none; } /* ---- 774:330471 — content column, 558x392 at (477, 120.1) ---------------- */ /* 477 = (1512 - 558) / 2, so it is a centred fixed column, not a padding box. The 120.1 is a MARGIN. As padding the column becomes 512 tall and the proof row lands 120px low. .afxfc is a BFC (overflow: hidden), so the margin cannot collapse out. */ .afxfc__inner { position: relative; z-index: 2; width: 558px; margin: 120.1px auto 0; display: flex; flex-direction: column; align-items: center; gap: 32px; } /* 774:330472 — column, gap 16 */ .afxfc__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } /* 774:330473 — 119x33, radius 57, padding 6/14, gap 7, no fill, BACKGROUND_BLUR 16.7 -> backdrop-filter blur(8.35px). No blend mode on this node, so the backdrop-filter is safe to ship. Saans 500 / 14 / 21px. */ .afxfc__eyebrow { display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 6px 14px; border-radius: 57px; backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px); font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white); white-space: nowrap; } .afxfc__eyebrow img { width: 16px; height: 16px; display: block; flex: none; } /* 774:330476 — headings column, gap 0, centred. 774:330478 "Buy your next." is drawn 712 wide inside a 558 column, so the heading deliberately overhangs by 77px each side. 712 is a `width`, not a max-width, and nowrap holds the line; at 558 it wraps and the band gains 80px. align-items: center keeps the overhang symmetric. */ .afxfc__h2 { margin: 0; width: 712px; flex: none; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 80px; line-height: 80px; letter-spacing: -2.4px; text-align: center; color: var(--af-white); } .afxfc__h2 span { display: block; white-space: nowrap; } /* 774:330477 "Pass it. Get paid." — 521x80. Two stacked gradient fills with identical handles; children[0] is the bottom one, so fills[1] shows. Re-derived over the 521x80 box. */ .afxfc__h2 .afxfc__h2a { background: linear-gradient(115.62deg, #F8F8F8 49.32%, #636363 93.17%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; 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:330479 — 426x63 at x 543, SF Pro 510 / 16 / 21.12px / ls -.32, node opacity .8. 426, not the column's 558: the paragraph is deliberately narrower than the heading block. The break before "One per person" is the file's own U+2028 line separator. */ .afxfc__body { margin: 0; width: 426px; font-size: 16px; line-height: 21.12px; font-weight: var(--w-medium); letter-spacing: -.32px; text-align: center; color: var(--af-white); opacity: .8; } /* 774:330480 — button row, 471x56, gap 12, align MIN */ .afxfc__ctas { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; } /* 774:330481 — 198x56, radius 100, padding 18/32, gap 8, fill lime, 1.5px INSIDE gradient stroke at .6 paint opacity, drop shadow 2/14/24 rgba(38,63,66,.12). Label textCase TITLE. Ink is #001D21, set, never inherited. */ .afxfc__lime { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 18px 32px; border: 0; border-radius: var(--r-pill); background: var(--af-lime); color: var(--af-ink-teal); box-shadow: 2px 14px 24px 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; transition: box-shadow var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } .afxfc__lime::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; } .afxfc__chev { width: 20px; height: 20px; display: block; flex: none; transition: transform var(--t-fast) var(--e-out); } /* 774:330482 — 261x55, radius 50, padding 18/32, 1px INSIDE rgba(255,255,255,.08), BACKGROUND_BLUR 27.8 -> blur(13.9px). No fill. */ .afxfc__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; backdrop-filter: blur(13.9px); -webkit-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; text-transform: capitalize; color: var(--af-white); text-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } /* ---- 774:330564 — proof row, 421x16 at (545.5, 734.1) ------------------- */ /* 545.5 = (1512 - 421) / 2. The row sits 734.1 - (120.1 + 392) = 222px below the content column's bottom edge, so that is a margin, not padding. */ .afxfc__proof { position: relative; z-index: 2; width: 421px; margin: 222px auto 0; display: flex; flex-direction: row; align-items: center; gap: 16px; } /* 774:330566 / 330570 / 330574 — gap 8, 16x16 icon (#7CB1AC), SF Pro 510/14/14px */ .afxfc__proof span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 14px; font-weight: var(--w-medium); color: var(--af-white); white-space: nowrap; } .afxfc__proof img { width: 16px; height: 16px; display: block; flex: none; } /* ---- motion ------------------------------------------------------------ Transform and opacity only; reduced motion is neutralised globally in atlas-tokens.css. */ @media (hover: hover) and (pointer: fine) { .afxfc__lime:hover { box-shadow: 2px 14px 24px 0 rgba(38,63,66,.2); } .afxfc__lime:hover .afxfc__chev { transform: translateX(2px); } .afxfc__ghost:hover { background-color: var(--w-06); } } .afxfc__lime:active, .afxfc__ghost:active { transform: scale(.985); } .afxfc__lime:focus-visible, .afxfc__ghost:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 3px; } /* ---- narrow viewports --------------------------------------------------- The frame is only drawn at 1512; below that the fixed boxes are released. Nothing here changes the 1512 rendering. */ @media (max-width: 800px) { .afxfc { min-height: 0; padding-bottom: 96px; } .afxfc__inner { width: 100%; max-width: 558px; margin-top: 80px; padding: 0 var(--gutter); } .afxfc__h2 { width: 100%; font-size: 44px; line-height: 46px; letter-spacing: -1.32px; } .afxfc__h2 span { white-space: normal; } .afxfc__body { width: 100%; } .afxfc__ctas { flex-direction: column; align-items: stretch; width: 100%; } .afxfc__proof { width: 100%; margin-top: 64px; flex-wrap: wrap; justify-content: center; } } /* --------------------------------------------------------------------------- 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) { .afxfc__glow { filter: none; background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%); } }