/* ============================================================================ Pay Later v2 — band 6, final CTA. Figma 930:22755 "Frame 2147259241" (1512 x 1668), page 930:22278. Every value read from the node JSON via tools/figma/fx.py. Do not hand-tune: re-extract instead. fx.py already halves Figma's blur radii, so the numbers below are CSS-ready blur() / backdrop-filter values. HEIGHT. The frame is 1668 tall but child 930:22785 (1488 x 874 at y 794) is the SITE FOOTER nested inside it. The footer ships separately (fragments/footer.html + atlas-footer.css), so this band is 794 tall and ends at the footer's own outer edge. 1668 - 874 = 794. Vertical stack, all from the file, all margins (never padding): 160 content column top (930:22773 y) 371 content column height 203 gap to the proof row (734 - 531) 16 proof row height 44 gap to the footer (794 - 750) --- 794 DECLARED DEVIATIONS 1. 930:22757 "Ellipse 473" also carries BACKGROUND_BLUR 157.8. Chrome composites a backdrop-filter on a mix-blend-mode element as an opaque frosted plate over the whole ellipse, burying the photo behind it — nothing like Figma. Layer blur + hard-light alone matches the reference export, so the background blur is dropped. Same call as the identical node in atlas-final.css and atlas-hero.css. 2. 930:22757 is built in CSS rather than exported as a bitmap: at blur(258.2px) an export is a multi-megabyte bleeding PNG, and the byte-identical node already ships as CSS in atlas-final.css. 3. 930:22783's 1.5px stroke is a HARD_LIGHT gradient at paint opacity .6. Chrome blends hard-light in sRGB and Figma does not, so the stroke is pre-composited to its NORMAL equivalent (each stop's alpha x .6), which at these alphas is visually identical over lime. 4. 930:22784's DROP_SHADOW is visible:false in the file (it is the hover state) and is not shipped. 5. 930:22868 "Rectangle 161125507" is visible:false AND isMask. Its parent 930:22867 "Mask group" is therefore a 0x0 no-op. Neither is built. 6. 930:22756's image fill is scaleMode STRETCH with a rotating imageTransform, so the raw fill bytes cannot be used directly. The node was exported flat at 1516x853 (pl2-final-bg.webp) with the transform already baked in. 7. The band gradient's stops are expressed in px, not %. The ramp ends at 43.89% of the FRAME's 1668 (= 732px); against this element's 794 a percentage would land at 348 and darken the band far too early. ========================================================================= */ /* 930:22755 — 1512x1668, clipsContent. Two stacked linear fills with identical handles; the top one wins, so only fills[1] is drawn: #303030 -> #0F0F0F, 180deg, ending at 43.89% of 1668 = 732px. `isolation: isolate` confines the SCREEN and HARD_LIGHT layers to this band instead of letting them blend against whatever section precedes it. */ .pl2-final { position: relative; isolation: isolate; min-height: 794px; overflow: hidden; background: linear-gradient(180deg, var(--af-shell-top) 0, var(--af-shell-bottom) 732px); font-family: var(--font-sans); color: var(--af-white); } /* 930:22756 "image 1167" — 1516x853 at (-4, 5), blendMode SCREEN. FULL-BLEED: this is a band background, not placed art. Pinned at 1516 it stops short on wider viewports and leaves a bare strip of flat band colour down the right, so it spans the viewport and `cover` keeps the aspect. The -4 is the node's own x: kept on BOTH sides so the centred `cover` art stays centred on the band instead of sliding 4px right. */ .pl2-final__bg { position: absolute; left: -4px; right: -4px; top: 5px; width: auto; min-width: 1516px; height: 853px; background: url('/assets/figma/pl2-final-bg.webp') center / cover no-repeat; mix-blend-mode: screen; pointer-events: none; } /* 930:22757 "Ellipse 473" — 1693x956 at (27, -124), #051F1D, blur, HARD_LIGHT. A fixed decorative shape, so it stays CENTRED on the 1512 stage: -756 + 27 = -729. See deviations 1 and 2. */ .pl2-final__glow { position: absolute; left: 50%; margin-left: -729px; top: -124px; width: 1693px; height: 956px; background: var(--af-hero-glow); border-radius: 50%; filter: blur(258.2px); mix-blend-mode: hard-light; pointer-events: none; } /* 930:22758 "Rectangle 161133124" — 737x41 at (388, 725), solid black, LAYER_BLUR. The soft dark plate that sits the proof row off the photo. -756 + 388 = -368. */ .pl2-final__plate { position: absolute; left: 50%; margin-left: -368px; top: 725px; width: 737px; height: 41px; background: var(--af-black); filter: blur(37.3px); pointer-events: none; } /* 930:22759 -> 930:22760 "light" — four overlapping blurred white vector groups at node opacity 0.3. Exported flat (max alpha in the render is 24/255) rather than rebuilt: nothing about it is reproducible in CSS. Drawn 1764.3x1464.1, shipped at 882x732 — 2x is pointless for a gradient this soft. -756 + -126 = -882. */ .pl2-final__light { position: absolute; left: 50%; margin-left: -882px; top: -351px; width: 1764.3px; height: 1464.1px; background: url('/assets/figma/pl2-final-light.webp') center / 100% 100% no-repeat; pointer-events: none; } /* ---- 930:22773 — content column, 558x371 at (477, 160) ------------------ */ /* 477 = (1512 - 558) / 2, so it is a centred fixed column, not a padding box. The 160 is a MARGIN. As padding the column becomes 531 tall and every absolute offset below it lands 160px low. .pl2-final is a BFC (overflow: hidden), so the margin cannot collapse out. */ .pl2-final__inner { position: relative; z-index: 2; width: 558px; margin: 160px auto 0; display: flex; flex-direction: column; align-items: center; gap: 32px; } /* 930:22774 — column, gap 16, centred */ .pl2-final__head { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } /* 930:22775 — 166x33, radius 57, padding 6/14, gap 7, NO fill and NO stroke, BACKGROUND_BLUR -> backdrop-filter blur(8.35px). No blend mode on this node, so the backdrop-filter is safe to ship. 930:22777's node style says Saans VF-TRIAL, but every one of its 16 characters is overridden to SF Pro Medium 510 / ls -0.42 in the styleOverrideTable, so the run is SF Pro. Characters 0-7 ("Low-Risk") carry fill white at opacity .6; 8-15 (" Funding") are full white. */ .pl2-final__eyebrow { display: inline-flex; align-items: center; gap: 7px; height: 33px; padding: 6px 14px; border-radius: 57px; box-sizing: border-box; backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px); font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white); white-space: nowrap; } .pl2-final__eyebrow img { width: 16px; height: 16px; display: block; flex: none; } .pl2-final__eyebrowDim { opacity: .6; } /* 930:22778 — headings column, gap 0, centred, 558x160. 930:22779 hugs at 644 wide and 930:22780 is FIXED at 712, so the heading deliberately overhangs the 558 column by 77px each side. The 712 is a `width`, not a max-width, and nowrap holds each line: allowed to wrap at 558 the band gains 160px. align-items: center keeps the overhang symmetric. */ .pl2-final__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); } .pl2-final__h2 > span { display: block; white-space: nowrap; } /* 930:22779 "Pass First. Pay Later." — 644x80. Two stacked gradient fills with identical handles; children[0] is the bottom one, so fills[1] is what you see. Re-derived over the node's own 644x80 box (fx.py's reported angle ignores the aspect ratio), hence the explicit 644 width: the gradient must be painted across the text box, not across the 712 heading. */ .pl2-final__h2a { width: 644px; margin: 0 auto; background: linear-gradient(111.2deg, #F8F8F8 51.15%, #636363 93.16%); -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; } /* 930:22780 "Get Funded Faster" — 712x80, solid white */ .pl2-final__h2b { width: 712px; } /* 930:22781 — 400x42, SF Pro 510 / 16 / 21.12px / ls -.32, node opacity .8. The height is pinned to the node's 42: two lines at 21.12 measure 42.24 in Chrome, and that .24 propagates into the band total (794.24, not 794). */ .pl2-final__body { margin: 0; width: 400px; height: 42px; font-size: 16px; line-height: 21.12px; font-weight: var(--w-medium); letter-spacing: -.32px; text-align: center; color: var(--af-white); opacity: .8; } /* 930:22782 — button row, 416x56, gap 12, align MIN */ .pl2-final__ctas { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; } /* 930:22783 — 178x56, radius 100, padding 18/32, gap 8, fill #E1FFA0, 1.5px INSIDE gradient stroke, shadow 2/14/24.1 rgba(38,63,66,.12). Label textCase TITLE. Ink is #001D21 (--af-ink-teal), set explicitly and never inherited from the link colour. See deviation 3 for the stroke. */ .pl2-final__lime { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 18px 32px; box-sizing: border-box; border-radius: var(--r-pill); border: 0; 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; transition: box-shadow var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } .pl2-final__lime::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(133.5deg, rgba(5,63,59,.6) 35.85%, rgba(5,63,59,.162) 67.65%, rgba(5,63,59,.6) 97.68%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* I930:22783;194:75574 is a 16px slot, and the chevron instance inside it (I930:22783;194:75575) is 20px — it overflows 2px each side. Without the negative margin the button measures 182, not 178. */ .pl2-final__chev { width: 20px; height: 20px; display: block; flex: none; margin: 0 -2px; transition: transform var(--t-fast) var(--e-out); } /* 930:22784 — 226x55, radius 50, padding 18/32, no fill, 1px INSIDE rgba(255,255,255,.08), BACKGROUND_BLUR 27.8 -> blur(13.9px). Label textCase TITLE. See deviation 4 for the hidden drop shadow. */ .pl2-final__ghost { display: inline-flex; align-items: center; justify-content: center; height: 55px; padding: 18px 32px; box-sizing: border-box; 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); } /* ---- 930:22869 / 930:22870 — proof row, 467x16 at (523, 734) ------------ */ /* 523 = round((1512 - 467) / 2), so it is centred. The row sits 734 - (160 + 371) = 203px below the content column's bottom edge — a margin, not padding. The row is a HUG frame in the file, and SF Pro measures ~11px narrower in Chrome than in Figma across the three labels, so the row keeps its drawn 467 `width` and centres the slack instead of pooling it all on the right. */ .pl2-final__proof { position: relative; z-index: 2; width: 467px; margin: 203px auto 0; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; } /* 930:22871 / 22875 / 22879 — gap 8, 16px icon frame holding a 13x13 #7CB1AC vector, label SF Pro 510 / 14 / 14px / ls 0 */ .pl2-final__proof span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 14px; font-weight: var(--w-medium); letter-spacing: 0; color: var(--af-white); white-space: nowrap; } .pl2-final__proof img { width: 16px; height: 16px; display: block; flex: none; } /* ---- 930:22785 — the footer slot --------------------------------------- The footer is 1488 wide at (12, 794). 794 - (734 + 16) = 44px below the proof row. Margin, not padding; the footer's own padding is its own. */ .pl2-final__footer { position: relative; z-index: 2; margin-top: 44px; } /* ---- motion ------------------------------------------------------------ Transform and opacity only, hover behind a real pointer; reduced motion is already neutralised globally in atlas-tokens.css. */ @media (hover: hover) and (pointer: fine) { .pl2-final__lime:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); } .pl2-final__lime:hover .pl2-final__chev { transform: translateX(2px); } .pl2-final__ghost:hover { background-color: var(--w-06); } } .pl2-final__lime:active, .pl2-final__ghost:active { transform: scale(.97); } .pl2-final a:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 4px; border-radius: var(--r-pill); } /* ---- narrow viewports --------------------------------------------------- The band is only drawn at 1512. Below it the fixed boxes are released so it still reads; nothing here changes the 1512 rendering. */ @media (max-width: 1024px) { .pl2-final__h2 { width: 100%; font-size: 56px; line-height: 58px; letter-spacing: -1.68px; } .pl2-final__h2a, .pl2-final__h2b { width: auto; } } @media (max-width: 760px) { .pl2-final { min-height: 0; } .pl2-final__inner { width: auto; max-width: 100%; padding: 96px var(--gutter) 0; margin-top: 0; } .pl2-final__h2 { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; } .pl2-final__h2 > span { white-space: normal; } .pl2-final__body { width: 100%; height: auto; } /* the pinned 42 is a 1512-only fix */ .pl2-final__ctas { flex-wrap: wrap; justify-content: center; } .pl2-final__proof { width: auto; margin: 96px 0 0; padding: 0 var(--gutter); flex-wrap: wrap; justify-content: center; gap: 12px 16px; } .pl2-final__plate, .pl2-final__light { display: none; } } /* --------------------------------------------------------------------------- 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) { .pl2-final__glow { filter: none; background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%); } }