/* ============================================================================
   How It Works band 3b — "Simulated trading with real profits" calculator.
   Figma 1048:492591 "Frame 2147259239" (1512 x 1143), the SECOND child of the
   content band 1048:492522. Mobile 1048:498827 (393 x 1105).

   This band computes. Every account size comes from LAB in
   /assets/pricing-table.js — no size is hardcoded here or in the JS.
   ========================================================================= */

/* 1048:492591 — col, gap 93, padding 0/299/160/299 */
.afxhw-calc {
  position: relative;
  isolation: isolate;
  height: 1143px;
  box-sizing: border-box;
  padding: 0 299px 160px;
  display: flex; flex-direction: column; align-items: center;
  overflow: hidden;
  font-family: var(--font-sans);
  color: #0D0D0D;
}

/* 1048:492592 "image 1174" — 1512x851 at y 105, scaleMode FILL, blend DARKEN.
   Full-bleed: it is a band background, not placed art. */
.afxhw-calc__bg {
  position: absolute; left: 0; right: 0; top: 105px;
  width: auto; min-width: 1512px; height: 851px;
  background: url('/assets/figma/hiw-calc-bg.webp') center / cover no-repeat;
  mix-blend-mode: darken;
  pointer-events: none;
}

/* 1048:492593 — content column, 645x983, col gap 50 */
.afxhw-calc__inner {
  position: relative; z-index: 1;
  width: 645px;
  display: flex; flex-direction: column; align-items: center; gap: 50px;
}

/* 1048:492594 — head, 645x313, col gap 32 */
.afxhw-calc__head { width: 645px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.afxhw-calc__titles { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
/* 1048:492599 — eyebrow pill, radius 57, row gap 7 */
.afxhw-calc__eyebrow {
  margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 0; box-sizing: border-box;
  font-weight: var(--w-medium); font-size: 14px; line-height: 21px;
  letter-spacing: -.42px;
  color: #0D0D0D; white-space: nowrap;
}
.afxhw-calc__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }
/* 1048:492603/04 — two 80px lines, 100% leading, ls -2.4 */
.afxhw-calc__h2 {
  margin: 0;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 80px; line-height: 80px;
  letter-spacing: -2.4px;
  color: #0D0D0D; text-align: center;
}
/* 1048:492603 "Simulated trading" — the top fill is a 165.4deg #0D0D0D ->
   #CECECE ramp, not the flat ink of the second line (1048:492604). */
.afxhw-calc__h2 span:first-child {
  background: linear-gradient(165.4deg, #0D0D0D 0%, #CECECE 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  /* ink guard, per 4cdf511: background-clip:text paints only inside the border
     box, so at 100% leading the descenders receive no paint and are sliced. */
  padding-bottom: .2em; margin-bottom: -.2em;
}
/* 1048:492605 — 542 wide, 16/21.12, ls -.48, opacity .8, #3F4547 */
.afxhw-calc__lead {
  margin: 0; width: 542px; min-height: 72px;
  font-weight: var(--w-medium); font-size: 16px; line-height: 21.12px;
  letter-spacing: -.48px; text-align: center;
  color: rgba(63,69,71,.8);
}

/* ---- 1048:492606 — the widget, 608x514, col gap 12 ---------------------- */
.afxhw-calc__widget { width: 608px; display: flex; flex-direction: column; gap: 12px; }

/* 1048:492607 — controls card, 608x268, radius 32, #FFF, padding 24, gap 48 */
.afxhw-calc__controls {
  box-sizing: border-box;
  padding: 24px;
  border-radius: var(--r-32);
  background: var(--af-white);
  box-shadow: 13px 35px 41px 0 rgba(0,31,24,.07);
  display: flex; flex-direction: column; gap: 48px;
  overflow: hidden;
}
.afxhw-calc__group { display: flex; flex-direction: column; gap: 16px; }
/* 1048:492609 / 1048:492617 — SF Pro 590 24/29, ls -.72 */
.afxhw-calc__label { margin: 0; font-weight: var(--w-semi); font-size: 24px; line-height: 29px; letter-spacing: -.72px; color: #0D0D0D; }

/* 1048:492610 — pill row, 560x50, gap 4. Five 108.8-wide pills. */
.afxhw-calc__sizes { display: flex; flex-direction: row; gap: 4px; }
/* 1048:492611 — off state: #F2F4F7, radius 100 */
.afxhw-size {
  flex: 1 1 0; height: 50px; box-sizing: border-box;
  border: 0; border-radius: var(--r-pill);
  background: #F2F4F7;
  /* I1048:492611;134:8820 — 18/590, no tracking, ink #000000 */
  font-family: inherit; font-weight: var(--w-semi); font-size: 18px; line-height: 18px;
  letter-spacing: 0;
  color: var(--af-black);
  cursor: pointer;
  position: relative;
  transition: background-color var(--t-fast) var(--e-out);
}
/* 1048:492613 — on state: #E1FFA0, radius 53, 2px INSIDE rgba(0,0,0,.06) */
.afxhw-size[aria-checked="true"] {
  background: var(--af-lime);
  border-radius: 53px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06);
}

/* 1048:492618 — slider, 560x32. Track 560x8 radius 39 #F2F4F7; fill #7CB1AC;
   bubble 82x36 radius 28 #E1FFA0 with a 2px inside hairline.

   DECLARED DEVIATION: the file draws the fill 240 wide (15/35 of the track,
   which is exactly right) but places the bubble centred at x 744, 28px past
   the fill's own end. A thumb that does not sit on its own value is a drawing
   slip, not a behaviour to reproduce; the bubble is centred on the fill end. */
.afxhw-calc__slider { position: relative; height: 32px; display: flex; align-items: center; }
.afxhw-calc__track { position: absolute; left: 0; top: 12px; width: 100%; height: 8px; border-radius: 39px; background: #F2F4F7; }
.afxhw-calc__fill  { position: absolute; left: 0; top: 12px; height: 8px; border-radius: 39px; background: var(--af-teal); width: 42.857%; }
.afxhw-calc__bubble {
  position: absolute; top: 0; left: 42.857%;
  /* `left` is written in PIXELS by the JS and clamped to the track's ends —
     at rate 0 and rate 35 a plain percentage centre put 17px of the pill
     outside the white card. A CSS clamp cannot do it: a percentage margin
     resolves against the track's width, not against `left`. */
  transform: translateX(-50%);
  height: 36px; padding: 4px 12px; box-sizing: border-box;
  min-width: 82px;
  border-radius: 28px;
  background: var(--af-lime);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.06), -3px 4px 8px 0 rgba(0,0,0,.11);
  display: flex; align-items: center; justify-content: center;
  /* 1048:492622 — 18/700, ls -1.8, ink #000000 (not the band's #0D0D0D) */
  font-weight: var(--w-bold); font-size: 18px; line-height: 18px;
  letter-spacing: -1.8px;
  color: var(--af-black);
  pointer-events: none;
}
/* the real control sits on top, invisible but focusable and draggable */
.afxhw-calc__range {
  position: absolute; left: 0; top: 0; width: 100%; height: 32px;
  margin: 0; opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.afxhw-calc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; }
.afxhw-calc__range::-moz-range-thumb { width: 32px; height: 32px; border: 0; }
.afxhw-calc__range:focus-visible ~ .afxhw-calc__bubble { outline: 2px solid var(--af-deep); outline-offset: 2px; }

/* 1048:492623 — result card, 608x234, radius 32, 176.5deg #7CB1AC -> #053F3B,
   padding 42/24, col gap 24, centred, clips. */
.afxhw-calc__result {
  position: relative;
  box-sizing: border-box;
  height: 234px; padding: 42px 24px;
  border-radius: var(--r-32);
  background: linear-gradient(176.5deg, #7CB1AC 0%, #053F3B 100%);
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  overflow: hidden;
  isolation: isolate;
}
/* 1048:492632 / 1048:495649 — two 727x397 soft-light light-streak groups.
   Exported flat; they are hundreds of blurred paths and are not CSS. */
.afxhw-calc__orb {
  position: absolute; width: 727px; height: 397px;
  mix-blend-mode: soft-light; pointer-events: none;
}
.afxhw-calc__orb--a { left: 0; top: 9px;   background: url('/assets/figma/hiw-calc-orb-a.webp') 0 0 / 727px 397px no-repeat; }
.afxhw-calc__orb--b { left: -116px; top: 359px; background: url('/assets/figma/hiw-calc-orb-b.webp') 0 0 / 727px 397px no-repeat; }

/* 1048:492624 — chip, 32 tall, radius 57, padding 4/12/4/8, gap 7 */
.afxhw-calc__chip {
  position: relative; z-index: 1;
  margin: 0;
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 4px 12px 4px 8px; box-sizing: border-box;
  border-radius: 57px;
  background: linear-gradient(73.7deg,
    rgba(255,255,255,.09) 0%, rgba(255,255,255,.0333) 59.83%, rgba(255,255,255,.09) 100%);
  backdrop-filter: blur(8.35px); -webkit-backdrop-filter: blur(8.35px);
  font-weight: var(--w-medium); font-size: 16px; line-height: 24px;
  letter-spacing: -.48px;
  color: var(--af-white);
}
.afxhw-calc__chip img { width: 16px; height: 16px; display: block; flex: none; }

/* 1048:492627 — 328x56, row gap 4, baseline-ish (align MAX) */
/* margin:0 is load-bearing — it is a <p>, and the UA's 1em block margins put
   the figure 16px and the caption 32px below where the card draws them. */
.afxhw-calc__figure {
  position: relative; z-index: 1;
  margin: 0;
  display: flex; flex-direction: row; align-items: flex-end; justify-content: center; gap: 4px;
}
/* 1048:492628 — SF Pro 700 80/56, ls -4.8, 145.8deg #E1FFA0 -> #7CB1AC */
.afxhw-calc__amount {
  font-family: var(--font-display);
  font-weight: var(--w-bold); font-size: 80px; line-height: 56px;
  letter-spacing: -4.8px;
  /* the JS emits "$", "7", "500" as separate spans — see atlas-hiw-calc.js for
     why a text node cannot hold the drawn "$ 7 500" shape. The gap here IS the
     separation, and it takes the hug width from 234.7 to the drawn 261. */
  display: flex; align-items: baseline; gap: 13px;
  background: linear-gradient(145.8deg, #E1FFA0 0%, #7CB1AC 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  white-space: nowrap;
}
/* 1048:492629 — 590 18, opacity .5 */
.afxhw-calc__per { font-weight: var(--w-semi); font-size: 18px; line-height: 18px; color: rgba(255,255,255,.5); padding-bottom: 4px; }
/* 1048:492631 — 510 14, opacity .5 */
.afxhw-calc__note {
  position: relative; z-index: 1;
  margin: 0;
  font-weight: var(--w-medium); font-size: 14px; line-height: 14px;
  color: rgba(255,255,255,.5);
}

/* The asterisk in "With 100% Profit Split*" has no footnote drawn in the file.
   100% is a paid add-on over the default 80% split (LAB.ADDONS), so the
   asterisk is honoured with a real footnote rather than left dangling. */
/* The footnote is an addition, not something the file draws, so it is taken
   OUT of the 645x983 column's flow — in flow it pushed the drawn CTA 57px
   down. It sits in the band's own 160px bottom padding instead. */
.afxhw-calc__foot {
  position: absolute; left: 50%; transform: translateX(-50%); top: 999px;
  z-index: 1;
  margin: 0; width: 608px;
  font-weight: var(--w-medium); font-size: 12px; line-height: 16px;
  letter-spacing: -.24px; text-align: center;
  color: rgba(63,69,71,.7);
}

/* 1048:498666 — lime CTA, 241x56 at (635.5, 927) */

/* ------------------------------------------------------------- responsive */
@media (max-width: 1511px) {
  .afxhw-calc { height: auto; min-height: 1143px; padding-left: var(--gutter); padding-right: var(--gutter); }
  .afxhw-calc__inner { width: min(645px, 100%); }
  .afxhw-calc__head { width: 100%; }
  .afxhw-calc__lead { width: 100%; max-width: 542px; }
  .afxhw-calc__widget { width: min(608px, 100%); }
  /* the band is no longer a fixed 1143, so the footnote can rejoin the flow */
  .afxhw-calc__foot { position: static; transform: none; width: min(608px, 100%); }
}

/* =========================== mobile — 1048:498827, 393x1105 ============== */
@media (max-width: 760px) {
  /* 1048:498827 — 393x1105, col gap 50, padding 0/24/100/24, own background */
  .afxhw-calc { height: 1105px; padding: 0 24px 100px; background: linear-gradient(179.3deg, #EBEDF2 0%, #FFFFFF 100%); }
  /* 1048:498828 — 809x455 at (-161, 253), FILL, DARKEN */
  .afxhw-calc__bg { left: -161px; right: auto; min-width: 0; width: 809px; top: 253px; height: 455px; }
  .afxhw-calc__inner { width: 100%; gap: 50px; }
  /* 1048:498829 — 345x341, col gap 20. The height is pinned because the whole
     band below it is an absolute chain off a fixed 1105 frame, and the drawn
     text boxes are 10px taller than the same strings measure here. */
  .afxhw-calc__head { width: 100%; gap: 20px; min-height: 341px; }
  /* 1048:498835/36 — 52/52, ls -1.56 */
  .afxhw-calc__h2 { font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  .afxhw-calc__lead { width: 100%; min-height: 0; }

  /* 1048:498838 — 345x508, col gap 12 */
  .afxhw-calc__widget { width: 100%; }
  .afxhw-calc__controls { padding: 20px; gap: 32px; }
  .afxhw-calc__label { font-size: 18px; line-height: 22px; letter-spacing: -.54px; }
  /* 1048:498843-47 — the five pills wrap 3 + 2 */
  .afxhw-calc__sizes { flex-wrap: wrap; gap: 8px; }
  .afxhw-size { flex: 0 0 calc((100% - 16px) / 3); height: 44px; font-size: 16px; }
  .afxhw-calc__bubble { min-width: 62px; height: 30px; font-size: 14px; }

  /* 1048:498838 is 345x508 = controls 276 + gap 12 + result 220 */
  .afxhw-calc__result { height: 220px; padding: 32px 20px; gap: 16px; }
  /* 1048:498860 — 64/48, ls -3.84 */
  .afxhw-calc__amount { font-size: 64px; line-height: 48px; letter-spacing: -3.84px; }
  .afxhw-calc__per { font-size: 16px; }
  /* still out of flow: 1048:498827 is a fixed 1105 and the drawn CTA sits at
     949, so an in-flow footnote would push it down. It lives in the band's
     own 100px bottom padding, under the CTA. */
  .afxhw-calc__foot { top: 1021px; width: 345px; }
}