/* ============================================================================
   Stories band 2 — HERO.
   Figma 705:463418 (1512 x 890), child of the desktop frame 705:463416 at
   y = 56. The 56px announcement bar above it is band 1 and is NOT drawn here,
   so every offset below is measured from THIS band's own top edge
   (frame y minus 56). Markup: fragments/st2-hero.html.

   Requires, in this order:
     assets/atlas-tokens.css   custom properties
     assets/atlas-chrome.css   .afx-nav / .afx-lang  (the navbar 705:463421)
     assets/atlas-hero.css     .afx-btn-lime / .afx-btn-ghost / .afx-payouts*
     assets/atlas-st2-hero.css this file

   Reused verbatim, never re-declared here:
     705:463460  -> .afx-btn-lime   (same Button component as 705:16043)
     705:463461  -> .afx-btn-ghost  (same Button component as 705:16044)
     705:463462  -> .afx-payouts / .afx-payouts__card / .afx-payout / …
                    The right-hand group is the SAME 309x426 live-payout
                    component the home hero draws at 705:16046 — same 392+67
                    split, same 33px overlap, same fills, radii, blurs and type
                    specs. Only the five rows' data differs. Re-declaring it
                    under an afxs- prefix would be a parallel component.

   Every y below is a MARGIN or an absolute top. Padding on a wrapper inflates
   the box and drags the whole column down.
   ========================================================================= */

/* 705:463418 — the frame's own fill is image 2428c31f at scaleMode FILL with no
   imageTransform, so the export is a straight 1512x890 and places 1:1. */
.afxs-hero {
  position: relative;
  min-height: 890px;
  overflow: hidden;
  background: var(--af-black);
  isolation: isolate;
}

/* FULL-BLEED: this is a band background, not placed art. Pinned at a fixed
   1512 it leaves a bare strip down the right on wider viewports. */
.afxs-hero__bg {
  position: absolute; left: 0; right: 0; top: 0;
  width: auto; min-width: 1512px; height: 890px;
  background: url('/assets/figma/st2-hero-bg.webp') center top / cover no-repeat;
  pointer-events: none;
}

/* 705:463419 "Ellipse 473" — 1693x956 at (-776, 117) in band coordinates.
   Fill #051F1D, blendMode HARD_LIGHT, LAYER_BLUR radius 516.4. Figma's blur
   radius is ~2x the CSS blur() value, so 516.4 -> 258.2px.
   A fixed-width stage that POSITIONS art must stay centred, hence left:50%
   with margin-left = -776 - 756.
   DECLARED DEVIATION: the node also carries BACKGROUND_BLUR 315.6. Chrome
   renders backdrop-filter on a mix-blend-mode element as an opaque frosted
   plate, nothing like Figma's composite, so it is dropped. Same call as the
   identical node in the home hero (705:16015) and the community hero. */
.afxs-hero__glow {
  position: absolute; left: 50%; top: 117px;
  width: 1693px; height: 956px; margin-left: -1532px;
  background: var(--af-hero-glow); border-radius: 50%;
  filter: blur(258.2px);
  mix-blend-mode: hard-light;
  pointer-events: none;
}

/* 705:463420 "Overlay" — 1512x900 at band y 0. The band clips at 890, so the
   extra 10px is absorbed by .afxs-hero's overflow.
   Angle and stop positions re-derived from the raw gradientHandlePositions
   against the real 1512x900 box: handle p0->p1 is (1488.5, -2.39)px, so the
   CSS angle is 89.9deg and the CSS gradient line is 1513.4 long against
   Figma's 1488.5, which shifts every stop. */
.afxs-hero__overlay {
  position: absolute; left: 0; top: 0; width: 100%; height: 900px;
  background: linear-gradient(89.9deg,
                rgba(5,63,59,.62)      .05%,
                rgba(194,213,213,0)  21.06%,
                rgba(194,213,213,0)  81.88%,
                rgba(5,63,59,.4)     98.4%);
  pointer-events: none;
}

/* display:flow-root, not plain block. The row's 198px top MARGIN otherwise
   collapses straight out through .afxs-hero__page and this wrapper, taking the
   wrapper's own top edge down to y 198 with it — which drags the absolutely
   positioned navbar (top:0 against this box) from y 10 to y 208. Measured in
   Chrome, not assumed. A padding-top would fix the collapse and break rule 3. */
.afxs-hero__inner { position: relative; z-index: 2; display: flow-root; }

/* ---- 705:463421 — the shared navbar, injected by the assembler ------------
   Drawn at band y 10, x 10, 1492x59 — i.e. it floats OVER the hero, it does
   not push it. atlas-chrome.css ships .afx-nav in normal flow (the home and
   community pages draw the announcement bar inside the same section), so it
   is lifted out of flow here. Nothing else about the component is touched. */
.afxs-hero .afx-nav {
  position: absolute; top: 0; left: 0; right: 0;
  margin: 10px auto 0;
  z-index: 60;
}

/* the 1512 shell with the drawn 40px gutter. Deliberately NOT .afx-page: that
   rule is capped at 1432 AND only takes its gutter below 1512, so at exactly
   1512 its content would start at 40 but above 1512 it would start at 0. */
.afxs-hero__page {
  position: relative;
  width: 100%; max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--gutter); box-sizing: border-box;
}

/* ---- the hero column and the payout card sit side by side ------------------
   705:463455 column : 1054x479 at band (46, 198)
   705:463462 card   :  309x426 at band (1163, 244)
   1163 + 309 = 1472 = 1512 - 40, so the card's right edge is the gutter edge.
   The column is drawn at x46 inside a 40 gutter, hence the 6px nudge. */
.afxs-hero__row {
  display: flex; flex-direction: row; justify-content: space-between;
  align-items: flex-start;
  margin-top: 198px;
}
.afxs-hero__col {
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
  width: 1054px; flex: none;
  margin-left: 6px;
}
/* 244 - 198 */
.afxs-hero__row .afx-payouts { margin-top: 46px; }

/* 705:463456 — DM Sans 500 / 14 / 21px, #FFFFFF, 249 wide (hugs) */
.afxs-hero__eyebrow {
  margin: 0; font-family: var(--font-ui); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: var(--af-white);
}

/* 705:463457 — SF Pro 510 / 110 / 99px / ls -3.3px, 600x198, two lines.
   Two fills: SOLID #FFFFFF then a linear gradient on top. background-clip:text
   can only carry one, and the gradient is the visible one.
   Re-derived on the real 600x198 box from the handles
   p0(.6382,.0909) p1(.9315,.9343): 133.5deg, stops at 50.76% and 93.21%.
   The same handles on the community hero's 760-wide box give 126.8deg — the
   angle is a function of the box, so it cannot be copied between bands. */
/* width is fit-content over a 600 MIN, not a flat 600. background-clip:text
   paints only inside the element's background box, so a hard 600 leaves any
   ink past 600 with no gradient to clip — i.e. invisible, because the fill is
   transparent. On SF Pro both drawn lines are inside 600 and min-width holds
   the drawn box exactly; on the Inter fallback the box grows to the 661 of ink
   and the headline stays whole. The gradient geometry below is derived on the
   drawn 600 box; on the wider fallback box the angle drifts by ~2deg, which is
   invisible across a #F8F8F8 -> #FFFFFF ramp. */
.afxs-hero__h1 {
  margin: 0; width: fit-content; min-width: 600px; max-width: 100%;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 99px; letter-spacing: -3.3px;
  background: linear-gradient(133.5deg, #F8F8F8 50.76%, #FFFFFF 93.21%);
  -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;
}
/* DECLARED DEVIATION — the drawn 600px box is an SF Pro measurement. Measured
   in Chrome on the Inter fallback the two drawn lines are 600.7px and 661.1px
   of ink at the same 110/-3.3, so the drawn box wraps the headline to FOUR
   lines on every non-Apple device and the band grows 198px. The drawn type is
   kept exactly; the authored line break is made the only break instead, and
   the ink is allowed past the 600 box. Worst case is 661px inside a 1054
   column, still 456px clear of the payout card at x 1163. */
.afxs-hero__h1 span { display: block; white-space: nowrap; }

/* 705:463458 — SF Pro 510 / 18 / 27px / ls -0.36px, 553x108, node opacity .8 */
.afxs-hero__lead {
  margin: 0; width: 553px; max-width: 100%; opacity: .8;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px;
  color: var(--af-white);
}

/* 705:463459 — row, gap 12. 252 + 12 + 234 = 498 */
.afxs-hero__ctas { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; }

/* COPY FLAG — 705:463460 draws "Add your story for $5". "$5" is a Pay Later
   entry price and Pay Later ships only on /pay-later, so the label drops the
   trailing "for $5" and the button points at checkout.atlasfunded.com. Same
   treatment fragments/final.html gives the identical case. The old
   [data-af-entry-price] hook was removed with it — nothing wrote to it. */

/* 705:463470 — the "Live payouts" marker is a 6px #E1FFA0 dot with a 4px
   OUTSIDE stroke at rgba(225,255,160,.2), i.e. a halo. atlas-hero.css draws
   the dot but not the halo (the home node has no stroke), so the exported
   16x16 st2-ic-star.svg is used instead of the <i>. Sized explicitly. */
.afxs-hero .afx-payouts__dot img { width: 16px; height: 16px; display: block; }

/* ---- 705:463440 / 463445 / 463450 — stat strip -----------------------------
   Three 449-wide columns at band x 46 / 534 / 1022 (pitch 488, so gap 39),
   band y 781. The hero column ends at 198 + 479 = 677, so the gap is 104.
   Total run 1022 + 449 - 46 = 1425. Deliberately NOT .afx-stats: that rule is
   three flex:1 columns with a full-width rule and a 40 gap — this band draws
   fixed 449 columns and a rule that stops 13px short. */
.afxs-hero__stats {
  display: flex; flex-direction: row; align-items: flex-start; gap: 39px;
  width: 1425px; max-width: 100%;
  margin: 104px 0 0 6px;
}
.afxs-hero__stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 17px;
  width: 449px; flex: none;
}
/* 705:463441 — a VECTOR line, 436x0 with a 1px CENTER stroke at
   rgba(255,255,255,.25). Zero height: it straddles the column's top edge and
   contributes nothing to the 90. A plain 1px box would make the column 91. */
.afxs-hero__rule {
  width: 436px; max-width: 100%; height: 1px; margin-bottom: -1px;
  background: var(--w-25);
}
.afxs-hero__statbody { display: flex; flex-direction: column; gap: 4px; }
/* Saans 400 / 14 / 21px, node opacity .8 */
.afxs-hero__label {
  font-family: var(--font-alt); font-weight: var(--w-regular);
  font-size: 14px; line-height: 21px; color: var(--af-white); opacity: .8;
}
/* Saans 600 / 32 / 48px */
.afxs-hero__value {
  font-family: var(--font-alt); font-weight: var(--w-semi);
  font-size: 32px; line-height: 48px; color: var(--af-white);
}

/* 781 + 90 = 871, and the band is 890, so the strip clears the bottom by 19. */

/* ---------------------------------------------------------------- responsive
   DECLARED DEVIATION: 705:463416 is the only frame drawn for this page — the
   file has no narrower Stories artboard — so everything below 1512 is DERIVED,
   not matched, and follows the community hero's ladder so the two pages move
   the same way.                                                             */
@media (max-width: 1511px) {
  .afxs-hero__col, .afxs-hero__stats { margin-left: 0; }
  .afxs-hero__stats { width: 100%; }
  .afxs-hero__stat { flex: 1; width: auto; }
  .afxs-hero__rule { width: 100%; }
}
@media (max-width: 1400px) {
  /* 1054 + 63 + 309 no longer fits inside the gutters; the column gives way
     first because the card is a fixed-width component. */
  .afxs-hero__col { width: auto; flex: 1 1 auto; min-width: 0; }
  .afxs-hero__row { gap: 40px; }
  .afxs-hero__h1 { min-width: 0; }
}
/* 1180, not lower: at 110px the widest nowrap line is 661px of Inter ink, and
   below 1180 the side-by-side column is narrower than that. */
@media (max-width: 1180px) {
  .afxs-hero { min-height: 0; padding-bottom: 72px; }
  .afxs-hero__row { flex-direction: column; align-items: stretch; gap: 48px; margin-top: 128px; }
  .afxs-hero__row .afx-payouts { margin-top: 0; width: 100%; max-width: 380px; }
  .afxs-hero__h1 { font-size: 80px; line-height: 72px; letter-spacing: -2.4px; }
  .afxs-hero__lead { width: auto; }
  .afxs-hero__stats { margin-top: 64px; }
}
@media (max-width: 720px) {
  .afxs-hero__row { margin-top: 96px; gap: 40px; }
  .afxs-hero__col { gap: 24px; }
  .afxs-hero__h1 { font-size: 48px; line-height: 46px; letter-spacing: -1.44px; }
  /* the phone is too narrow to hold either drawn line unbroken, so the ink
     reflows and the authored break stops being load-bearing */
  .afxs-hero__h1 span { display: inline; white-space: normal; }
  .afxs-hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .afxs-hero__ctas .afx-btn-lime, .afxs-hero__ctas .afx-btn-ghost { width: 100%; }
  .afxs-hero__stats { flex-direction: column; align-items: stretch; gap: 24px; margin-top: 48px; }
  .afxs-hero__stat { width: auto; }
}