/* ============================================================================
Pay Later v2 — band 4, "Value Points".
Figma 930:22592 "Frame 2147259198" (1512 x 1331), 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 blur()
numbers below are CSS-ready.
HEIGHT — 1331, exactly the frame:
100 heading column top (930:22600 y)
209 heading column height
50 gap to the card grid (359 - 309)
872 card grid height (480 + 16 + 376)
100 tail (1331 - 1231)
----
1331
BAND GRADIENT. #EBEDF2 -> #FFFFFF, handles (0.5,0) -> (0.5,0.31534688).
Converted against THIS band's own 1331: the ramp ends at 419.73px, not at
the bottom of the section. Written in px so it cannot drift.
HEADLINE GRADIENT. Figma linear gradients are defined by THREE handles and
the third one skews the iso-lines; fx.py prints the naive two-handle angle
(165.4deg), which is wrong for a non-square box. Solving the real affine
(t(p0)=0, t(p1)=1, t(p2)=0) against the 544x80 text box gives
162.583deg with stops at 46.9% / 93.242%. That reproduces the Figma PNG to
within antialiasing across the whole headline; the naive angle does not.
DECLARED DEVIATIONS
1. 930:22618 / 930:22643, the plates behind "Limits" and "24-Hour", carry
Figma's GLASS effect. It has no CSS equivalent (refraction + dispersion)
and the REST payload exposes no parameters, so they ship as their flat
9%-white fill on r12. Over the card gradient this is visually the same
plate; only the refracted edge is lost.
2. The dot fields (930:22652, :22660, :22661, :22662, :22669, :22670,
:22671) are 2500-path VECTORs: a 50x50 grid of r1.5473 dots on a
9.28378 pitch, painted with one radial gradient across the whole 458x458.
Shipping 2500 paths as SVG is absurd, so they are one masked element —
the radial paint, cut by a repeating-radial-gradient dot mask on the
exact pitch and radius from the fillGeometry. Geometrically identical.
The paint's ellipse is rotated 2.6deg in the file; CSS radial-gradient
cannot rotate, so it ships axis-aligned at 273.9 x 324.5 radii.
3. 930:22596 "blur" inside the exported "vector" group carries
BACKGROUND_BLUR 5 (= 2.5 CSS). It is baked into the flat export, so the
backdrop blur is dropped; there is nothing behind it in the band but the
base gradient, which the blur would not change.
4. ROTATION. fx.py's spec does NOT print node rotation, and this band is
full of it. Verified against the raw JSON, the visible rotated nodes are
930:22618 (-1.41deg), 930:22643 (-0.30deg), 930:22620 (-53.39deg),
930:22659 (-44.43deg), 930:22663 (-27.95deg), plus 930:22644, :22664 and
930:22593 / :22597 / :22598 / :22599 at 180deg. Because rotation nests,
several cancel: the coins (930:22651, inside :22647 at 180 inside :22644
at 180) and card 3's art (930:22667 at 180 inside :22664 at 180) are net
zero, which pixel-matching against the Figma render confirms. The two
that do NOT cancel are card 1's swirl (net -53.39) and card 2's swirl
(net 180). Those two, plus the two rotated grain tiles, are exported
FLAT from Figma so the rotation, the STRETCH crop, the node opacity and
930:22659/:22663's image `filters` (saturation -0.77/-0.75, exposure
-0.12, none of which CSS filter reproduces faithfully) are all baked in.
The two plates keep their rotation as a CSS transform; their listed
sizes are the UNROTATED box solved back out of the AABB.
5. Body copy that has an explicit \n in the file uses
. Card A's body
has NO newline and wraps naturally inside its 280px box, exactly as the
file's 42px two-line height implies.
6. Single-line runs (headline, all four card titles) carry white-space:
nowrap. Each is one line in the file with a fixed box; without it, a
non-SF fallback would reflow them onto two lines and break the band.
SKIPPED, visible:false — see the fragment header for the full list:
930:22613, 930:22624, 930:22628 (the whole $5 / "Start to Funded" cluster),
930:22665, 930:22675, 930:22676 fills[0], and every paint on 930:22602.
========================================================================= */
/* 930:22592 — 1512x1331, clipsContent. isolation:isolate confines the SCREEN
layers to this band instead of blending against whatever precedes it. */
.pl2-values {
position: relative;
isolation: isolate;
height: 1331px;
overflow: hidden;
background: linear-gradient(180deg, #EBEDF2 0, var(--af-white) 419.73px);
font-family: var(--font-sans);
}
/* ---- 930:22593 "vector" ------------------------------------------------- */
/* group bbox 2011.5x836.5 @ (-165,-532); exported at 2x and trimmed to the
band's own clip, which lands the trimmed art at (-0.25,-0.25), 1327.5x258. */
.pl2-values__lines {
position: absolute; left: 50%; margin-left: -756.25px; top: -0.25px;
width: 1327.5px; height: 258px;
pointer-events: none; z-index: 1;
}
/* ---- 930:22597 "Mask group" --------------------------------------------- */
/* group opacity .9 over child 930:22599 (image, opacity .6, SCREEN) masked by
930:22598's radial alpha. All three are baked into the export, so the layer
only needs the blend mode. Trimmed placement: (-0.16, 0), 1089x704.5. */
.pl2-values__wash {
position: absolute; left: 50%; margin-left: -756.16px; top: 0;
width: 1089px; height: 704.5px;
mix-blend-mode: screen;
pointer-events: none; z-index: 2;
}
/* fixed-1512 stage that POSITIONS content — must stay centred above 1512 */
.pl2-values__stage {
position: absolute; left: 50%; margin-left: -756px; top: 0;
width: 1512px; height: 1331px; z-index: 3;
}
/* ---- 930:22600 heading column — 544x209 @ (484,100), gap 32, centred ----- */
.pl2-values__head {
position: absolute; left: 484px; top: 100px; width: 544px;
display: flex; flex-direction: column; align-items: center; gap: 32px;
}
/* 930:22601 — gap 16 */
.pl2-values__headTop {
display: flex; flex-direction: column; align-items: center; gap: 16px;
width: 100%;
}
/* 930:22602 — 130x33, r57, pad 6/14, gap 7. Fill, stroke and BACKGROUND_BLUR
are all visible:false, so nothing is painted; the box only spaces. */
.pl2-values__eyebrow {
display: inline-flex; align-items: center; gap: 7px;
width: 130px; height: 33px; padding: 6px 14px; border-radius: 57px;
box-sizing: border-box;
}
.pl2-values__eyebrow img { display: block; width: 16px; height: 16px; }
/* 930:22610 — SF Pro 510, 14/21, ls -0.42. characterStyleOverrides split it:
chars 0-5 "Value " at rgba(63,69,71,.6), chars 6-11 "Points" at #0D0D0D. */
.pl2-values__eyebrowText {
font-family: var(--font-sans); font-weight: var(--w-medium);
font-size: 14px; line-height: 21px; letter-spacing: -0.42px;
color: #0D0D0D; white-space: nowrap;
}
.pl2-values__eyebrowMuted { color: rgba(63,69,71,.6); }
/* 930:22612 — 544x80, SF Pro 510, 80/80, ls -2.4, centred, gradient fill */
.pl2-values__h2 {
margin: 0; width: 544px; min-height: 80px;
font-family: var(--font-display); font-weight: var(--w-medium);
font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
text-align: center; white-space: nowrap;
background-image: linear-gradient(162.583deg, #0D0D0D 46.9%, #CECECE 93.242%);
-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:22614 — 498x48 @ (507,261), SF Pro 510, 16/24, ls -0.48, opacity .8 */
.pl2-values__lead {
margin: 0; width: 498px;
font-family: var(--font-sans); font-weight: var(--w-medium);
font-size: 16px; line-height: 24px; letter-spacing: -0.48px;
text-align: center; color: #0D0D0D; opacity: .8;
}
/* ---- 930:22615 card grid — 1073x872 @ (220,359), column, gap 16 ---------- */
.pl2-values__grid {
position: absolute; left: 220px; top: 359px; width: 1073px;
display: flex; flex-direction: column; gap: 16px;
}
.pl2-values__row { display: flex; align-items: center; gap: 16px; }
/* 930:22617 / :22642 / :22656 / :22668 — 528.5 wide, r32, clipsContent.
isolation:isolate keeps each card's SCREEN art inside its own card. */
.pl2-values__card {
position: relative; flex: 0 0 auto;
width: 528.5px; border-radius: 32px;
overflow: hidden; isolation: isolate;
}
.pl2-values__card--a,
.pl2-values__card--b {
height: 480px;
background: linear-gradient(180deg, var(--af-teal) 0%, var(--af-deep) 100%);
}
.pl2-values__card--c,
.pl2-values__card--d { height: 376px; background: #FBFBFB; }
/* 930:22618 / :22643 — 9% white plates behind the lime words, r12, GLASS.
Both are rotated; the AABB Figma reports (89.88x39.17 / 129.67x37.68) is
NOT the box. Solved back: 89.0x36.99 at -1.41deg, 129.48x37.0 at -0.30deg,
each placed on the AABB centre. */
.pl2-values__plate {
position: absolute; border-radius: 12px;
background: rgba(255,255,255,.09); pointer-events: none;
}
.pl2-values__plate--a {
left: 135.44px; top: 360.83px; width: 89px; height: 36.99px;
transform: rotate(-1.41deg);
}
.pl2-values__plate--b {
left: 17.45px; top: 360.39px; width: 129.48px; height: 37px;
transform: rotate(-0.3deg);
}
/* 930:22620 / :22645 — "image 1168". scaleMode STRETCH with an imageTransform
AND a rotation (-53.39deg / net 180deg), so the raw fill bytes cannot be
placed by background-size alone. Both exported flat at 2x and cropped to the
card's own clip; node opacity (.64 / .83) is baked into the alpha, so the
layers only carry the blend mode. */
.pl2-values__swirl {
position: absolute; mix-blend-mode: screen; pointer-events: none;
background-repeat: no-repeat; background-size: 100% 100%;
}
.pl2-values__swirl--a {
left: 0.04px; top: -0.1px; width: 528.5px; height: 415.5px;
background-image: url("/assets/pl2-values-swirl-a.webp");
}
.pl2-values__swirl--b {
left: 0; top: 0; width: 528.5px; height: 313px;
background-image: url("/assets/pl2-values-swirl-b.webp");
}
/* blurred shadow ellipses under the product art */
.pl2-values__blob { position: absolute; border-radius: 50%; pointer-events: none; }
/* 930:22621 / :22622 / :22623 — rgba(5,37,35,.64), LAYER_BLUR 33.7 -> 16.85 */
.pl2-values__blob--a1 { left: 191px; top: 211px; width: 96px; height: 80px;
background: rgba(5,37,35,.64); filter: blur(16.85px); }
.pl2-values__blob--a2 { left: 252px; top: 193px; width: 88px; height: 70px;
background: rgba(5,37,35,.64); filter: blur(16.85px); }
.pl2-values__blob--a3 { left: 175px; top: 181px; width: 88px; height: 70px;
background: rgba(5,37,35,.64); filter: blur(16.85px); }
/* 930:22646 — rgba(5,37,35,.64), LAYER_BLUR 106.7 -> 53.35 */
.pl2-values__blob--b0 { left: 45.5px; top: 158px; width: 436px; height: 135px;
background: rgba(5,37,35,.64); filter: blur(53.35px); }
/* 930:22648 / :22649 / :22650 — rgba(5,37,35,.36), blur 16.85 */
.pl2-values__blob--b1 { left: 201.2px; top: 234.4px; width: 114.6px; height: 95.5px;
background: rgba(5,37,35,.36); filter: blur(16.85px); }
.pl2-values__blob--b2 { left: 274px; top: 212.9px; width: 105.1px; height: 83.6px;
background: rgba(5,37,35,.36); filter: blur(16.85px); }
.pl2-values__blob--b3 { left: 182.1px; top: 198.6px; width: 105.1px; height: 83.6px;
background: rgba(5,37,35,.36); filter: blur(16.85px); }
/* 930:22666 — rgba(5,63,59,.22), LAYER_BLUR 78.5 -> 39.25 */
.pl2-values__blob--c { left: 57px; top: 193px; width: 412px; height: 51px;
background: rgba(5,63,59,.22); filter: blur(39.25px); }
/* product art */
.pl2-values__art {
position: absolute; background-repeat: no-repeat; pointer-events: none;
}
/* 930:22641 — 529x380 @ (0,12), scaleMode FILL */
.pl2-values__art--clock {
left: 0; top: 12px; width: 529px; height: 380px;
background-image: url("/assets/pl2-values-clock.webp");
background-size: cover; background-position: center;
}
/* 930:22651 — 331.4x294.98 @ (93.1,35), STRETCH */
.pl2-values__art--coins {
left: 93.1px; top: 35px; width: 331.4px; height: 294.98px;
background-image: url("/assets/pl2-values-coins.webp");
background-size: 100% 112.35%; background-position: 50% 22.5%;
}
/* 930:22667 — 461x232 @ (28,12), STRETCH */
.pl2-values__art--card {
left: 28px; top: 12px; width: 461px; height: 232px;
background-image: url("/assets/pl2-values-card.webp");
background-size: 100.06% 132.54%; background-position: 50% 0%;
}
/* 930:22676 — 408x243 @ (63.5,12). fills[0] is visible:false; fills[1] is FILL */
.pl2-values__art--shatter {
left: 63.5px; top: 12px; width: 408px; height: 243px;
background-image: url("/assets/pl2-values-shatter.webp");
background-size: cover; background-position: center;
}
/* 930:22663 / :22659 — "image 1165" / "image 1166". STRETCH crop + rotation
(-27.95deg / -44.43deg) + Figma image `filters`; all three are baked into
the flat export, so these are plain placed bitmaps. Sizes are the exported
AABB, offsets are the AABB origin. */
.pl2-values__grain {
position: absolute; pointer-events: none;
background-repeat: no-repeat; background-size: 100% 100%;
}
.pl2-values__grain--c1 {
left: 23.8px; top: 27.62px; width: 117px; height: 111.5px;
background-image: url("/assets/pl2-values-grain-a.webp");
}
.pl2-values__grain--c2 {
left: 405.51px; top: 27.63px; width: 93px; height: 93px;
background-image: url("/assets/pl2-values-grain-b.webp");
}
/* 930:22652 / :22660-:22662 / :22669-:22671 — 458x458 dot field, node
opacity .2. Dots: r 1.5473 on a 9.28378 pitch, 50x50, straight from
fillGeometry. Paint: radial 273.9x324.5 radii, paint opacity .6 folded
into the stop alphas. */
.pl2-values__dots {
position: absolute; width: 458px; height: 458px; opacity: .2;
pointer-events: none;
background: radial-gradient(273.9px 324.5px at 50% 50%,
rgba(124,177,172,.6) 0%,
rgba(255,255,255,.18) 50.85%,
rgba(245,247,253,0) 75.23%);
-webkit-mask-image: radial-gradient(circle 1.5473px at 1.5473px 1.5473px, #000 98%, transparent 100%);
mask-image: radial-gradient(circle 1.5473px at 1.5473px 1.5473px, #000 98%, transparent 100%);
-webkit-mask-size: 9.28378px 9.28378px;
mask-size: 9.28378px 9.28378px;
-webkit-mask-repeat: repeat;
mask-repeat: repeat;
}
.pl2-values__dots--b { left: 408px; top: -241px; }
.pl2-values__dots--c1 { left: 329px; top: 66px; }
.pl2-values__dots--c2 { left: -96px; top: -163px; }
.pl2-values__dots--c3 { left: 137px; top: -221px; }
.pl2-values__dots--d1 { left: 259.5px; top: -75px; }
.pl2-values__dots--d2 { left: -204.5px; top: -62px; }
.pl2-values__dots--d3 { left: -7.5px; top: -214px; }
/* ---- card copy ---------------------------------------------------------- */
/* 930:22625 — 480.5x96 @ (24,360), column, gap 16 (card A only is a frame) */
.pl2-values__copy--a {
position: absolute; left: 24px; top: 360px; width: 480.5px;
display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
/* 930:22626 / :22653 — SF Pro 590, 32/38.4, ls -0.96 */
.pl2-values__title { margin: 0; white-space: nowrap; }
.pl2-values__title--lg {
font-family: var(--font-display); font-weight: var(--w-semi);
font-size: 32px; line-height: 38.4px; letter-spacing: -0.96px;
color: var(--af-white);
}
/* 930:22657 / :22672 — SF Pro 590, 24/28.8, ls -0.72 */
.pl2-values__title--sm {
font-family: var(--font-display); font-weight: var(--w-semi);
font-size: 24px; line-height: 28.8px; letter-spacing: -0.72px;
color: #0D0D0D;
}
/* the file's text boxes are 38 / 29 tall, not the 38.4 / 28.8 the line-height
alone would give. Card A's copy column is auto-layout, so it is that box
height that lands its body at exactly y 414 (360 + 38 + gap 16). */
.pl2-values__title--lg { width: 235px; height: 38px; }
.pl2-values__title--sm { height: 29px; }
.pl2-values__title--b { position: absolute; left: 24px; top: 360px; }
.pl2-values__title--c { position: absolute; left: 24px; top: 265px; width: 189px; }
.pl2-values__title--d { position: absolute; left: 24px; top: 265px; width: 481px; }
/* characterStyleOverrides: "Limits" and "24-Hour" are Accent/Lime */
.pl2-values__lime { color: var(--af-lime); }
/* 930:22627 / :22654 / :22658 / :22673 — SF Pro 400, 16/21.12, ls -0.48,
opacity .8 */
.pl2-values__body {
margin: 0;
font-family: var(--font-sans); font-weight: var(--w-regular);
font-size: 16px; line-height: 21.12px; letter-spacing: -0.48px;
opacity: .8;
}
.pl2-values__body--a { width: 280px; color: var(--af-white); }
.pl2-values__body--b {
position: absolute; left: 24px; top: 414px; width: 425px; color: var(--af-white);
}
.pl2-values__body--c {
position: absolute; left: 24px; top: 310px; width: 415px; color: #0D0D0D;
}
.pl2-values__body--d {
position: absolute; left: 24px; top: 310px; width: 481px; color: #0D0D0D;
}
/* ============================================================================
393 — Figma 930:23771 "Frame 2147259243" (393 x 978), the FOURTH child of
930:23468, the mobile frame the CEO confirmed canonical. Mapped to this band
by its eyebrow ("Value Points", 930:23784, the same 130x33 crown pill) and by
its four card titles, which are this band's cards in this band's order:
card 1 / 24-Hour Payouts / Pay After You Pass / Trade Without Deadlines.
Every number below is read from that node's JSON. Breakpoint and comment
convention follow atlas-pl2-hero.css.
MOBILE BOX, from the node:
94 930:23779 flow top
259 930:23780 head column (167 headTop + 20 gap + 72 lead)
50 flow gap
369 930:23789 card row
50 flow gap } the CTA slot — see deviation 3
56 930:23848 CTA }
100 tail (978 - 878)
----
978 930:23771
The CTA instance has no node in this band's DOM, so its 50 + 56 slot is
dropped and the band keeps the file's own 100px tail: 403 + 369 + 100 = 872.
BAND GRADIENT. Same two stops as desktop, handles (0.5,0) -> (0.5,0.31534688)
solved against THIS frame's own 978: the ramp completes at 308.41px. In px so
it cannot drift when the band's rendered height moves off 872.
CARD ROW. 930:23789 is a 345-wide HORIZONTAL auto-layout, gap 16, holding
four 300x369 cards at x 24 / 340 / 656 / 972 — 1248px of content in a 345px
box that the band frame clips. A clipped row would bury three of the four
cards, so it ships as a scroll container: same 300px cards, same 16px gap,
same 24px gutter, scrollable rather than truncated. DECLARED.
.pl2-values__row becomes display:contents so the four cards are the row's own
flex items in file order; the two-row desktop DOM is untouched.
DECLARED DEVIATIONS
1. HEADLINE. The mobile frame runs "The lowest-risk / path to getting funded"
(930:23786 gradient-filled, 930:23787 solid #0D0D0D) where the desktop
frame runs the single line "Trade with clarity". Copy lives in the HTML,
which this pass does not own, so only the type scale moves: 42/42,
ls -1.26, 345 wide, and white-space unlocked so the one h3 element can
take the two lines the file draws.
2. CARD 1. The mobile frame replaces this card outright: title "Start for
Just $5", body "Access a funded trading opportunity…", and an art cluster
(930:23799-930:23810 — a coin stack plus a "$5 / Start to Funded" badge)
that is visible:false on desktop and therefore has no exported asset and
no DOM node. The card keeps its built clock bitmap, uniformly scaled by
the file's own card-width ratio 300/528.5 = 0.56764 (529x380 @ 0,12 ->
300.3x215.7 @ 0,6.8). That ratio is the ONLY number in this block not
read straight off the mobile node.
3. CTA. 930:23848 "Start your challenge" (241x56) sits under the card row in
the mobile frame. The band has no CTA in its DOM and CSS cannot add one,
so it is not built and its slot is removed from the height above.
4. LINE ART / WASH. Both decorative layers are the same source groups as
desktop, so the existing exports are reused, placed off the MOBILE group
boxes:
930:23772 "vector" 1151x478.6 @ (-218.6,-308). 1151/2011.5 =
478.6/836.5 = 0.5722 exactly, so the desktop trim (1327.5x258, taken
at group-offset 164.75,531.75) lands at 759.6x147.6 @ (-124.33,-3.73).
930:23776 "Mask group" 1392x1039.5 @ (-463.1,-94.4) — the SAME size as
desktop's 930:22597, only shifted, so the 1089x704.5 trim needs no
scaling: group-offset (277.94,94.4) puts it at (-185.16, 0).
5. BODY
. Desktop cards b/c/d carry an explicit \n in the file and ship
. None of the mobile strings has one, so the
s are suppressed and
the copy wraps inside the file's own box widths.
SKIPPED
- 930:23797 "image 1170", card 1's second coin plate — visible:false.
- 930:23836 / 930:23841 "image 1166" grain tiles on cards 3 and 4. Visible
in the file but drawn at card-relative x 406 on a 300-wide clipping frame,
i.e. entirely outside the card. Nothing to paint.
- 930:23782's fill, stroke and BACKGROUND_BLUR are visible:false on mobile
too, exactly as desktop: the eyebrow stays an invisible layout box.
- .pl2-values__blob--c (desktop 930:22666): card 3 has no ellipse at all in
the mobile frame, so it is hidden.
- .pl2-values__dots--b (desktop 930:22652): card 2 has no dot field in the
mobile frame, so it is hidden. Cards 3 and 4 both carry the same three
fields at card-relative (329,66) / (-96,-163) / (137,-221) — identical to
desktop's c1/c2/c3, so those three are left alone and d1/d2/d3 move onto
them.
OVERFLOW. .pl2-values keeps overflow:hidden and .pl2-values__grid is the
only scroller, so no descendant can reach documentElement.scrollWidth. Every
fixed box wider than the 393 viewport is still neutralised below.
========================================================================= */
@media (max-width: 1023px) {
/* 930:23771 — 393x978; 872 once the CTA slot comes out. Ramp ends 308.41px. */
.pl2-values {
height: 872px;
background: linear-gradient(180deg, #EBEDF2 0, var(--af-white) 308.41px);
}
/* 930:23772 / 930:23776 — desktop trims re-placed off the mobile group boxes */
.pl2-values__lines {
left: -124.33px; margin-left: 0; top: -3.73px;
width: 759.6px; height: 147.6px;
}
.pl2-values__wash {
left: -185.16px; margin-left: 0; top: 0;
width: 1089px; height: 704.5px;
}
/* the 1512 stage collapses onto the viewport — no centred negative margin */
.pl2-values__stage {
left: 0; margin-left: 0; width: 100%; height: 872px;
}
/* ---- 930:23780 head column — 345x259 @ (24,94), gap 20, centred -------- */
.pl2-values__head { left: 24px; top: 94px; width: 345px; gap: 20px; }
/* 930:23781 — gap 8 */
.pl2-values__headTop { gap: 8px; }
/* 930:23786 / :23787 — SF Pro 510, 42/42, ls -1.26, 345 wide, two lines */
.pl2-values__h2 {
/* min-height:0 — the desktop rule's fixed height became min-height for the
ink guard, and this block's `height:auto` no longer overrides it. */
width: 100%; height: auto; min-height: 0;
font-size: 42px; line-height: 42px; letter-spacing: -1.26px;
white-space: normal;
}
/* 930:23788 — 345x72, 16/24, ls -0.48, opacity .8 (unchanged) */
.pl2-values__lead { width: 100%; }
/* ---- 930:23789 card row — 345x369 @ (24,403), gap 16, four 300s -------- */
.pl2-values__grid {
left: 0; top: 403px; width: 100%;
box-sizing: border-box; padding: 0 24px;
flex-direction: row; gap: 16px;
overflow-x: auto; overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; -ms-overflow-style: none;
overscroll-behavior-x: contain;
}
.pl2-values__grid::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* the two desktop rows stop being boxes so the four cards are the row's own
flex items, in the file's order */
.pl2-values__row { display: contents; }
/* 930:23791 / :23816 — 300x369, r20.889, 180deg #7CB1AC -> #053F3B, clipped */
.pl2-values__card { flex: 0 0 300px; width: 300px; }
.pl2-values__card--a,
.pl2-values__card--b { height: 369px; border-radius: 20.89px; }
/* 930:23829 / :23840 — 300x369, r32 (unchanged), #FBFBFB */
.pl2-values__card--c,
.pl2-values__card--d { height: 369px; }
/* ---- card 1 (930:23790) ----------------------------------------------- */
/* 930:23812 — 89x32.9 @ (100.3,241.8), r8, white .09, no rotation */
.pl2-values__plate--a {
left: 100.3px; top: 241.8px; width: 89px; height: 32.9px;
border-radius: 8px; transform: none;
}
/* 930:23793 "image 1168" — 494.7x475 @ (-90.5,-199.2), SCREEN, opacity .64
baked into the export exactly as desktop */
.pl2-values__swirl--a {
left: -90.5px; top: -199.2px; width: 494.7px; height: 475px;
}
/* 930:23794/:23795/:23796 — #052523 .64, LAYER_BLUR 20.567 -> 10.28 */
.pl2-values__blob--a1 { left: 124.8px; top: 151.1px; width: 58.6px; height: 48.8px; filter: blur(10.28px); }
.pl2-values__blob--a2 { left: 162px; top: 140.1px; width: 53.7px; height: 42.7px; filter: blur(10.28px); }
.pl2-values__blob--a3 { left: 115px; top: 132.8px; width: 53.7px; height: 42.7px; filter: blur(10.28px); }
/* 930:23811 — 265.2x104 @ (17.6,244), column, gap 12 */
.pl2-values__copy--a { left: 17.6px; top: 244px; width: 265.2px; gap: 12px; }
/* deviation 2 — 529x380 @ (0,12) scaled by 300/528.5 */
.pl2-values__art--clock { left: 0; top: 6.8px; width: 300.3px; height: 215.7px; }
/* ---- card 2 (930:23815) ----------------------------------------------- */
/* 930:23826 — 96.5x31.5 @ (13.3,243.2), r8, no rotation */
.pl2-values__plate--b {
left: 13.3px; top: 243.2px; width: 96.5px; height: 31.5px;
border-radius: 8px; transform: none;
}
/* 930:23818 "image 1168" — 350.8x384 @ (-1.4,-176.9), SCREEN, opacity .83 */
.pl2-values__swirl--b {
left: -1.4px; top: -176.9px; width: 350.8px; height: 384px;
}
/* 930:23819 — #052523 .64, LAYER_BLUR 60.61 -> 30.31 */
.pl2-values__blob--b0 { left: 25.6px; top: 119.1px; width: 247.7px; height: 76.7px; filter: blur(30.31px); }
/* 930:23821/:23822/:23823 — #052523 .36, LAYER_BLUR 19.143 -> 9.57 */
.pl2-values__blob--b1 { left: 114px; top: 162.5px; width: 65.1px; height: 54.3px; filter: blur(9.57px); }
.pl2-values__blob--b2 { left: 155.4px; top: 150.3px; width: 59.7px; height: 47.5px; filter: blur(9.57px); }
.pl2-values__blob--b3 { left: 103.1px; top: 142.1px; width: 59.7px; height: 47.5px; filter: blur(9.57px); }
/* 930:23824 "image 1170" — 188.2x167.6 @ (52.6,49.2). Same 1.123 STRETCH
crop as desktop's 331.4x295, so background-size/position carry over. */
.pl2-values__art--coins { left: 52.6px; top: 49.2px; width: 188.2px; height: 167.6px; }
/* no dot field on card 2 in the mobile frame */
.pl2-values__dots--b { display: none; }
/* ---- card 3 (930:23829) ----------------------------------------------- */
/* 930:23830 "image 1169" — 317.7x160 @ (-8.9,24). Same 1.986 crop as desktop. */
.pl2-values__art--card { left: -8.9px; top: 24px; width: 317.7px; height: 160px; }
/* 930:23832 "image 1165" — 90.5x86.1 @ (8,23.9) */
.pl2-values__grain--c1 { left: 8px; top: 23.9px; width: 90.5px; height: 86.1px; }
/* 930:23831 "image 1166" — 66.5x66.6 @ (214,10.1) */
.pl2-values__grain--c2 { left: 214px; top: 10.1px; width: 66.5px; height: 66.6px; }
/* 930:23837/:23838/:23839 sit exactly where desktop's c1/c2/c3 already are */
/* card 3 has no shadow ellipse in the mobile frame */
.pl2-values__blob--c { display: none; }
/* ---- card 4 (930:23840) ----------------------------------------------- */
/* 930:23847 — fills[0] visible:false, fills[1] FILL, 336.5x200 @ (-19,24) */
.pl2-values__art--shatter { left: -19px; top: 24px; width: 336.5px; height: 200px; }
/* 930:23842/:23843/:23844 — the same three fields card 3 carries */
.pl2-values__dots--d1 { left: 329px; top: 66px; }
.pl2-values__dots--d2 { left: -96px; top: -163px; }
.pl2-values__dots--d3 { left: 137px; top: -221px; }
/* ---- card copy — every title 24/28.8 ls -0.72, every body 16/21.12 ----- */
/* 930:23813 / :23827 — 180x29 (desktop's 32/38.4 pair drops to the small ramp) */
.pl2-values__title--lg {
width: 180px; height: 29px;
font-size: 24px; line-height: 28.8px; letter-spacing: -0.72px;
}
.pl2-values__title--b { left: 17.6px; top: 244px; }
/* 930:23834 — 224x29 @ (20,241) */
.pl2-values__title--c { left: 20px; top: 241px; width: 224px; }
/* 930:23845 — 250x29 @ (20,241) */
.pl2-values__title--d { left: 20px; top: 241px; width: 250px; }
/* no mobile string carries a newline — let every body wrap in its own box */
.pl2-values__body br { display: none; }
/* 930:23814 — 233 wide, opacity .9 */
.pl2-values__body--a { width: 233px; opacity: .9; }
/* 930:23828 — 198x63 @ (17.6,285), opacity .9 */
.pl2-values__body--b { left: 17.6px; top: 285px; width: 198px; opacity: .9; }
/* 930:23835 — 260x63 @ (20,286) */
.pl2-values__body--c { left: 20px; top: 286px; width: 260px; }
/* 930:23846 — 260x63 @ (20,286) */
.pl2-values__body--d { left: 20px; top: 286px; width: 260px; }
}