/* ============================================================================ Home band 2 — pricing. Figma 929:31205 "Forex (option 1)" (1512 x 1601). Full extraction in PRICING-BAND-SPEC.md. Every dimension below is the value in the node JSON, not an eyeball. Three rules this band lives or dies by: - Figma y offsets become MARGINS or absolute positions, never padding. Padding inflates the box and drags every child down. - Fixed Figma widths become `width`, never `max-width`. 1432 / 1016 / 400 / 558 / 352 / 968 all collapse to their content otherwise. - Five paints carry non-normal blend modes that REST does not report (spec 0.2). They are built as masked overlays with mix-blend-mode. Flatten any of them and the promo bar, Instant card, CTA or badge go visibly wrong. All money, rules, account sizes and features are bound to LAB at runtime (assets/pricing-table.js). The comp's $559 / $783 / $4,043 / "40% OFF" are illustrative and must never appear as literals. ========================================================================= */ /* 929:31205 — vertical auto-layout, padding 200 40 120, gap 40, align CENTER. The fill completes at 43.9% (y = 703) and then holds; fx.py reports the second stop at 100%, which makes the whole lower half too light. */ .afxp { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--af-shell-top) 0%, var(--af-shell-bottom) 43.9%); } /* 929:31206 — 1512x1027 at 0,0, clipsContent. Eight rotated, individually blurred rects under a 0.2 group opacity and an 18.2px group blur. REST does not return relativeTransform for this file, so the rotations are unrecoverable; it ships as the composed 2x export (spec 2.1, option 1). */ .afxp__art { position: absolute; top: 0; left: 50%; margin-left: -756px; width: 1512px; height: 1027px; background: url('/assets/figma/pricing-art.webp') no-repeat 0 0 / 1512px 1027px; pointer-events: none; } /* ---- 929:31230 — AS SEEN ON strip, 1512x81 at y 0 ----------------------- layoutPositioning ABSOLUTE, so it sits INSIDE the frame's own 200px top padding. Positioned, never padded. opacity .2 applies to the whole strip. */ .afxp__strip { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 81px; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 41px; border-top: 1px solid var(--w-56); border-bottom: 1px solid var(--w-56); opacity: .2; pointer-events: none; } /* 929:31231 — Saans 600 / 14 / 21px, textCase UPPER */ .afxp-strip__label { font-family: var(--font-alt); font-weight: var(--w-semi); font-size: 14px; line-height: 21px; text-transform: uppercase; color: var(--af-white); white-space: nowrap; flex: none; } /* 929:31232 / 929:31284 — LINEs of width 0. A 1px-wide element would push every logo along by 1px, so the rule is drawn by a pseudo-element. */ .afxp-strip__rule { position: relative; width: 0; height: 33px; flex: none; } .afxp-strip__rule::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--w-80); } .afxp-strip__logo { display: block; flex: none; } /* ---- flow children ------------------------------------------------------ */ .afxp__flow { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 40px; padding: 200px var(--gutter) 120px; box-sizing: border-box; } /* ---- 929:31220 — headline block, 558x385, column, gap 32 ---------------- */ .afxp__head { display: flex; flex-direction: column; align-items: center; gap: 32px; width: 558px; } /* 929:31221 — 558x305, column, gap 16 */ .afxp-head__stack { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; } /* 929:31222 — 211x33, radius 57, padding 6 14, gap 7. Its fill, stroke AND background blur are all visible:false, so it ships bare: the glass pill is a different variant, not a hover state. Padding and radius stay so the box still measures 211x33. */ .afxp-head__eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 57px; } .afxp-head__eyebrow img { width: 16px; height: 16px; display: block; flex: none; } .afxp-head__eyebrow span { font-family: var(--font-alt); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white); } /* 929:31225 — 558x192, column, gap 0, align CENTER */ .afxp-head__titles { display: flex; flex-direction: column; align-items: center; width: 100%; } /* 929:31226 — 586x96: the text overflows its 558 parent by 14px each side. Two stacked gradient fills; the second is opaque and completely covers the first, so only the second renders (spec 4.3). */ .afxp-head__t1 { width: 586px; flex: none; margin: 0; text-align: center; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 96px; line-height: 96px; letter-spacing: -2.88px; /* MEASURED off the reference export (9,576 glyph-interior pixels, mean error 0.7/255). The spec's 117.1deg / 48.6% starts the fade a third of a word too late; the 93.2% end stop is the spec's and is correct. */ background: linear-gradient(155.2deg, #F8F8F8 33%, #636363 93.2%); -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; } /* 929:31227 — 522x96, plain #FFFFFF */ .afxp-head__t2 { margin: 0; text-align: center; flex: none; font-family: var(--font-display); font-weight: var(--w-medium); font-size: 96px; line-height: 96px; letter-spacing: -2.88px; color: var(--af-white); } /* 929:31228 — 558x48, opacity .8, SF Pro 510 / 16 / 24px / ls -2% */ .afxp-head__sub { margin: 0; width: 558px; text-align: center; opacity: .8; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 16px; line-height: 24px; letter-spacing: -.32px; color: var(--af-white); } /* ---- 705:16155 — market switcher + challenge button, 534x49 ------------- row, gap 12, align MIN. It is the FIRST row of .afxp-table (705:16154, column, gap 12), i.e. the top-left of the pricing body above the two-column layout. It replaces the full-width "Market" card that used to open the left column: the market choice is now a compact segmented control, not a card. This whole block is markup-position + presentation. Nothing here reads or writes a price, a rule value or an account size. */ .afxp-switchrow { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; } /* 705:16156 — 300x48, fill #222222, radius 47, padding 4, gap 8, align CENTER. DEVIATION: the node draws TWO tabs at 142 FILL (4 + 142 + 8 + 142 + 4 = 300). The band offers FOUR markets, so the same control carries four and comes out 4 + 142*4 + 8*3 + 4 = 600 wide. Every tab keeps the node's 142x40 geometry, fills and type; only the count changes. Dropping Predictions and Crypto would change what the page offers, which is a product decision, not a layout one. */ .afxp-mkt { box-sizing: border-box; flex: none; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 4px; border-radius: 47px; /* node radius, no token at 47 */ background: var(--af-card); /* #222222 */ } /* I705:16156;639:8328 — resting tab: 142x40, radius 100, padding 12, gap 8, no fill. Label SF Pro 590 / 16 / lh 16 / #FFFFFF, icon 16x16. */ .afxp-mkt__tab { box-sizing: border-box; flex: none; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; width: 142px; height: 40px; padding: 12px; border: 0; border-radius: 100px; background: none; cursor: pointer; font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 16px; line-height: 16px; color: var(--af-white); white-space: nowrap; transition: background-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } /* I705:16156;639:8326 — selected tab: fill #223736, 2px INSIDE stroke at rgba(255,255,255,.14), radius 53. Same forest + hairline the rest of the band uses for a selected control, so both are tokens, not literals. */ .afxp-mkt__tab[aria-checked="true"] { border-radius: 53px; background: var(--af-forest); box-shadow: inset 0 0 0 2px var(--w-14); } /* comps 649:10839 (forex) and 649:10833 (futures), plus icon-mkt-predictions and icon-mkt-crypto. All four are inlined so the two-tone glyph can take the selected/unselected colour, exactly as the old market pills did. The labels stay #FFFFFF in every state, as the node draws them. */ .afxp-mkt__tab svg { width: 16px; height: 16px; display: block; flex: none; color: var(--af-white); } .afxp-mkt__tab[aria-checked="true"] svg { color: var(--af-lime); } .afxp-mkt__tab:active { transform: scale(.97); } .afxp-mkt__tab:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 3px; } /* 705:16157 — the challenge button, 222x49. HUG wide / FIXED tall, radius 50, padding 12/20, gap 4, 1px INSIDE stroke rgba(255,255,255,.08) and BACKGROUND_BLUR 28 -> blur(14px) (Figma blur radius is ~2x the CSS value). The stroke is an inset shadow, not a border: an INSIDE Figma stroke does not take layout, and a 1px border would push the hug width to 224 instead of 20 + 158 + 4 + 20 + 20 = 222. Label SF Pro 510 / 16 / lh 19.09 / ls -0.48. DEVIATION: the node carries textCase TITLE. It is a no-op on the string it is drawn with ("Take Challenge Guide", already title case) and it corrupts the forex label to "Start For $5", so it is not reproduced. */ .afxp-mguide { box-sizing: border-box; flex: none; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px; height: 49px; padding: 12px 20px; border: 0; border-radius: var(--r-50); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); 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-decoration: none; white-space: nowrap; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } /* 705:16159 — the 20x20 double chevron, second stroke at .4 opacity. Same export the promo bar uses. */ .afxp-mguide img { width: 20px; height: 20px; display: block; flex: none; transition: transform var(--t-fast) var(--e-out); } .afxp-mguide:active { transform: scale(.97); } .afxp-mguide:focus-visible { outline: 2px solid var(--af-lime); outline-offset: 3px; } /* ---- 929:31285 — promo bar + table, 1432x856, column, gap 40 ------------ */ .afxp__body { display: flex; flex-direction: column; gap: 40px; width: var(--page); } /* 929:31286 — 1432x57, radius 32, padding 12 404, gap 37, clipsContent. #F0F5F5 base under the teal gradient; the base never shows (spec 4.4). */ .afxp-promo { position: relative; box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 37px; height: 57px; padding: 12px 404px; border-radius: var(--r-32); overflow: hidden; background-color: var(--af-pale); /* MEASURED, not extracted. The spec's re-derived line (107.4deg, 23.1 / 55.5 / 92.6) puts the peak ~110px right of where Figma renders it and the ends ~11 levels too dark. Least-squares fit of the 2x reference export over 10,420 sampled pixels gives this line to a mean error of 0.7/255. */ background-image: linear-gradient(157.3deg, #0B4541 0.4%, #5D9794 47.4%, #0B4541 100.7%); } /* 1px INSIDE gradient stroke, blendMode OVERLAY at paint opacity .35 (spec 4.5) */ .afxp-promo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(73.3deg, rgba(255,255,255,.11) 63.1%, #FFFFFF 90.2%, rgba(255,255,255,.11) 117.9%); -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; mix-blend-mode: overlay; opacity: .35; pointer-events: none; } /* 929:31287 — 357x21, row, gap 24 */ .afxp-promo__group { display: flex; flex-direction: row; align-items: center; gap: 24px; flex: none; } .afxp-promo__txt { font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-white); opacity: .9; white-space: nowrap; } /* 929:31294 — #E1FFA0, UNDERLINE. Lime text on the bar, not a lime button. */ .afxp-promo__cta { font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-lime); text-decoration: underline; white-space: nowrap; transition: opacity var(--t-fast) var(--e-out); } /* 929:31289 / 929:31292 — 16x20 slots holding a 20x20 chevron that overflows */ .afxp-chev { position: relative; width: 16px; height: 20px; flex: none; } .afxp-chev img { position: absolute; top: -.5px; left: -2px; width: 20px; height: 20px; display: block; } .afxp-chev--promo img { left: .5px; } /* 929:31295 — 130x33, radius 28, fill #E1FFA0, 1.5px INSIDE gradient stroke at blendMode OVERLAY (spec 4.6). Ink is #053F3B and is set, never inherited: an inherited link colour on lime is the classic failure here. */ .afxp-promo__code { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 0; border-radius: var(--r-28); background: var(--af-lime); cursor: pointer; flex: none; transition: transform var(--t-instant) var(--e-out); } .afxp-promo__code span { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: var(--af-deep); white-space: nowrap; } .afxp-promo__code img { width: 16px; height: 16px; display: block; flex: none; } .afxp-promo__code::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(127.5deg, #053F3B 39.5%, rgba(5,63,59,.27) 68.3%, #053F3B 95.6%); -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; mix-blend-mode: overlay; pointer-events: none; } /* ---- 929:31304 — table shell, 1432x759, column, gap 12 ------------------ */ .afxp-table { display: flex; flex-direction: column; gap: 12px; width: 100%; } /* 929:31305 — row, gap 16. The comp aligns CENTER, which only looks right when both columns are the same height. Ours are not (the right column carries rules + bundle + price + payments), so centring left a band of dead space above and below the left column and the table read lopsided. STRETCH instead, and the Add-ons card makes up the remaining difference. */ .afxp-table__row { display: flex; flex-direction: row; align-items: stretch; gap: 16px; } /* 929:31306 — 1016 wide with layoutGrow 1, column, gap 16 */ .afxp-col { display: flex; flex-direction: column; gap: 16px; flex: 1 1 0; min-width: 0; } /* 929:31496 — 400 FIXED, column, gap 8. Relative because 929:31597 is an ABSOLUTE last child that straddles the rules card's top edge. */ .afxp-side { position: relative; display: flex; flex-direction: column; gap: 8px; width: 400px; flex: none; } /* the card shell, identical on all five: radius 32, padding 24, gap 16, #222222 */ .afxp-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--r-32); background: var(--af-card); } /* the UA's [hidden] rule is also (0,1,0) and loses to the line above, so the Model Type card stayed on screen for every market that has no variants. This has to be stated explicitly. */ .afxp-card[hidden] { display: none; } /* 929:31308 / 929:31345 — header rows, 968x27, SPACE_BETWEEN / CENTER */ .afxp-card__head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; } /* 929:31309 etc — SF Pro 510 / 18 / 27px / ls -2% */ .afxp-card__title { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 18px; line-height: 27px; letter-spacing: -.36px; color: var(--af-white); margin: 0; } /* 929:31310 / 929:31347 — hint groups, row, gap 8 */ .afxp-hint { display: flex; flex-direction: row; align-items: center; gap: 8px; } .afxp-hint__lead { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.28px; color: var(--af-white); opacity: .8; white-space: nowrap; } /* 929:31312 — link group, row, gap 4 */ .afxp-hint__link { display: flex; flex-direction: row; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; } .afxp-hint__link span { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 21px; letter-spacing: -.28px; color: var(--af-mint); white-space: nowrap; } /* 929:31313 "Take the quiz" carries textDecoration UNDERLINE and textCase TITLE; 929:31350 "Answer 3 quick questions" carries neither. */ .afxp-hint__link--underline span { text-decoration: underline; } /* ---- 929:31318 — model card row, 968x116, row, gap 8, four cards of 236 -- */ .afxp-models { display: flex; flex-direction: row; gap: 8px; } /* radius 20, padding 16, column, gap 8 */ .afxp-model { position: relative; box-sizing: border-box; flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; /* min-height, not height — see .afxp-model__desc. The row grows to its tallest card instead of clipping the fourth one. */ min-height: 116px; padding: 16px; border-radius: var(--r-20); background: rgba(45,45,45,.99); border: 0; text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } /* 8.2 selected token */ .afxp-model[aria-checked="true"] { background: var(--af-forest); box-shadow: inset 0 0 0 2px var(--w-14); } /* I...;134:8737 — title row, 204x22, SPACE_BETWEEN / CENTER, gap 4 */ .afxp-model__top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; } /* I...;133:8622 — SF Pro 590 / 18 / 18px */ .afxp-model__name { font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 18px; line-height: 18px; color: var(--af-white); } /* I...;134:8755 — tag chip, radius 57, padding 4 8, gap 7, BACKGROUND_BLUR 16.7 -> blur(8.35px). Its gradient stroke is visible:false, so the chips are fill-only. */ .afxp-model__tag { display: inline-flex; align-items: center; gap: 7px; flex: none; height: 22px; box-sizing: border-box; padding: 4px 8px; border-radius: 57px; background: var(--w-06); backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px); } .afxp-model__tag img { width: 14px; height: 14px; display: block; flex: none; } /* SF Pro 510 / 14 / 14px / ls -1%, opacity .8 */ .afxp-model__tag span { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 14px; letter-spacing: -.14px; color: var(--af-mint); opacity: .8; white-space: nowrap; } .afxp-model--popular .afxp-model__tag { background: var(--w-08); } /* I...;133:8623 — 204x54, opacity .6, SF Pro 510 / 14 / 18.48px. The 54 is a MINIMUM, not a fixed height. It was fixed, and drawn against a three-card row; the Access card makes it four, every card gets ~50px narrower, and a three-line description becomes four or five lines. With a fixed height and overflow:hidden that clipped mid-sentence with no ellipsis — measured at 50px of lost text at 1280 and 768. At 1512 nothing overflows, so min-height resolves to exactly 54 and the design width is pixel-identical to what shipped. The narrow-width media query below already did this; it just needed to be true everywhere. */ .afxp-model__desc { margin: 0; min-height: 54px; overflow: hidden; opacity: .6; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 18px; letter-spacing: -.28px; color: var(--af-white); } /* 929:31328 — the Instant card is a FEATURED treatment, not a selection state: #2D2D2D under a white gradient at SOFT_LIGHT / .62, plus a 2px lime gradient stroke at .16. Rendered flat, the white gradient is a near-white slab across the card (spec 4.7). */ .afxp-model--featured { background: var(--af-pill-off); } .afxp-model--featured::before { content: ''; position: absolute; inset: 0; border-radius: inherit; /* MEASURED. Fitting angle, stops and amplitude to 5,159 clean pixels of the reference export (mean error 0.31/255) gives 201.6deg and 21 / 55 / 87, against the spec's 195.7deg and 21 / 58.8 / 94.6 — the first stop is the spec's, the other two drift. DECLARED DEVIATION on the opacity: the paint opacity in the file is 0.62. Chrome blends soft-light in sRGB and Figma does not, so 0.62 peaks at #535353 over the #2D2D2D base where Figma renders #444444. The fitted amplitude is +22.85, and white soft-light over #2D2D2D peaks at #6B6B6B in Chrome, so 22.85/62.1 = .37. At 0.62 the sheen is half again too bright. */ background: linear-gradient(201.6deg, rgba(255,255,255,0) 21%, #FFFFFF 55%, rgba(255,255,255,0) 87%); mix-blend-mode: soft-light; opacity: .37; pointer-events: none; } .afxp-model--featured::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: linear-gradient(192.5deg, #E1FFA0 0%, rgba(225,255,160,.08) 44.6%, #E1FFA0 106.6%); -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; opacity: .16; pointer-events: none; } .afxp-model--featured .afxp-model__name { color: var(--af-lime); } .afxp-model--featured .afxp-model__tag { background: rgba(225,255,160,.12); } .afxp-model--featured .afxp-model__tag span { color: var(--af-lime); } .afxp-model--featured .afxp-model__top, .afxp-model--featured .afxp-model__desc { position: relative; z-index: 1; } /* ---- 929:31331 / 929:31338 / 929:31353 — pill rows, 968x50, gap 8 ------- */ .afxp-pills { display: flex; flex-direction: row; gap: 8px; } /* 292:9 — 50 tall, radius 100 (53 on the selected variant: identical at this height, so both are 999px). Unselected padding 16 / gap 16, selected 16 / 8. */ .afxp-pill { flex: 1 1 0; min-width: 0; box-sizing: border-box; height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 16px; border: 0; border-radius: 999px; background: rgba(45,45,45,.99); cursor: pointer; font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 18px; line-height: 18px; color: var(--af-white); white-space: nowrap; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } .afxp-pill[aria-checked="true"] { gap: 8px; background: var(--af-forest); box-shadow: inset 0 0 0 2px var(--w-14); } /* 929:31354/76/91 — platform pills: clipsContent, gap 27, padding 9 24 */ .afxp-pill--plat { gap: 27px; padding: 9px 24px; overflow: hidden; } .afxp-pill--plat[aria-checked="true"] { gap: 27px; } .afxp-pill--plat img { display: block; height: 32px; width: auto; flex: none; } /* 929:31392 — the MT5 mark is a raster, drawn at 116.7x32 and 80% opaque */ .afxp-pill--plat img.afxp-plat__mt5 { opacity: .8; } /* ---- 929:31497 — rules card, 400x387 ----------------------------------- */ /* 929:31499 — 352x271, column, gap 0. Six rows of exactly 271/6 = 45.1667, so the heights are set, not derived from the 14px padding. */ .afxp-rules { display: flex; flex-direction: column; } .afxp-rule { box-sizing: border-box; height: 45.1667px; padding: 0 24px; border-radius: 54px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .afxp-rule:nth-child(even) { background: var(--w-04); } /* 929:31501 — the 0.6 opacity is on the label GROUP, not the text colour, or the info icon comes out a different shade than the design. */ .afxp-rule__k { display: flex; flex-direction: row; align-items: center; gap: 6px; opacity: .6; } .afxp-rule__k img { width: 18px; height: 18px; display: block; flex: none; } .afxp-rule__k span, .afxp-rule__v { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 20px; letter-spacing: -.28px; color: var(--af-white); white-space: nowrap; } .afxp-rule__v { text-align: right; } /* 929:31530 — Average Reward, 352x52, radius 92, padding 8 24, reuses the selected token as an emphasis surface (it is not selectable). */ .afxp-avg { box-sizing: border-box; height: 52px; padding: 8px 24px; border-radius: 92px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; background: var(--af-forest); box-shadow: inset 0 0 0 2px var(--w-14); } .afxp-avg__k { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 16px; line-height: 24px; color: var(--af-white); opacity: .6; white-space: nowrap; } /* 929:31533 — SF Pro 510 / 20 / 26.4px, textAlign RIGHT */ .afxp-avg__v { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 20px; line-height: 26.4px; color: var(--af-white); text-align: right; white-space: nowrap; } /* ---- 929:31534 — price + CTA card, 400x151 ----------------------------- */ /* 929:31535 — 352x31, column, CENTER/CENTER. 929:31536 — row, gap 10, counterAxisAlignItems MAX -> align-items: flex-end. The three Figma text boxes are trimmed glyph boxes (31 / 11 / 11), not line boxes, so the line-heights are set to those numbers and the baselines land together. */ .afxp-price { display: flex; flex-direction: column; align-items: center; } .afxp-price__row { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; } /* 929:31537 — SF Pro 590 / 44 / box 31 */ .afxp-price__now { font-family: var(--font-display); font-weight: var(--w-semi); font-size: 44px; line-height: 31px; color: var(--af-white); } /* 929:31538 — SF Pro 510 / 16 / box 11, STRIKETHROUGH, opacity .8 */ .afxp-price__was { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 16px; line-height: 11px; color: var(--af-white); opacity: .8; text-decoration: line-through; } /* 929:31539 — SF Pro 510 / 16 / box 11, #7CB1AC */ .afxp-price__save { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 16px; line-height: 11px; color: var(--af-teal); white-space: nowrap; } /* 929:31561 — CTA, 352x56, radius 100, #E1FFA0, padding 18 24, gap 8, 1.5px INSIDE gradient stroke at HARD_LIGHT / .60, shadow 2px 14px 24px. Ink #001D21 is set explicitly: never inherit a link colour onto lime. */ .afxp-cta { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 18px 24px; border: 0; border-radius: var(--r-pill); background: var(--af-lime); color: var(--af-ink-teal); text-decoration: none; cursor: pointer; 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; white-space: nowrap; transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out); } .afxp-cta::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(115.6deg, #053F3B 44.5%, rgba(5,63,59,.27) 69.3%, #053F3B 92.7%); -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; mix-blend-mode: hard-light; opacity: .6; pointer-events: none; } .afxp-cta img { width: 20px; height: 20px; display: block; flex: none; transition: transform var(--t-fast) var(--e-out); } /* ---- 929:32547 — account bundles, 400x390 ------------------------------ Same card shell as the other four (radius 32, padding 24, gap 16, #222222), so it takes .afxp-card and only adds its own children. The 390 is the sum of the drawn children, never a set height: 24 + 24 +16+ 16 +16+ 48 +16+ 150 +16+ 40 + 24 = 390. Every figure inside is computed from LAB.BUNDLE / LAB.bundleTotal. The comp's Save $10 / $29 / $57 / $171 are illustrative and internally inconsistent (its own $171 implies a unit price its other rows contradict), so not one of them is copied. */ /* 929:32548 — 142x24, row, gap 16. SF Pro 510 / 24 / 24px / ls -3%. Both this and the meta row are

: the UA's 1em margin is zeroed or the card measures 454 instead of 390, exactly as it did on the eyebrow chip. */ .afxp-bundle__head { margin: 0; display: flex; flex-direction: row; align-items: center; gap: 16px; } .afxp-bundle__head span { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 24px; line-height: 24px; letter-spacing: -.72px; color: var(--af-white); white-space: nowrap; } /* 929:32551 — 352x16, row, gap 16, opacity .8. The three glyphs are loose VECTORs in the file with no export, so the shared iconsax set from pricing-table.js (LAB.ICONS) is reused rather than inventing three assets. The .3 sits on the icon FRAME and the .8 on the label, exactly as drawn — flatten either into the other and both come out the wrong shade. */ .afxp-bundle__meta { margin: 0; display: flex; flex-direction: row; align-items: center; gap: 16px; opacity: .8; } .afxp-bmeta { display: flex; flex-direction: row; align-items: center; gap: 4px; flex: none; } .afxp-bmeta__ic { display: block; width: 16px; height: 16px; flex: none; opacity: .3; color: var(--af-white); } .afxp-bmeta__ic svg { display: block; width: 16px; height: 16px; } .afxp-bmeta span { opacity: .8; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 14px; color: var(--af-white); white-space: nowrap; } /* 929:32564 — Single Account | Buy in Bundle, 352x48. Track #2D2D2D (NOT the #222222 the headline toggle used — this one sits on a card, not the shell), radius 47, padding 4, gap 8, halves 168x40. Selected half is the 8.2 token: #223736 + a 2px INSIDE rgba(255,255,255,.14) stroke, drawn as an inset shadow so it never touches layout. Both halves' icons are visible:false in the file, so the control ships text-only. */ .afxp-bseg { display: flex; flex-direction: row; align-items: center; gap: 8px; height: 48px; box-sizing: border-box; padding: 4px; border-radius: 47px; background: var(--af-pill-off); } .afxp-bseg__btn { flex: 1 1 0; height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 16px; line-height: 16px; color: var(--af-white); white-space: nowrap; transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } .afxp-bseg__btn[aria-checked="true"] { background: var(--af-forest); box-shadow: inset 0 0 0 2px var(--w-14); } /* 929:32571 — tier list, 352x150. The outer frame's gap 12 has a single child, so it never applies: the five rows are 30 tall and butt together (5 x 30 = 150). Rows 1/3/5 carry #2A2A2A, 2/4 are bare. */ .afxp-btiers { display: flex; flex-direction: column; } .afxp-btier { box-sizing: border-box; height: 30px; padding: 0 12px; border-radius: 54px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; opacity: .3; transition: opacity var(--t-base) var(--e-out); } .afxp-btier:nth-child(odd) { background: var(--af-card-2); } /* the tier the quantity is currently on. In Single Account mode none is on and the whole list stays at the drawn .3, which is how the comp renders the four tiers the selection is not sitting on. */ .afxp-btier.is-on { opacity: 1; } .afxp-btier span { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 18.48px; letter-spacing: -.28px; color: var(--af-white); white-space: nowrap; } .afxp-btier__k { opacity: .6; } .afxp-btier__d { opacity: .8; text-align: right; } /* 929:32579 etc — #7CB1AC, right aligned */ .afxp-btier__s { color: var(--af-teal); text-align: right; } /* 929:32575 "Standard Rate" is the 1-account row's right cell and is drawn at the label's .6, not the teal the saving rows use. */ .afxp-btier__s--std { color: var(--af-white); opacity: .6; } /* 929:32592 — Quantity row, 352x40, SPACE_BETWEEN / CENTER, gap 12 */ .afxp-bqty { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; height: 40px; } .afxp-bqty__k { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 18px; line-height: 27px; letter-spacing: -.36px; color: var(--af-white); } /* 929:32594 — stepper, 110x40, radius 50, padding 4, SPACE_BETWEEN, fill and 1px INSIDE stroke both rgba(255,255,255,.08), backdrop blur 13.9. No blend mode on this one, so the blur is safe here. */ .afxp-bstep { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 110px; height: 40px; box-sizing: border-box; padding: 4px; border-radius: var(--r-50); background: var(--w-08); box-shadow: inset 0 0 0 1px var(--w-08); backdrop-filter: blur(13.9px); -webkit-backdrop-filter: blur(13.9px); } /* 929:32595 / 929:32598 — 32x32, radius 28, #7CB1AC, 1.5px INSIDE gradient stroke (161.7deg — the --af-card-g line). Glyph ink #001D21, set and never inherited. */ .afxp-bstep__btn { position: relative; box-sizing: border-box; width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-28); background: var(--af-teal); color: var(--af-ink-teal); cursor: pointer; transition: opacity var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } .afxp-bstep__btn::after { 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); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .afxp-bstep__btn svg { position: relative; display: block; width: 8px; height: 8px; } .afxp-bstep__btn[disabled] { opacity: .4; cursor: default; } /* 929:32597 — DM Sans 600 / 16 / 20.83px / ls -3%. Tabular so 1 -> 5 never nudges the two buttons. */ .afxp-bstep__n { font-family: var(--font-ui); font-weight: var(--w-semi); font-size: 16px; line-height: 20.83px; letter-spacing: -.48px; color: var(--af-white); font-variant-numeric: tabular-nums; } /* ---- 929:31562 — payment methods card, 400x124 ------------------------- */ /* 929:31563 — 352x76, row with layoutWrap WRAP, gap 12 both axes. Only the "+ 12 more" chip has a background; the six logo chips are transparent (their fills are visible:false). */ .afxp-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; width: 352px; } .afxp-pay__chip { height: 32px; box-sizing: border-box; border-radius: var(--r-8); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex: none; } .afxp-pay > img { display: block; flex: none; } /* 929:31595 — the only chip in the row that keeps its fill */ .afxp-pay__more { width: 96px; background: var(--w-08); font-family: var(--font-sans); font-weight: var(--w-semi); font-size: 16px; line-height: 24px; letter-spacing: -.32px; color: var(--af-white); white-space: nowrap; } /* ---- 929:31597 — "Fastest" badge, 109x33 at 1093,703.5 ----------------- */ /* layoutPositioning ABSOLUTE and the LAST child of the column, so it paints over everything and straddles the rules card's top edge: 18.5 above the column top, 21 in from its left. */ .afxp-badge { position: absolute; left: 21px; top: -18.5px; z-index: 3; box-sizing: border-box; height: 33px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 6px 14px; border-radius: 57px; overflow: hidden; backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px); } /* fill paint carries opacity .11 — on the fill layer only, so the label stays full strength (spec 4.8) */ .afxp-badge::before { content: ''; position: absolute; inset: 0; background: linear-gradient(84.9deg, #FFFFFF -5.1%, rgba(124,177,172,.79) 39.9%, #7CB1AC 106.9%); opacity: .11; pointer-events: none; } /* 1px INSIDE stroke, blendMode OVERLAY at .5 (spec 4.9) */ .afxp-badge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(12.4deg, #FFFFFF -212%, rgba(255,255,255,0) -81.6%, #FFFFFF 27.8%, rgba(255,255,255,0) 225.6%); -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; mix-blend-mode: overlay; opacity: .5; pointer-events: none; } .afxp-badge img { position: relative; width: 18px; height: 18px; display: block; flex: none; } /* 929:31599 — SF Pro 510 / 16 / 21.12px / ls -1%, #7CB1AC */ .afxp-badge span { position: relative; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 16px; line-height: 21.12px; letter-spacing: -.16px; color: var(--af-teal); white-space: nowrap; } /* ---- 929:31600 — feature strip, 1432x69, radius 24, padding 24, gap 24 -- */ .afxp-feats { box-sizing: border-box; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px; height: 69px; padding: 24px; border-radius: var(--r-24); background: var(--af-card); } .afxp-feat { display: flex; flex-direction: row; align-items: center; gap: 8px; flex: none; } /* 20x20 slot holding a 16.25x16.25 tick offset +1.9/+1.9, #7CB1AC */ .afxp-feat__ic { position: relative; width: 20px; height: 20px; flex: none; } .afxp-feat__ic img { position: absolute; left: 1.9px; top: 1.9px; width: 16.25px; height: 16.25px; display: block; } /* 929:31604 etc — SF Pro 400 / 14 / 21px / ls -2%, opacity .8 */ .afxp-feat span { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: 14px; line-height: 21px; letter-spacing: -.28px; color: var(--af-white); opacity: .8; white-space: nowrap; } /* ============================================================================ Interaction layer. Design tokens only, transform/opacity only, hover gated behind a real pointer, a press state on everything clickable. ========================================================================= */ .afxp-model:focus-visible, .afxp-pill:focus-visible, .afxp-cta:focus-visible, .afxp-promo__code:focus-visible, .afxp-promo__cta:focus-visible, .afxp-hint__link:focus-visible, .afxp-bseg__btn:focus-visible, .afxp-bstep__btn:focus-visible { outline: 2px solid var(--af-mint); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .afxp-model:hover:not([aria-checked="true"]):not(.afxp-model--featured) { background-color: #333333; } .afxp-model--featured:hover:not([aria-checked="true"]) { background-color: #343434; } .afxp-pill:hover:not([aria-checked="true"]) { background-color: #333333; } .afxp-cta:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); } .afxp-cta:hover img { transform: translateX(2px); } .afxp-promo__cta:hover { opacity: .82; } .afxp-hint__link:hover span { opacity: .82; } .afxp-bseg__btn:hover:not([aria-checked="true"]) { background-color: var(--w-06); } .afxp-bstep__btn:not([disabled]):hover { transform: scale(1.06); } /* 705:16156 / 705:16157 — the switcher tabs and the challenge button */ .afxp-mkt__tab:hover:not([aria-checked="true"]) { background-color: var(--w-06); } .afxp-mguide:hover { background-color: var(--w-06); } .afxp-mguide:hover img { transform: translateX(2px); } } .afxp-model:active, .afxp-pill:active, .afxp-cta:active, .afxp-promo__code:active, .afxp-hint__link:active, .afxp-bseg__btn:active { transform: scale(.97); } /* the stepper buttons are 32px, so .97 is invisible on them */ .afxp-bstep__btn:not([disabled]):active { transform: scale(.90); } /* ---------------------------------------------------------------- responsive The file has no frames below 1512 for this band, so everything under 1512 is derived, not matched. Flagged in PRICING-BAND-SPEC.md. */ @media (max-width: 1512px) { .afxp__body { width: 100%; } .afxp-promo { padding: 12px 24px; } } @media (max-width: 1180px) { /* 705:16155 is 534 wide at 1512 and 822 here (600 switcher + 12 + 210 button), which stops fitting the content column somewhere around 900. Let the button drop to its own line first, then stack properly below. The file has no frame between 393 and 1512, so this is derived. */ .afxp-switchrow { flex-wrap: wrap; } .afxp__flow { padding: 120px var(--gutter) 80px; } .afxp__head { width: 100%; } .afxp-head__t1, .afxp-head__t2 { width: 100%; font-size: 64px; line-height: 66px; letter-spacing: -1.92px; } .afxp-head__sub { width: 100%; } .afxp-table__row { flex-direction: column; align-items: stretch; } .afxp-side { width: 100%; } .afxp-feats { height: auto; flex-wrap: wrap; row-gap: 12px; } } /* Below ~900 the 600-wide switcher itself stops fitting the content column, so it adopts the 393 frame's treatment early: the 2 x 2 tab grid of 705:78738 and the guide row beneath it (705:78739), both full width. Same rules the <=767 block used to carry; hoisting the breakpoint is the only way to avoid horizontal overflow between 768 and 900. */ @media (max-width: 900px) { .afxp-switchrow { flex-direction: column; align-items: stretch; gap: 12px; } /* 705:78738 — 345x96: padding 4 + 40 + gap 8 + 40 + 4. Two columns give the drawn 164.5 tab width at 345, because (345 - 4 - 4 - 8) / 2 = 164.5. */ .afxp-mkt { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .afxp-mkt__tab { width: auto; min-width: 0; } /* 40 is under the 44px minimum, so the hit area is grown into the 8px gap and the 4px track padding — exactly half the gap each side, so adjacent tabs meet and never overlap. */ .afxp-mkt__tab { position: relative; } .afxp-mkt__tab::before { content: ''; position: absolute; left: -4px; right: -4px; top: -4px; bottom: -4px; } /* 705:78739 — 345x49, full width */ .afxp-mguide { width: 100%; } } @media (max-width: 760px) { .afxp__strip { display: none; } .afxp__flow { padding: 72px 20px 64px; } .afxp-head__t1, .afxp-head__t2 { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; } .afxp-promo { height: auto; flex-direction: column; gap: 12px; padding: 16px 20px; } .afxp-models { flex-wrap: wrap; } /* Two-up at this width, so the description takes four lines where the drawn card allows three. Both boxes were fixed heights and cut the fourth line off with no ellipsis, so let them grow here. Desktop is untouched. */ .afxp-model { flex: 1 1 calc(50% - 4px); height: auto; min-height: 116px; } .afxp-model__desc { height: auto; min-height: 54px; } .afxp-pills { flex-wrap: wrap; } .afxp-pill { flex: 1 1 calc(50% - 4px); } } /* ---- Add-ons ------------------------------------------------------------ Not in the comp. Added because the left column ran 241px shorter than the right, so the row had to centre it and the table read lopsided. Multi-select: checkout sells these as checkboxes, so these are role=checkbox buttons, not radios. Two across, because one per line ran the card far past the height it needed and left the column unbalanced again. */ .afxp-addons { flex: 1 1 auto; min-height: 0; } .afxp-addons__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .afxp-addon { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 14px 8px 12px; border-radius: var(--r-16); background: var(--af-pill-off); border: 1.5px solid transparent; font-family: var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out); } @media (hover: hover) and (pointer: fine) { .afxp-addon:hover { background: var(--af-card-2); } } .afxp-addon:active { transform: scale(.985); } /* selected — the same forest fill + hairline the model/size pills use */ .afxp-addon.is-on { background: var(--af-forest); border-color: var(--w-14); } /* the tick box */ .afxp-addon__box { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 1.5px solid var(--w-25); background: transparent; position: relative; transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out); } .afxp-addon.is-on .afxp-addon__box { background: var(--af-lime); border-color: var(--af-lime); } .afxp-addon.is-on .afxp-addon__box::after { content: ''; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 9px; border: solid var(--af-ink-teal); border-width: 0 2px 2px 0; transform: rotate(45deg); } .afxp-addon__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .afxp-addon__k { font-weight: var(--w-medium); font-size: 14px; line-height: 17px; letter-spacing: -.28px; color: var(--af-white); } .afxp-addon__sub { font-weight: var(--w-regular); font-size: 11px; line-height: 14px; letter-spacing: -.11px; color: var(--af-white); opacity: .5; } .afxp-addon__v { flex: none; font-weight: var(--w-semi); font-size: 14px; line-height: 17px; color: var(--af-teal); white-space: nowrap; } /* the all-in bundle is the upsell, so it spans the row and takes the accent */ .afxp-addon--all { grid-column: 1 / -1; } .afxp-addon--all .afxp-addon__v { color: var(--af-lime); } /* futures and any market that ships complete */ .afxp-addons__note { margin: 0; padding: 8px 12px; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 14px; line-height: 18.48px; letter-spacing: -.28px; color: var(--af-white); opacity: .6; } @media (max-width: 900px) { .afxp-addons { flex: 0 0 auto; } .afxp-addons__list { grid-template-columns: 1fr; } } /* ---- flush columns ------------------------------------------------------ align-items:stretch made the two COLUMNS equal height, but not their CONTENTS: the left column's last card ended flush while the right column's payments card stopped 38px short, leaving a gap under it. The last card in each column absorbs the remainder, and the add-on grid stretches its rows so nothing is left over inside the card either. Result: both columns end on exactly the same line with no dead space anywhere. */ .afxp-side > .afxp-card:last-of-type { flex: 1 1 auto; justify-content: center; } .afxp-addons__list { flex: 1 1 auto; align-content: stretch; } .afxp-addons__list .afxp-addon { height: 100%; } /* ============================================================================ MOBILE — Figma 705:78639 "iPhone 16 - 2", 393 x 3398 (mobile frame 705:78552). This covers the band shell: the AS SEEN ON strip, the headline block and the promo bar. The configurator itself (705:78737) keeps the existing narrow-viewport layout — see the report. SHARED FILE: everything below is inside @media (max-width:767px) and every selector is .afxp*, so no other page's desktop rendering can be reached. Desktop rules above are untouched. ========================================================================= */ @media (max-width: 767px) { /* 705:78709 sits at y 196 and the configurator ends at 3298, so the flow is 196 / 24 / 100 with the 40 gap to the promo bar unchanged. */ .afxp__flow { padding: 196px 24px 100px; } /* --- 705:78640 — the strip is BACK on mobile (the 760px rule drops it). It is 1512 wide at x -559, i.e. centred on the 393 frame and cropped, and it turns into a column: label over a 604.7-wide logo row on a 24 gap. No rules and no borders on the mobile node. --------------------------- */ /* The 1512 markup has the label and the five logos as siblings of one row, so the two-row mobile layout is done by wrapping and giving the label a 100% basis rather than by adding a wrapper element. */ /* FIXED 18 Sep 2026. This used to read `left: 50%; width: 1512px; margin-left: -756px` — the full-bleed BACKGROUND idiom, applied to a row of CONTENT. The strip is a label plus five payment logos, so pinning it to 1512 on a 393 viewport showed the middle third of it and clipped the rest; that is the cut-off payment row Lucas screenshotted. It now sits in the page column and wraps. Note the `@media (max-width: 760px)` block above ALSO sets `.afxp__strip { display: none }`. That block is earlier, so this one won and the strip was visible all along — the two disagreed and the later one decided it. Kept visible deliberately: the payment logos are trust furniture and the mobile frame draws them. */ .afxp__strip { display: flex; flex-direction: row; flex-wrap: wrap; align-content: center; justify-content: center; gap: 16px 24px; left: 0; right: 0; width: auto; margin-left: 0; height: auto; min-height: 95.6px; padding: 16px 20px; border: 0; box-sizing: border-box; } .afxp-strip__label { flex: 0 0 100%; text-align: center; } .afxp-strip__rule { display: none; } /* 705:78641 — Saans 600 / 12 / 18, UPPER */ .afxp-strip__label { font-size: 12px; line-height: 18px; } /* 705:78642 — 604.7 wide, gap 24, the five logos at ~0.75 of the 1512 sizes */ .afxp-strip__logo:nth-of-type(1) { width: 84.8px; height: 17.1px; } .afxp-strip__logo:nth-of-type(2) { width: 76.5px; height: 21.6px; } .afxp-strip__logo:nth-of-type(3) { width: 120px; height: 16.9px; } .afxp-strip__logo:nth-of-type(4) { width: 88px; height: 12.4px; } .afxp-strip__logo:nth-of-type(5) { width: 139.5px; height: 20.2px; } /* --- 705:78709 headline block, 345 x 221, gap 20 ---------------------- */ .afxp__head { width: 100%; max-width: 345px; gap: 20px; } .afxp-head__stack { gap: 8px; } /* 705:78715 / 705:78716 — two 56px lines, ls -1.68. Pinned: SF Pro Display fits each in the 345 column, the Roboto/Inter fallback would not. */ /* FIXED 18 Sep 2026. This was `width: 345px; white-space: nowrap` with a comment conceding it only fits in SF Pro Display — which means it overflowed on every Android phone and in every locale whose line runs longer than English. /futures measured 610px of text in the 345 box. The line now scales with the viewport instead of being pinned, and wraps rather than overflowing: 56px is kept from 415px up (iPhone Pro Max and wider), 393 lands at ~53px and 360 at ~48.6px. The two-line composition survives; it can no longer leave the frame. */ .afxp-head__t1, .afxp-head__t2 { width: 100%; max-width: 345px; font-size: clamp(40px, 13.5vw, 56px); line-height: 1; letter-spacing: -.03em; white-space: normal; overflow-wrap: break-word; } /* 705:78717 — 316 wide, two 24px lines. The 1512 markup carries a
after "Live preview." because that is where the 558 box breaks; the 316 mobile box breaks a phrase later, so the hard break is dropped and the text is allowed to flow. */ .afxp-head__sub { width: 100%; max-width: 316px; } .afxp-head__sub br { display: none; } /* 705:78710 stack is eyebrow + titles only (153); the sub is a sibling on a 20 gap. In the markup all three are in one gap-8 column, so the extra 12 is carried on the sub. */ .afxp-head__sub { margin-top: 12px; } /* --- 705:78719 promo bar, 345 x 90: radius 16, padding 12/20, column ---- */ .afxp__body { width: 100%; gap: 24px; } .afxp-promo { height: 90px; flex-direction: column; flex-wrap: nowrap; gap: 12px; padding: 12px 20px; border-radius: var(--r-16); background-image: linear-gradient(172.8deg, #0B4541 0%, #5D9794 46.63%, #0B4541 100%); } /* 705:78720 — 305 x 21, SPACE_BETWEEN. min-width:0 or the items refuse to shrink below their longest word and the row breaks out of the column. */ .afxp-promo__group { width: 100%; justify-content: space-between; gap: 24px; flex-wrap: nowrap; } .afxp-promo__group > * { min-width: 0; } /* 705:78728 — 130 x 33 */ .afxp-promo__code { height: 33px; } } /* Tap targets — visual box as drawn, hit area grown with a pseudo-element. */ @media (max-width: 767px) { .afxp-promo__cta, .afxp-promo__code, .afxp-hint__link, .afxp-bstep__btn, .afxp-bseg__btn { position: relative; } .afxp-promo__cta::before, .afxp-hint__link::before { content: ''; position: absolute; left: -8px; right: -8px; top: -12px; bottom: -12px; } .afxp-promo__code::before, .afxp-bstep__btn::before, .afxp-bseg__btn::before { content: ''; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px; } } /* ============================================================================ MOBILE, part 2 — the configurator itself (Figma 705:78737, 345 x 2727, inside band 705:78639). This block covers the three things the mobile frame changes that could not be done in the first CSS-only pass: 1. 705:78738 / 705:78739 — the switcher block and the guide row beneath it. Both now live in .afxp-switchrow, which is the 1512 frame's 705:16155 as well, so the two breakpoints share one element and one label. The stacking and the 2 x 2 tab grid are set from 900 down (see the @media (max-width: 900px) block above); nothing about them is repeated here. 2. 705:78793 — the account-size pills stop being a 2-up wrap and become the drawn 3-up / 2-up / 2-up grid. Nothing here touches a price, a rule value or a label. Every selector is .afxp* inside @media (max-width:767px), so no other page and no desktop rule can be reached. Desktop rules above are untouched. DECLARED DEVIATIONS, both stated again at the point they happen: - The frame draws TWO market tabs (Forex / Futures). The band ships four markets, so the control keeps all four in a 2 x 2 grid of the same tab. That makes it 96 tall where the node is 48. Dropping two markets on mobile would make the market list disagree with the 1512 rendering. - The frame's tab label is "Forex"; the built label is the band's own "Forex/CFD". Changing it is a copy change, not a layout change. ========================================================================= */ @media (max-width: 767px) { /* ---- 705:78821 / 705:78745 — card heads stack ------------------------ The frame drops the header row: title at y 0 (24 tall), the hint lead at y 40 and the hint link at y 65, i.e. a column on a 16 gap with the hint itself a column on a 4 gap. The 1512 row layout is also why "Answer 3 quick questions" was being clipped by .afxp's overflow:hidden at 393. */ .afxp-card__head { flex-direction: column; align-items: flex-start; gap: 16px; } .afxp-hint { flex-direction: column; align-items: flex-start; gap: 4px; } .afxp-hint__lead, .afxp-hint__link span { white-space: normal; } /* ---- 705:78744 — the settings cards are 16-padded on mobile, not 24. 313 inner is what the account-size grid below is drawn against: without it the 6-column track is 297 and the pills come out 94 / 144.5 instead of the drawn 99 / 152.5. 705:78834 (add-ons) is 20/16/16/16. The right-hand panel stays on 24 — 705:78850 really is padded 40/24/24/24. */ .afxp-col > .afxp-card { padding: 16px; } .afxp-col > .afxp-addons { padding: 20px 16px 16px; } /* ---- 705:78793 — account size, 313x196 -------------------------------- 705:78795 is a 160-tall column on an 8 gap holding three rows: three 99-wide pills, then two 152.5-wide pills, then two more. Six columns on an 8px gap reproduce both widths exactly at any pill count -- a 313 track gives 45.5 per column, so 2 columns = 99 and 3 columns = 152.5 -- so the first three pills span 2 and everything after spans 3. Five sizes give 3 + 2, seven give 3 + 2 + 2, both as drawn. The pill count is LAB's (sizesOf), never a literal, and is untouched by this. */ [data-afxp-sizes] { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } /* 705:78797 — 48 tall, radius 100, fill rgba(45,45,45,.99), padding 16, label SF Pro 590 / 16 / 16. Same paint as the desktop pill. */ [data-afxp-sizes] .afxp-pill { height: 48px; padding: 12px; font-size: 16px; line-height: 16px; } [data-afxp-sizes] .afxp-pill:nth-child(-n + 3) { grid-column: span 2; } [data-afxp-sizes] .afxp-pill:nth-child(n + 4) { grid-column: span 3; } /* ---- 705:78830 — trading platform, three full-width rows --------------- 313x52 each on an 8 gap, one per line. The <=760 rule wraps them 2-up, which leaves the third pill orphaned and centred on its own row; the frame draws all three full width. Same one-line-per-option change as the account-size grid above, and like it, the list itself is data (PLATS), untouched. */ [data-afxp-plats] { display: grid; grid-template-columns: 1fr; gap: 8px; } [data-afxp-plats] .afxp-pill { height: 52px; } } /* =========================================================================== PRICING TABLE LAYOUT, 6 Aug 2026 Add-ons removed from the band; the rules panel moved out of the buy rail into the left column so the two sides balance. Band measures 631px against the 1076px it was, and holds that height across every market and model. Two traps this layout has to respect, both found the hard way: 1. minmax(0, ...) on BOTH tracks. A plain 1fr carries min-width:auto, so the account-size row's min-content pushed its track past the container and shoved the rules card under the buy rail. 2. Model Type and Platforms are pinned to explicit grid columns. A hidden item leaves grid flow entirely, so without pinning Platforms jumps into the empty track on any model with no variants. ======================================================================== */ .afxp-col { display: flex; flex-direction: column; } /* the duo fills the column and both children stretch, so the config stack, the rules card and the buy rail all end on one baseline */ .afxp-duo { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 16px; align-items: stretch; } .afxp-duo > * { min-width: 0; } .afxp-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; } @media (max-width: 1200px) { .afxp-duo { grid-template-columns: minmax(0, 1fr); } } /* ---- Model Type + Platforms, matched heights ---------------------------- */ .afxp-pair { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: stretch; } .afxp-pair > [data-afxp-variantcard] { grid-column: 1; grid-row: 1; } .afxp-pair > .afxp-platcard { grid-column: 2; grid-row: 1; } .afxp-pair[data-notype="1"] { grid-template-columns: minmax(0, 1fr); } .afxp-pair[data-notype="1"] > .afxp-platcard { grid-column: 1; } @media (max-width: 900px) { .afxp-pair { grid-template-columns: minmax(0, 1fr); } .afxp-pair > .afxp-platcard { grid-column: 1; grid-row: 2; } } .afxp-platcard [data-afxp-plats] { display: flex; gap: 8px; } .afxp-platcard [data-afxp-plats] .afxp-pill { flex: 1 1 0; width: auto; min-width: 0; gap: 10px; padding: 9px 10px; } .afxp-platcard [data-afxp-plats] .afxp-pill img { height: 26px; max-width: 100%; } /* a bare icon carries the platform name in type; wordmarks already have it */ .afxp-plat__name { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 15px; line-height: 20px; letter-spacing: -.3px; color: var(--af-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } [data-afxp-variantcard] [data-afxp-variants] { /* auto columns, not 1fr each: two equal columns size themselves by the SHORTER word, which left "Standard" overflowing its own pill. The flex rule below cannot fix that on its own — this is a grid, so flex is ignored and the track width wins. */ display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 8px; } /* Pro / Standard. The base pill is flex:1 1 0 at 18px with 16px of padding, which forces both pills to the SAME width — a width set by the shorter word, "Pro". "Standard" is ~78px of text in a 50px content box, so it ran straight into both edges of its own pill. These two hug their own text instead, at a slightly smaller size: Pro comes in narrow, Standard gets the room it needs, and the pair still sits inside the 172px card. */ [data-afxp-variantcard] [data-afxp-variants] .afxp-pill { flex: 0 1 auto; width: auto; min-width: 0; padding: 16px 14px; font-size: 16px; line-height: 16px; } /* ---- account size: always two rows, always filling the width ------------ */ .afxp-sizecard { flex: 1 1 auto; } .afxp-sizecard [data-afxp-sizes] { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; align-content: center; } /* --cols is ceil(count / 2), set by renderSizes */ .afxp-sizecard [data-afxp-sizes] .afxp-pill { flex: 1 1 calc((100% - (var(--cols, 4) - 1) * 8px) / var(--cols, 4)); width: auto; min-width: 0; } /* the priced pill runs to two lines */ .afxp-pill--size { flex-direction: column; justify-content: center; gap: 2px; height: 64px; padding: 8px 12px; } .afxp-pill__k { display: block; } .afxp-pill__p { display: block; font-family: var(--font-sans); font-weight: var(--w-medium); font-size: 12px; line-height: 14px; letter-spacing: -.24px; color: var(--af-white); opacity: .6; white-space: nowrap; } .afxp-pill__p s { opacity: .55; margin-left: 3px; } /* ---- rules panel in the left column ------------------------------------ */ .afxp-duo .afxp-rule { padding: 0 16px; gap: 12px; } .afxp-duo .afxp-rule__k { min-width: 0; } /* This ellipsised "Evaluation phase" and "Minimum trading days" in ENGLISH, on five pages — an ellipsis in a rules table hides the rule rather than degrading gracefully. The label wraps now; the row has the height for it. */ .afxp-duo .afxp-rule__k { align-items: flex-start; min-width: 0; } .afxp-duo .afxp-rule__k span { overflow: visible; text-overflow: clip; white-space: normal; } /* ---- payment marks on one line ----------------------------------------- */ .afxp-pay { flex-wrap: nowrap; gap: 8px; justify-content: center; width: auto; } .afxp-pay > img { height: 26px; width: auto; } .afxp-pay img[alt="PayPal"], .afxp-pay img[alt="Bitcoin"] { display: none; } .afxp-pay__more { width: auto; padding: 0 12px; font-size: 14px; line-height: 22px; height: 26px; } /* --------------------------------------------------------------------------- MOBILE OVERFLOW FIXES, 18 Sep 2026. Appended deliberately, at the very end. This file already carries three separate `max-width: 767px` blocks plus a `760px` one, and on a specificity tie the LAST one wins — which is exactly how `.afxp__strip` came back at 1512px after an earlier block had hidden it. Anything that must not be re-overridden by a block further up belongs here. ------------------------------------------------------------------------ */ @media (max-width: 767px) { /* The bundle card's meta row is 297px wide and holds three `flex: none` chips with no wrap: "Upgrade tier" at 48-151, "3% to unlock target" at 167-317 and "TradeLocker" at 333-435. The third was painted 138px past its parent and 42px past the screen, then clipped by `.afxp`'s overflow-x: hidden. Measured at 360/393/414/430 on /access, /start-access, /crypto, /forex, /predictions, /instant-zero and /de|it/instant-funding. */ .afxp-bundle__meta { flex-wrap: wrap; gap: 8px 16px; } .afxp-bmeta { min-width: 0; } .afxp-bmeta span { white-space: normal; } /* A tier row is a 264px space-between flex row of two nowrap cells. The label plus the 24px gap plus "Save 32% - 5th free" (133px) exceeds 264, so the right cell was painted outside the row — fine at 393, over the edge at 360. The row is drawn 30px tall; it now grows instead of overflowing, and the right cell is allowed to wrap. */ .afxp-btier { height: auto; min-height: 30px; padding: 6px 12px; gap: 8px; align-items: center; } .afxp-btier span { white-space: normal; } .afxp-btier__k { min-width: 0; } .afxp-btier__s, .afxp-btier__d { flex: 0 1 auto; min-width: 0; text-align: right; } } /* ============================================================================ PRICING BAND — MOBILE REBUILD, 19 Sep 2026 Figma 2N553Cls5WgWmoHrH1EVVv -> 3116:70195 "Container", 393 x 1628. The mobile layer this replaces was built from the OLD mobile frame (705:78639, 393 x 3398): the desktop configurator stacked, with card chrome, model descriptions, per-size prices and a platform picker. It measured 2599px tall on a 393 screen. The new frame is a genuinely mobile-first composition at 1628 -- three tight chip rows, one card holding quantity / price / CTA / rules / average reward, then payments and the feature ticks. HOW THE REFLOW IS DONE. The band's markup is a desktop two-column grid: .afxp-table__row > (.afxp-col | .afxp-side), with the rules card buried in .afxp-duo and the payment row inside the same card as the price. The drawn mobile order interleaves those two branches. Rather than ask the renderer for different markup, the layout wrappers -- and only the wrappers, never a box that carries paint -- are set to `display: contents` so their children become direct children of one flex column on .afxp-table, which then orders them. The three cards the design actually draws (the fused price card, the payment card, the features card) are painted here. DECLARED DEVIATIONS, each stated again where it happens: - The platform picker and the bundle segmented control + tier ladder are not in the frame. Lucas asked to ship as drawn, so both are hidden below 768. A phone visitor cannot pick a platform or buy a bundle. - The frame's feature row is 345 wide with `clipsContent`, so three of the five ticks are cut off the right edge. Clipping a list off-screen is the thing this whole pass is fixing, so the row wraps instead and the card grows. Nothing else about it changes. - The frame draws two market tabs (Forex / Futures); the band ships whatever the market toggle says. The tab strip keeps every market and wraps. SHARED FILE: every selector is .afxp* (or a .pl2-pricing* child of one) inside @media (max-width: 767px). No desktop rule and no other band can be reached from here. ========================================================================= */ @media (max-width: 767px) { /* ---- 3116:70195 — the container is padded 80/24 with a 40 gap between its three blocks. The top padding also has to clear .afxp__strip, which is absolutely positioned at the top of the band and measures 124 tall once its logos wrap, so 124 + 36 = 160. */ .afxp__flow { padding: 160px 24px 80px; gap: 0; display: flex; flex-direction: column; align-items: center; } /* ---- 3116:70196 "Content" — 345 wide, column, gap 24, centred --------- */ .afxp__head { width: 100%; max-width: 345px; gap: 24px; align-items: center; } .afxp-head__stack { gap: 12px; align-items: center; } /* 3116:70198 — pill, padding 6/14, radius 57, gap 7, 16px coin */ .afxp-head__eyebrow { gap: 7px; padding: 6px 14px; border-radius: 57px; font-size: 14px; line-height: 21px; letter-spacing: -.42px; } .afxp-head__eyebrow img { width: 16px; height: 16px; } /* 3116:70202 / 3116:70203 — two 56px lines on a 345 column, ls -1.68. 56px is exactly what SF Pro needs to fit "Trade your way" in 345, which is why the old rule pinned it and set nowrap -- and why it overflowed on every Android phone and in every locale that runs longer. min() keeps the drawn size at the 393 design width (393 x .1425 = 56.0) and only shrinks below it; the global break-word net in atlas-tokens.css handles the rest. */ .afxp-head__t1, .afxp-head__t2 { width: 100%; max-width: 345px; font-size: min(56px, 14.25vw); line-height: 1; letter-spacing: -.03em; white-space: normal; } /* 3116:134369 — 345 wide, 16/24, ls -.32, opacity .8. The old layer pinned it to 316 and hung 12px of extra margin on it; the new frame puts it on the container's own 24 gap. */ .afxp-head__sub { width: 100%; max-width: 345px; margin-top: 0; font-size: 16px; line-height: 24px; letter-spacing: -.32px; } .afxp-head__sub br { display: none; } /* 3116:70205 — the market tabs are a 300-wide pill: bg #222, padding 4, radius 47, gap 8, each tab flex-1 padding 12 radius 100. DEVIATION: the frame draws two markets and the band can ship four, so the strip wraps rather than dropping any. */ .afxp-market, .afxp-mkt { width: 100%; max-width: 300px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 4px; background: #222; border-radius: 47px; box-sizing: border-box; } .afxp-market > *, .afxp-mkt > * { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 12px; border-radius: 100px; font-size: 16px; } /* ---- 3116:134298 "Banner" — 345 x 98, radius 16, padding 16/20, gap 12, 1px rgba(255,255,255,.11), gradient 108.65deg. The old mobile rule drew it 90 tall on a 172.8deg ramp; both are from the superseded frame. ---- */ /* The market tabs live in .afxp-switchrow inside .afxp-table, but the frame draws them in the header block, above the banner. Flattening .afxp-table into .afxp__body puts the tabs, the banner and every plan block in one ordered column. The switchrow's -16 top margin turns the body's 40 into the drawn 24 when tabs are present, and leaves 40 when they are not. */ .afxp__body { width: 100%; max-width: 345px; margin-top: 40px; gap: 0; display: flex; flex-direction: column; align-items: stretch; /* contains the CTA strip's z-index:-1 pseudo so it cannot escape to the root context and paint behind the section's gradient. */ isolation: isolate; } .afxp-switchrow { order: 1; margin: -16px 0 40px; flex-direction: column; align-items: center; gap: 12px; } .afxp-mguide { text-align: center; } .afxp-promo { order: 2; } .afxp-promo { height: auto; min-height: 98px; flex-direction: column; flex-wrap: nowrap; gap: 12px; padding: 16px 20px; border-radius: var(--r-16); border: 1px solid rgba(255,255,255,.11); box-sizing: border-box; background-image: linear-gradient(108.65deg, #0B4541 .58%, #5D9794 47.24%, #0B4541 101.97%); } /* 3116:134321 — 305 x 21, SPACE_BETWEEN, 14/21 ls -.42. The row is drawn for English ("LIMITED TIME > 40% OFF > Get Funded"); German runs to "NUR FÜR KURZE ZEIT > 40% OFF > Hol dir dein Funding", which at nowrap printed the middle item over the first and cut the link off the right edge. The row wraps and centres instead, which costs English nothing — it still fits on one line at 393. */ .afxp-promo__group { width: 100%; justify-content: center; gap: 4px 8px; flex-wrap: wrap; } .afxp-promo__group > * { min-width: 0; } .afxp-promo__txt, .afxp-promo__cta { font-size: 14px; line-height: 21px; letter-spacing: -.42px; white-space: normal; text-align: center; } /* 3116:134342 — 130 x 33, radius 28, padding 6/12, 1.5px #053f3b */ .afxp-promo__code { height: auto; min-height: 33px; gap: 8px; padding: 6px 12px; border-radius: 28px; border: 1.5px solid #053f3b; box-sizing: border-box; font-size: 14px; line-height: 21px; letter-spacing: -.42px; } /* ========================================================================= 3179:292539 "Plans" — the flatten. Wrappers only; nothing here paints. ====================================================================== */ .afxp-table, .afxp-table__row, .afxp-table__row > .afxp-col, .afxp-col > .afxp-duo, .afxp-duo > .afxp-stack, .afxp-stack > .afxp-pair, .afxp-table__row > .afxp-side, .afxp-col > section.afxp-card, .afxp-col > section.afxp-card > .afxp-card__head, .afxp-pair > section.afxp-card[data-afxp-variantcard], .afxp-pair > section.afxp-card[data-afxp-variantcard] > .afxp-card__head, .afxp-stack > section.afxp-card.afxp-sizecard, .afxp-stack > section.afxp-card.afxp-sizecard > .afxp-card__head, .afxp-side > section.afxp-card:not(.afxp-bundle) { display: contents; } /* card titles, the model blurb, the per-size price, the badge: not drawn */ .afxp-card__title { display: none; } .afxp-model__desc, .afxp-model__tag, .afxp-pill__p { display: none; } /* The platform picker is still not drawn — the chosen platform shows as a chip in the order-summary meta row instead. The bundle block came BACK in the 20 Sep revision and is styled below. */ .afxp-pair > section.afxp-card.afxp-platcard { display: none; } /* A model with no second variant (Access) gets an EMPTY variant card, which the renderer marks [hidden]. `display: contents` above overrides the UA's `[hidden] { display: none }`, so the card's .afxp-pills child -- a painted #222 box on mobile -- survived as a blank 32px bar between the model row and the size grid. Qualifying the selector with [hidden] outranks the flatten rule and takes the whole subtree out again. */ .afxp-pair > section.afxp-card[data-afxp-variantcard][hidden] { display: none; } /* ---- 3629:31505 "Plan content" (20 Sep revision) — the three chip rows are now CARDS: 345 wide, radius 24 on #222, 16 padding, 4px gaps both ways, stacked on an 8 gap. The chips themselves shrank from 46 to 36 tall with a 12px label and a 12 radius, and the size row is drawn as two rows of four (eight sizes) rather than one row of five. ------------------------------ */ .afxp-models, .afxp-pair > section.afxp-card[data-afxp-variantcard] > .afxp-pills, .afxp-sizecard > .afxp-pills { display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; width: 100%; margin: 0; grid-template-columns: none; box-sizing: border-box; padding: 16px; background: #222; border-radius: 24px; } .afxp-models { order: 3; } .afxp-pair > section.afxp-card[data-afxp-variantcard] > .afxp-pills { order: 4; margin-top: 8px; } /* The renderer emits the sizes LARGEST first, which on a two-row grid put $400K top-left and the small accounts on the bottom row. Lucas asked for the opposite: the grid should read upward, with the biggest account at the bottom right, which is also how the 20 Sep frame draws it (5K 10K 25K 50K over 100K 200K 300K 400K). `row-reverse wrap-reverse` did that for the eight-size models but was wrong for the six-size ones (1-Step, 2-Step). Flex assigns items to lines in ORDER, not in visual direction, so the first four -- the four largest -- always filled a whole line and the leftover pair was 5K and 10K. They then took the `flex-grow` slack and came out as the two widest boxes on the row. The smallest accounts were the most prominent thing in the grid. Reversing with `order` instead fixes the line membership itself: each chip takes its position counted from the END, so the flex order is genuinely ascending and the line break falls after 50K. The leftover -- and so the stretched pair -- is now the largest sizes, on the bottom row: 6 sizes: 5K 10K 25K 50K / 100K 200K 8 sizes: 5K 10K 25K 50K / 100K 200K 300K 400K Sizes past the twelfth keep order 99, which leaves them last in DOM order; the widest ladder the band ships is eight. */ .afxp-sizecard > .afxp-pills { order: 5; margin-top: 8px; } .afxp-sizecard > .afxp-pills > .afxp-pill { order: 99; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(1) { order: 1; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(2) { order: 2; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(3) { order: 3; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(4) { order: 4; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(5) { order: 5; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(6) { order: 6; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(7) { order: 7; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(8) { order: 8; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(9) { order: 9; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(10) { order: 10; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(11) { order: 11; } .afxp-sizecard > .afxp-pills > .afxp-pill:nth-last-child(12) { order: 12; } /* 3629:31525 — 75.25 x 36 on a 313 track: four to a row for models and sizes, two for the tier row, padding 12/16, radius 12, label 12px. */ .afxp-models > .afxp-model, .afxp-pair > section.afxp-card[data-afxp-variantcard] > .afxp-pills > .afxp-pill, .afxp-sizecard > .afxp-pills > .afxp-pill { flex: 1 1 calc(25% - 3px); min-width: 64px; width: auto; height: auto; min-height: 0; box-sizing: border-box; padding: 12px 8px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 12px; grid-column: auto; font-size: 12px; line-height: 12px; letter-spacing: 0; } /* 3629:31532 — the tier row is two 154.5 chips, so half a track each */ .afxp-pair > section.afxp-card[data-afxp-variantcard] > .afxp-pills > .afxp-pill { flex: 1 1 calc(50% - 2px); } .afxp-models > .afxp-model .afxp-model__top { width: 100%; justify-content: center; gap: 4px; } .afxp-models > .afxp-model .afxp-model__name, .afxp-sizecard > .afxp-pills > .afxp-pill .afxp-pill__k { font-size: 12px; line-height: 12px; white-space: nowrap; } /* ---- 3610:31475 — "Not sure? Take The Quiz", centred, 32 above and below. It lives in the model card's head in the markup; the head is flattened above so it can be ordered here instead of rebuilt. */ .afxp-hint { order: 6; margin-top: 32px; flex-direction: row; align-items: center; justify-content: center; gap: 8px; width: 100%; } .afxp-hint__lead, .afxp-hint__link span { white-space: nowrap; } /* ========================================================================= 3629:31372 "Order Summary" (20 Sep revision) — the bundle block is back, as its own 24-radius card above the price card on an 8 gap: the plan name and its amount, the three meta chips, the Single Account / Buy in Bundle switch, the five-row tier ladder, and the quantity stepper. This is the block the 19 Sep frame omitted and that was therefore unreachable on a phone; the designer put it back, so a bundle can be bought on mobile. ====================================================================== */ .afxp-side > .afxp-badge { /* the desktop rule pins this badge with position:absolute and left:21px; both have to be unwound before it can sit in the flow. */ order: 7; align-self: flex-start; position: relative; z-index: 2; left: 0; right: auto; top: 0; bottom: auto; margin: 32px 0 -15px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; padding: 6px 12px; border-radius: 57px; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px); background-image: linear-gradient(89.39deg, rgba(255,255,255,.11) 5.91%, rgba(124,177,172,.087) 39.85%, rgba(124,177,172,.11) 107.99%); color: #7CB1AC; font-size: 14px; line-height: 1.32; letter-spacing: -.14px; } .afxp-side > .afxp-badge img, .afxp-side > .afxp-badge svg { width: 16px; height: 16px; flex: none; } .afxp-side > section.afxp-card.afxp-bundle { order: 8; margin-top: 0; position: relative; background: #222; border: 0; border-radius: 24px; padding: 24px 16px 16px; gap: 24px; display: flex; flex-direction: column; align-items: stretch; } /* 3629:31374 — plan name and amount on one row, 20/1, ls -.6 */ .afxp-bundle__head { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0; font-size: 20px; line-height: 1; letter-spacing: -.6px; } /* 3629:31377 — three meta chips, 16px icon + 14px label, row gap 12, .8. The drawn row is 325 wide inside a 313 box, so it wraps here rather than being clipped — the same call as the 19 Sep build. */ .afxp-bundle__meta { display: flex; flex-wrap: wrap; gap: 8px 12px; opacity: .8; margin: 0; } .afxp-bmeta { gap: 4px; min-width: 0; } .afxp-bmeta span { font-size: 14px; line-height: 1; opacity: .8; white-space: normal; } .afxp-bmeta__ic, .afxp-bmeta__ic svg { width: 16px; height: 16px; flex: none; } /* 3629:31390 — switch: #2d2d2d, radius 47, padding 4, gap 8; each half padding 12, radius 100, 12px semibold; the on state is #223736 with a 2px rgba(255,255,255,.14) ring at radius 53. */ .afxp-bseg { display: flex; flex-direction: row; gap: 8px; width: 100%; box-sizing: border-box; padding: 4px; border-radius: 47px; background: #2D2D2D; } .afxp-bseg__btn { flex: 1 1 0; min-width: 0; width: auto; height: auto; box-sizing: border-box; padding: 12px; border-radius: 100px; font-size: 12px; line-height: 1; } .afxp-bseg__btn[aria-pressed="true"], .afxp-bseg__btn.is-on { background: #223736; border: 2px solid rgba(255,255,255,.14); border-radius: 53px; } /* 3629:31397 — the tier ladder: rows padding 6/12, radius 54, 14/1.32, ls -.28, alternate rows on #2A2A2A, the saving in teal at a 70 column. */ .afxp-btiers { display: flex; flex-direction: column; width: 100%; } .afxp-btier { height: auto; min-height: 30px; box-sizing: border-box; padding: 6px 12px; border-radius: 54px; gap: 8px; justify-content: space-between; align-items: center; } .afxp-btier:nth-child(odd) { background: #2A2A2A; } .afxp-btier span { font-size: 14px; line-height: 1.32; letter-spacing: -.28px; white-space: normal; } .afxp-btier__k { opacity: .6; min-width: 0; } .afxp-btier__d { opacity: .8; text-align: right; flex: 0 1 auto; min-width: 0; } .afxp-btier__s { flex: 0 0 auto; text-align: right; } /* 3629:31417 — 313 x 40, SPACE_BETWEEN. Label 16/1.5 ls -.32 (was 18 on the 19 Sep frame, where the quantity row sat in the price card). */ .afxp-bqty { width: 100%; justify-content: space-between; align-items: center; } .afxp-bqty__k { font-size: 16px; line-height: 1.5; letter-spacing: -.32px; } /* 3629:31419 — 110 wide, padding 4, radius 50, 32px buttons */ .afxp-bstep { width: 110px; justify-content: space-between; padding: 4px; border-radius: 50px; box-sizing: border-box; } .afxp-bstep__btn { width: 32px; height: 32px; } /* 3610:31380 "Price" — its own 24-radius card, 8 below the order summary: the price row, the CTA, then the rules and the average reward under a hairline. 3179:292684 — the row is centred, gap 10, bottom-aligned: $559 at 36/40, the struck original and the saving both at 16. */ .afxp-price { order: 9; background: #222; margin: 8px 0 0; padding: 24px 16px 0; border-radius: 24px 24px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } .afxp-price__row { gap: 10px; align-items: flex-end; justify-content: center; flex-wrap: wrap; } .afxp-price__now { font-size: 36px; line-height: 40px; } .afxp-price__was, .afxp-price__save { font-size: 16px; line-height: 1.5; } .pl2-pricing__then { text-align: center; } /* 3179:292688 — full-width button, padding 16/32, radius 100. ::before paints the #222 strip this button sits on, because the card it belongs to has been flattened so the payment row can move below the rules. inset matches the 20/16/24 the frame puts around it. ::after is NOT available here — the base stylesheet uses it for the button's gradient border ring (mask/xor) and must be left alone. */ .afxp-cta { order: 10; position: relative; width: auto; margin: 20px 16px 24px; padding: 16px 32px; box-shadow: 2px 14px 12.05px rgba(38,63,66,.12); font-size: 16px; line-height: normal; letter-spacing: -.48px; } .afxp-cta::before { content: ''; position: absolute; inset: -20px -16px -24px; background: #222; z-index: -1; border-radius: 0; } /* 3179:292590 "Rules" — the bottom half of the same card. */ .afxp-duo > section.afxp-card { order: 11; margin: 0; background: #222; border: 0; border-top: 1px solid rgba(255,255,255,.08); border-radius: 0 0 24px 24px; padding: 16px; gap: 24px; } /* rows 3179:292592.. — 14/24 padding, radius 54, every second row tinted */ .afxp-rules { gap: 0; width: 100%; } .afxp-rules > .afxp-rule { height: auto; min-height: 0; padding: 14px 24px; border-radius: 54px; gap: 8px; justify-content: space-between; align-items: center; } .afxp-rule:nth-child(even) { background: rgba(255,255,255,.04); } .afxp-rule__k { gap: 6px; opacity: .6; min-width: 0; } .afxp-rule__k img { width: 18px; height: 18px; flex: none; } .afxp-rule__k span, .afxp-rule__v { font-size: 14px; line-height: 20px; letter-spacing: -.28px; } /* 3179:292622 — radius 92, padding 8/24, 2px lime on #223736 */ .afxp-avg { width: 100%; box-sizing: border-box; gap: 12px; padding: 8px 24px; border-radius: 92px; background: #223736; border: 2px solid var(--af-lime, #E1FFA0); } .afxp-avg__k { font-size: 16px; line-height: 24px; opacity: .6; } .afxp-avg__v { font-size: 20px; line-height: 1.32; } /* ---- 3179:292689 — payments, its own 24-radius card on an 8 gap ------- */ .afxp-pay { order: 12; margin-top: 8px; box-sizing: border-box; background: #222; border-radius: 24px; padding: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } /* 3179:292690 — the drawn row is 313 wide with 24-tall marks; the band's own marks render 26 tall and overflow into a second line at that size. */ .afxp-pay img { height: 24px; width: auto; } /* ---- 3179:292725 — the feature ticks, 24/16 padding, gap 24. DEVIATION: the frame is 345 wide with clipsContent, so three of the five ticks are cut off the right edge. That is the exact failure this pass exists to remove, so the row wraps and the card grows instead. */ .afxp-feats { order: 13; margin-top: 8px; box-sizing: border-box; background: #222; border-radius: 24px; padding: 24px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .afxp-feat { gap: 8px; font-size: 14px; line-height: 20px; } .afxp-feat__ic { width: 20px; height: 20px; flex: none; } }