/* ============================================================================
   Pay Later v2 — band 2, "Configure your challenge" + pricing table.
   Figma 930:22330 (1512 x 1644), page 930:22278, page-relative y 946.
   Every value read from the node JSON via tools/figma/fx.py. Do not hand-tune.

   This file styles ONLY the chrome this band adds around the shared pricing
   component. The component itself is /assets/atlas-pricing.css and is not
   touched, not overridden and not forked: load this file AFTER it.

   The band frame is the home band's frame value-for-value — 1512 wide, column,
   padding 200 40 120, gap 40, align CENTER, fill 180deg #303030 -> #0F0F0F —
   so .afxp, .afxp__art, .afxp__strip, .afxp__flow and .afxp__body all carry
   over unchanged and are NOT restated here.

   Band box, from the node JSON:
     200            top padding
     321            930:22345  head      (stack 241 + gap 32 + sub 48)
      40            frame gap
      57            930:22354  promo bar
      40            frame gap
     866            930:22427  table     (guide 49 + gap 12 + row 805)
     120            bottom padding
   = 1644           930:22330

   Reuse is verified, not assumed. fx.py spec run on both frames, node for node:
     930:22331 art   vs home 929:31206 — 14 nodes, every name, box, fill,
                     effect and opacity identical. /assets/figma/pricing-art.webp
                     is the same composition; not re-exported.
     930:22372 strip vs home 929:31230 — 55 nodes, identical throughout.
     930:22354 promo vs home 929:31286 — 22 nodes, identical but for the copy:
                     home's comp reads 40% OFF / Code: WC40, this one 50% OFF /
                     Code: WC50. Both are rendered from LAB.OFF and LAB.CODE at
                     runtime (currently .50 and WC50), so this frame is the one
                     that agrees with LAB. Neither string is a literal.
     930:22345 head  vs home 929:31220 — differs, see below. Home's frame also
                     carries the 300x48 Forex | Futures toggle (929:31229) that
                     home's build promoted into the Market card; this band's
                     copy of it (930:22429) sits at the head of the table and is
                     visible:false.

   Declared deviations from the file:
   - BAND GRADIENT. fx.py reports #303030 0% -> #0F0F0F 100%. The home band
     ships the measured correction: the fill actually completes at y 703 and
     then holds, which on that band's 1601 height is 43.9%. Converted against
     THIS band's own 1644, the same absolute y is 42.8%. .afxp's own 43.9% is
     left alone (it is home's) and this band restates it on its own class.
   - BACKGROUND ART. 930:22331 is 1512x1027 at 0,0 — the same eight rotated,
     individually blurred rects, same names, same fills and same blurs as home
     929:31206. REST returns no relativeTransform for either, so the composed
     2x export /assets/figma/pricing-art.webp is reused, not re-exported.
   - 930:22430 "Take Challenge Guide" carries a 13.9px BACKGROUND_BLUR. It
     ships as backdrop-filter: blur(6.95px) — Figma's blur radius is ~2x the
     CSS one. The pill has no fill in the file, so there is nothing for the
     backdrop to frost against except the band art, which is what Figma draws.
   - 930:22430's link TARGET is not in the file (no prototype flow on the node).
     It points at /how-it-works, the site's challenge guide. UNSOURCED.
   - .pl2-pricing__then, the "then <price> if you pass" line, has no node in
     this frame: the comp draws the illustrative single-figure price ($559)
     against Pay Later instead. It is scaled off the two figures it replaces,
     930:22539/22540 (SF Pro 510 / 16 / .8 white), and the wording is the
     file's own, from the legacy renderer's Pay Later cell ("then … if you
     pass").
   - 930:22429, the 300x48 Forex | Futures toggle at the head of the table, is
     visible:false and is deliberately not built.
   - TABLE COMPOSITION, and the one place this band is not pixel-faithful.
     930:22433 draws a bespoke arrangement: "Pick your path" (model + Pro /
     Standard in one card), Account size, Profit-split tier, Trading platform,
     an "Evaluation Rules — 8 conditions" card across the bottom left, and a
     right-hand summary card that carries the five checks inline. The shared
     component draws Model / Model Type / Account size / Platforms / Add-ons on
     the left and rules + bundle + price + payment methods on the right, with
     the five checks in a 1432x69 strip below. Reusing the component rather
     than rebuilding the frame is the instruction this band was built to, so
     the component's composition stands and the frame's does not.
     The consequence for the box above: 778px of it — 200 + 321 + 40 + 57 + 40
     + 120 — is this band's own and is exact. The remaining 866 is the
     component's table, whose row is whatever the component measures, not the
     frame's 805. The band is 1644 iff that row is 805. NOT VERIFIED: the
     sandbox this was built in has no browser and no disk left to install one.
     Render it at 1512 and measure .afxp before signing the band off.
   - 930:22530 and 930:22533, two 16x16 icon instances inside the Single
     Account / Buy in Bundle segment, are visible:false. The component does not
     draw them either.
   ========================================================================= */

/* ---- 930:22330 — band gradient, converted against this band's own 1644 ---- */
.afxp.pl2-pricing {
  background: linear-gradient(180deg, var(--af-shell-top) 0%, var(--af-shell-bottom) 42.8%);
}

/* ---- 930:22353 — subhead, 316 wide ---------------------------------------
   The home node is 558 and breaks after "Live preview." with a <br>; this one
   is 316 and wraps on its own. Stated on the band's own class so
   .afxp-head__sub keeps home's width everywhere else. */
.afxp-head__sub.pl2-pricing__sub { width: 316px; }

/* ---- 930:22430 — "Take Challenge Guide", 222x49 --------------------------
   Fixed 222x49 in the file, so width/height, not min-width or padding-derived.
   radius 50, padding 12 20, gap 4, 1px INSIDE rgba(255,255,255,.08), no fill,
   BACKGROUND_BLUR 13.9. Text 930:22431: SF Pro 510 / 16 / 19.09px / ls -.48. */
.pl2-pricing__guide {
  box-sizing: border-box; align-self: flex-start;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
  width: 222px; height: 49px; padding: 12px 20px; gap: 4px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--r-50);
  -webkit-backdrop-filter: blur(6.95px); backdrop-filter: blur(6.95px);
  text-decoration: none;
  transition: border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.pl2-pricing__guide > span:first-child {
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 19.09px; letter-spacing: -.48px;
  color: var(--af-white); white-space: nowrap;
}
/* 930:22432 — the 292:12 chevron, 20x20. Drawn direct rather than through
   .afxp-chev: that slot is 16 wide (its own node overflows it) and would leave
   this pill's content 4px narrower than the 222 the file fixes it at. */
.pl2-pricing__guideChev { display: block; width: 20px; height: 20px; flex: none; }

.pl2-pricing__guide:hover {
  border-color: rgba(255, 255, 255, .14);
  background-color: rgba(255, 255, 255, .04);
}

/* ---- Pay Later's second price line ---------------------------------------
   Written by atlas-pricing.js ONLY when data-afxp-paylater is on the section
   AND Pay Later is the selection. Empty — and so not drawn — otherwise, and on
   every other page. The figure it carries is LAB.was(), the full price on
   passing; never LAB.price(), which is the 50%-off ticket. */
.pl2-pricing__then {
  margin-top: 8px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; letter-spacing: -.32px;
  color: var(--af-white); opacity: .8; text-align: center; white-space: nowrap;
}
.pl2-pricing__then:empty { display: none; }

/* The band's own box is exact (200 + 321 + 40 + 57 + 40 + 866 + 120 = 1644),
   but the REUSED component's table row renders 805 - 14.1 = 790.9 in Chrome:
   its composition is the shared one (Model / Model Type / Account size /
   Platforms / Add-ons), not this frame's bespoke 930:22433 layout (Pick your
   path / Evaluation Rules / 8 conditions). Reuse was the instruction, so the
   component's natural height stands and the 14.1px difference is taken up by
   the band's tail rather than by stretching a shared row. min-height keeps the
   band at its drawn 1644 so nothing downstream shifts.
   DECLARED DEVIATION: the table row is 14.1px shorter than 930:22427 draws it. */
.afxp.pl2-pricing { min-height: 1644px; }

/* ============================================================================
   393 — Figma 930:23518 "iPhone 16 - 2" (393 x 2882), the SECOND child of
   930:23468, the mobile frame the CEO confirmed canonical. Mapped to this band
   by its own strings: "As seen on" (930:23520), "Configure your challenge"
   (930:23592), "Trade your way / choose freely" (930:23594/:23595), the same
   subhead (930:23596) and "Take Challenge Guide" (930:23625). Breakpoint and
   comment convention follow atlas-pl2-hero.css.

   SHARED COMPONENT FIRST. /assets/atlas-pricing.css already ships 1512 / 1180 /
   900 / 760 rules for every .afxp-* box, and this pass does not touch, fork or
   override any of them. Checked against 930:23518 node by node:

   - .afxp__body / .afxp__flow / .afxp-table__row / .afxp-side / .afxp-feats /
     .afxp-models / .afxp-pills / .afxp-addons — all collapse to a single 100%
     column at 393. COVERED, nothing to add.
   - .afxp-head__sub.pl2-pricing__sub — this band's own 316px. 930:23596 is
     316x48 at mobile x 38.5, i.e. still 316 and still centred, so the band's
     rule is right at 393 as written and correctly outranks the shared
     .afxp-head__sub{width:100%} at <=1180 (0,2,0 vs 0,1,0). COVERED.
   - .pl2-pricing__then — no node in either frame (see the deviation above). At
     16px its longest runtime string is ~165px inside a ~313px card, so the
     white-space:nowrap cannot overflow 393. COVERED, nothing to add.
   - .pl2-pricing__guide — NOT covered. 930:23624 is 345x49 at mobile, i.e. the
     full content column with its content centred (text 158 + gap 4 + chev 20,
     centred inside 345), against this file's fixed 222x49 align-self:flex-start.
     Rule added below.
   - .afxp.pl2-pricing min-height:1644px — NOT covered, and actively wrong at
     393: it is the desktop frame's own height and would pin ~700px of dead
     shell under the mobile table. Released below.
   - .afxp.pl2-pricing band gradient — NOT covered: 42.8% is 703px solved
     against the DESKTOP band's 1644. Restated below off the mobile node.

   TWO CONFLICTS BETWEEN THE SHARED RULES AND 930:23518, both left alone
   because resolving either means restyling an .afxp-* rule, which is out of
   scope for this pass. Flagged for the component's owner:
   1. "As seen on" strip. atlas-pricing.css hides .afxp__strip below 760. The
      mobile frame DRAWS it: 930:23519 is the desktop strip pasted unchanged,
      1512 wide, centred on the 393 frame (x -559, centre 197) and clipped by
      the frame, with the 604.7-wide logo row (930:23521) running off both
      edges. Shipping as hidden.
   2. Heading block. 930:23594/:23595 are SF Pro 510 at 56/56 on two 345-wide
      lines; the shared rule takes .afxp-head__t1/.afxp-head__t2 to 40/42 below
      760. Shipping at the shared 40/42.
   ========================================================================= */
@media (max-width: 1023px) {

  /* 930:23518 — fills[1] is the same #303030 -> #0F0F0F, handles
     (0.5076,0) -> (0.5013,0.27271) solved against this frame's own 2882:
     the ramp completes at 785.95px. In px, like the desktop rule, so it does
     not drift with the component's rendered height.
     min-height is the desktop frame's 1644 and must not survive at 393 — the
     mobile band is 2882 and the component's mobile height is whatever it
     measures, so the band goes back to hugging its content. */
  .afxp.pl2-pricing {
    min-height: 0;
    background: linear-gradient(180deg,
      var(--af-shell-top) 0%, var(--af-shell-bottom) 785.95px);
  }

  /* 930:23624 — 345x49, r50, padding 12/20, gap 4: full content column with
     its label + chevron centred, not the desktop 222 pinned left. Height,
     radius, padding, gap, border and backdrop blur are unchanged from 1512. */
  .pl2-pricing__guide { width: 100%; align-self: stretch; }
}