/* ============================================================================
   About v2, band "cta" — "Now you know us. Let us back you".
   Figma DESKTOP 705:388731 (1512 x 1597) / MOBILE 705:398392 (393 x 2596).
   THIS FILE STYLES THE CONTENT ONLY: 1512 x 794 / 393 x 775. The frame's last
   child is the shared site footer (desktop 705:388765, 1488x803 at 12,794;
   mobile 705:398439, 377x1821 at 8,775) and belongs to fragments/footer.html.
   794 + 803 = 1597. 775 + 1821 = 2596.
   Every number below is read out of the cached node JSON. Prefix .abcta- only.
   Deviations are listed in fragments/ab-cta.html.
   ========================================================================= */

/* ---- band 705:388731 -------------------------------------------------------
   clipsContent TRUE. Two GRADIENT_LINEAR fills with identical handles
   (0.5076,0) -> (0.5076,0.4388753); the top one is opaque so it is the only
   one drawn. 0.4388753 * 1597 = 700.98px = 88.28% of this 794px band.
   #303030 / #0F0F0F are --af-shell-top / --af-shell-bottom.               */
.abcta {
  position: relative;
  width: 100%;
  height: 794px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--af-shell-top) 0%, var(--af-shell-bottom) 88.28%);
}
.abcta *, .abcta *::before, .abcta *::after { box-sizing: border-box; }

/* ---- 705:388732 the glass-disc photograph, 1516 x 853 at (0,0) -------------
   Full-bleed per contract §3: left/right 0, width auto, min-width 1516 (the
   node width, which is already 4px wider than the 1512 stage). At exactly
   1512 the box measures 1516 wide at x=0, which is the data-fig number.
   The two <img> layers inside are the inverses of the node's two STRETCH
   imageTransforms — see deviation 1 in the fragment.                      */
.abcta-photo {
  position: absolute; z-index: 0;
  top: 0; left: 0; right: 0;
  width: auto; min-width: 1516px; height: 853px;
  pointer-events: none; user-select: none;
}
.abcta-photo img { position: absolute; top: 0; left: 0; width: 1516px; height: 1137px; }
/* fills[0]: imageTransform [[1,0,-0.19494],[0,0.75022,0.12489]] inverted */
.abcta-photo__a { left: 295.53px; top: -142px; }
/* fills[1] (drawn ON TOP): a 171.78deg rotation of the same photo over the
   left half. imageTransform [[-0.98974,0.08039,0.31943],[-0.19049,-0.74252,
   0.78473]] inverted, then rescaled from image px to the 1516x1137 element. */
.abcta-photo__b {
  transform-origin: 0 0;
  transform: matrix(-0.98974, 0.14287, -0.14288, -0.98974, 606.76, 813.89);
}

/* ---- the 1512 stage that positions everything else -------------------------
   Contract §3: a fixed-1512 stage that positions content stays centred.   */
.abcta-stage {
  position: absolute; z-index: 1;
  top: 0; left: 50%; margin-left: -756px;
  width: 1512px; height: 794px;
}

/* ---- 705:388733 ambient glow, 1693 x 956 at (27,-124) ----------------------
   VECTOR "Ellipse 473", solid #051F1D (= --af-hero-glow),
   LAYER_BLUR radius 516.4 -> CSS blur(258.2px). Its BACKGROUND_BLUR (315.6)
   is deliberately dropped; see deviation 2.                               */
.abcta-glow {
  position: absolute;
  left: 27px; top: -124px; width: 1693px; height: 956px;
  border-radius: 50%;
  background: var(--af-hero-glow);
  filter: blur(258.2px);
  pointer-events: none;
}

/* ---- 705:388734 scrim under the tick row, 737 x 41 at (388,725) -----------
   Solid #000000, LAYER_BLUR 74.6 -> CSS blur(37.3px).                     */
.abcta-scrim {
  position: absolute;
  left: 388px; top: 725px; width: 737px; height: 41px;
  background: var(--af-black);
  filter: blur(37.3px);
  pointer-events: none;
}

/* ---- 705:388735 Discord-mark light artwork --------------------------------
   FRAME 1764.3 x 1464.1 at (-126,-351), clipsContent TRUE. Shipped flattened
   (the inner group already carries its 0.3 opacity), exported 1100px wide and
   drawn at the frame's full css size.                                     */
.abcta-light {
  position: absolute;
  left: -126px; top: -351px;
  width: 1764.3px; height: 1464.1px;
  pointer-events: none; user-select: none;
}

/* ---- 705:388749 heading + CTA stack ---------------------------------------
   558 x 385 at (477,120). layoutMode VERTICAL, gap 32, align CENTER, no pad.
   209 + 32 + 63 + 32 + 49 = 385, so the height hugs exactly.              */
.abcta-stack {
  position: absolute;
  left: 477px; top: 120px; width: 558px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}

/* 705:388750 — eyebrow + headline, VERTICAL gap 16. 33 + 16 + 160 = 209. */
.abcta-top {
  width: 558px; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}

/* 705:388751 — eyebrow pill, 119 x 33, r 57, pad 6/14, gap 7, NO fill,
   BACKGROUND_BLUR 16.7 -> backdrop-filter blur(8.35px).
   14 + 16 + 7 + 68 + 14 = 119.  6 + 21 + 6 = 33.                          */
.abcta-eb {
  margin: 0; flex: none;
  display: inline-flex; flex-direction: row; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: 57px;
  backdrop-filter: blur(8.35px);
  -webkit-backdrop-filter: blur(8.35px);
}
.abcta-eb__icon { display: block; flex: none; width: 16px; height: 16px; }
/* 705:388753 — Saans VF-TRIAL 500 / 14 / lh 21 / ls -0.42. characterStyle-
   Overrides put "move" on a 60%-opacity white fill; "Your " stays 100%.   */
.abcta-eb__t {
  font-family: var(--font-alt);
  font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: var(--af-white);
  white-space: nowrap;
}
.abcta-eb__dim { color: var(--w-60); }

/* 705:388754 — headline frame, 558 x 160, VERTICAL gap 0, justify+align
   CENTER. Both lines are SF Pro 510 / 80 / lh 80 / ls -2.4.
   The two text nodes are WIDER than the 558 frame (586 HUG and 712 FIXED)
   and overflow it symmetrically, exactly as in Figma.                     */
.abcta-head {
  margin: 0; flex: none;
  width: 558px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  text-align: center;
}
/* 705:388755 — HUG 586 x 80. Two gradient fills; the top one is opaque, so
   only #F8F8F8 -> #636363 is drawn. The file's 162.2deg is the angle in
   NORMALISED space; over the real 586 x 80 box the handles
   (0.54878,-0.26111) -> (0.93152,0.93434) project onto a CSS gradient line
   of 113.1deg with stops at 50.4% and 93.2%.                              */
.abcta-head__a {
  display: block; flex: none;
  width: max-content; white-space: nowrap;
  color: #F8F8F8;                       /* fallback, contract §4 */
  background-image: linear-gradient(113.1deg, #F8F8F8 50.4%, #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;
}
/* 705:388756 — FIXED 712 x 80, solid #FFFFFF. */
.abcta-head__b {
  display: block; flex: none;
  width: 712px; white-space: nowrap;
  color: var(--af-white);
}

/* 705:388757 — lede. FILL 558 x 63 (3 lines at 21.12), SF Pro 510 / 16 /
   lh 21.12 / ls -0.32, #FFFFFF at node opacity 0.8.                       */
.abcta-lede {
  margin: 0; flex: none;
  width: 558px;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.32px;
  text-align: center;
  color: var(--af-white);
  opacity: .8;
}

/* 705:388758 — button row, HORIZONTAL gap 12, align MIN (tops flush).
   270 + 12 + 163 = 445. Row height 49 (the taller of the two).            */
.abcta-ctas {
  flex: none;
  display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
}

/* 705:388759 — lime CTA. Reuses .afx-btn-lime (fill #E1FFA0, ink #001D21,
   1.5px INSIDE --af-card-g stroke via ::after, press + hover). Overridden
   here because THIS instance is 270 x 48, r 28, pad 14/20/14/24, weight 510
   and has NO drop shadow (effects[] is empty on the node).
   24 + 202 + 8 + 16 + 20 = 270.   14 + 20 + 14 = 48.                      */
.abcta-lime {
  height: 48px;
  padding: 14px 20px 14px 24px;
  border-radius: var(--r-28);
  font-weight: var(--w-medium);
  text-transform: capitalize;          /* node 705:388760 textCase: TITLE */
  box-shadow: none;
}
/* 705:388761 — 16 x 20 slot holding the 20 x 20 chevron instance at
   (+0.5, -0.5). The slot keeps the button hugging to 270. */
.abcta-chev { position: relative; flex: none; width: 16px; height: 20px; }
.abcta-chev .afx-btn__chev { position: absolute; left: .5px; top: -.5px; }

/* 705:388763 — ghost CTA. Reuses .afx-btn-ghost (r 50, backdrop blur 13.9,
   weight 510, press + hover). This instance is 163 x 49, pad 12/20, and
   unlike the hero's it HAS a rgba(255,255,255,.08) fill on top of the
   matching 1px INSIDE hairline. The hairline is an inset shadow, not a
   border, so the box still hugs to 20 + 123 + 20 = 163.                   */
.abcta-ghost {
  height: 49px;
  padding: 12px 20px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--w-08);
  background-color: var(--w-08);
  text-transform: capitalize;          /* node 705:388764 textCase: TITLE */
}
@media (hover: hover) and (pointer: fine) {
  .abcta-ghost:hover { background-color: var(--w-14); }
}

/* ---- 705:388845 tick rail, 706 x 16 at (403,735) --------------------------
   Outer frame is VERTICAL gap 36 with a single child; 705:388846 is the
   HORIZONTAL gap 16 row. 259 + 16 + 236 + 16 + 179 = 706.                 */
.abcta-ticks {
  position: absolute;
  left: 403px; top: 735px; width: 706px;
  display: flex; flex-direction: column; align-items: center; gap: 36px;
}
.abcta-ticks__row {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
}
/* 705:388847 / 705:388851 / 705:388855 — 16x16 tick + 8px gap + label.
   SF Pro 510 / 14 / lh 14 / ls 0, #FFFFFF. The tick glyph is #7CB1AC. */
.abcta-tick {
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  flex: none;
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: 14px; line-height: 14px; letter-spacing: 0;
  color: var(--af-white);
  white-space: nowrap;
}
.abcta-tick img { display: block; flex: none; width: 16px; height: 16px; }

/* ---- focus, motion (contract §6) ------------------------------------------ */
.abcta a:focus-visible {
  outline: 2px solid var(--af-lime);
  outline-offset: 3px;
}

/* ===========================================================================
   MOBILE — Figma 705:398392, 393 x 2596, content band 393 x 775.
   Nothing above this line is touched.
   ======================================================================== */
@media (max-width: 767px) {

  /* 705:398392 — same two gradient fills; top handles y 0 -> 0.0878297 of
     2596 = 228.0px = 29.42% of this 775px band. */
  .abcta {
    height: 775px;
    background: linear-gradient(180deg, var(--af-shell-top) 0%, var(--af-shell-bottom) 29.42%);
  }

  /* 705:398393 — 758 x 779 at x=-182. Its centre (-182 + 379 = 197) is the
     393 frame's centre, so it stays centred on any phone width. ONE image
     fill here: imageTransform [[0.72978,0,0.29828],[0,1,0]] inverted ->
     left -309.8px, 1038.6 x 779 (aspect 1.3333 = the native 1448/1086). */
  .abcta-photo {
    left: 50%; right: auto; margin-left: -379px;
    width: 758px; min-width: 0; height: 779px;
  }
  .abcta-photo__b { display: none; }
  .abcta-photo__a {
    left: -309.8px; top: 0; width: 1038.6px; height: 779px;
    transform: none;
  }

  .abcta-stage { left: 0; margin-left: 0; width: 100%; height: 775px; }

  /* 705:398394 — 1133.4 x 1328.4 at (-420,-237), LAYER_BLUR 352.83 -> 176.4 */
  .abcta-glow {
    left: 50%; margin-left: -616.5px; top: -237px;
    width: 1133.4px; height: 1328.4px;
    filter: blur(176.4px);
  }

  /* 705:398395 — 259 x 79 at (68,646), LAYER_BLUR 74.6 -> 37.3. Centred on
     the viewport (x=67 at 393) so it cannot cause overflow on a 360. */
  .abcta-scrim {
    left: 50%; margin-left: -129.5px; top: 646px;
    width: 259px; height: 79px;
  }

  /* 705:398396 — same 1764.3 x 1464.1 artwork, at (-685,-351). */
  .abcta-light { left: 50%; margin-left: -881.5px; top: -351px; }

  /* 705:398410 — 394 x 477 at (0,100), pad 0/24, VERTICAL gap 24, CENTER.
     Built at 393 (see deviation 9). 201 + 24 + 105 + 24 + 123 = 477. */
  .abcta-stack {
    left: 0; right: 0; width: auto;
    top: 100px;
    padding: 0 24px;
    gap: 24px;
  }

  /* 705:398411 — 346 x 201, VERTICAL gap 12. 33 + 12 + 156 = 201. */
  .abcta-top { width: auto; align-self: stretch; gap: 12px; }

  /* 705:398415 — 346 x 156, two lines at 52/52/-1.56. */
  .abcta-head {
    width: auto; align-self: stretch;
    font-size: 52px; line-height: 52px; letter-spacing: -1.56px;
  }
  /* 705:398416 — 254 x 104, i.e. it WRAPS to two lines. Same two gradient
     fills; projected over the 254 x 104 box the CSS line is 142deg with
     stops at 27.1% / 93.3%. */
  .abcta-head__a {
    width: 254px; white-space: normal;
    background-image: linear-gradient(142deg, #F8F8F8 27.1%, #636363 93.3%);
  }
  /* 705:398417 — FILL 346 x 52, one line. */
  .abcta-head__b { width: 100%; white-space: nowrap; }

  /* 705:398418 — 338 x 105 (5 lines at 21.12). */
  .abcta-lede { width: 338px; }

  /* 705:398419 — 293 x 123, VERTICAL gap 12. 56 + 12 + 55 = 123. */
  .abcta-ctas {
    flex-direction: column; align-items: stretch;
    width: 293px; gap: 12px;
  }
  /* 705:398420 — back to the shared component: 293 x 56, pad 18/32, r 100,
     weight 590, shadow 2px 14px 24px rgba(38,63,66,.12).
     32 + 205 + 8 + 16 + 32 = 293.   18 + 20 + 18 = 56. */
  .abcta-lime {
    height: 56px;
    padding: 18px 32px;
    border-radius: var(--r-pill);
    font-weight: var(--w-semi);
    box-shadow: 2px 14px 24px 0 rgba(38,63,66,.12);
  }
  /* 705:398421 — 293 x 55, pad 18/32, r 50, NO fill, 1px inside .08 hairline,
     BACKGROUND_BLUR 27.8 -> 13.9 (already on .afx-btn-ghost). */
  .abcta-ghost {
    height: 55px;
    padding: 18px 32px;
    background-color: transparent;
  }
  @media (hover: hover) and (pointer: fine) {
    .abcta-ghost:hover { background-color: var(--w-06); }
  }

  /* 705:398425 — 259 x 80 at (68,655), VERTICAL gap 16, align CENTER.
     16 * 3 + 16 * 2 = 80. Centred on the viewport, see deviation 9. */
  .abcta-ticks {
    left: 50%; margin-left: -129.5px;
    top: 655px; width: 259px;
    gap: 16px;
  }
  .abcta-ticks__row { flex-direction: column; align-items: center; gap: 16px; }
}


/* ==========================================================================
   FIX 2026-08-03 — .abcta-lime / .abcta-ghost were built on .afx-btn-lime /
   .afx-btn-ghost, but those base rules live in atlas-hero.css, which this page
   does not load. Both buttons therefore rendered as default underlined blue
   links at 2.07:1 contrast over the photograph. The base geometry is declared
   here instead, matching Figma 705:388759 (270x48) and 705:388763 (163x49).
   ========================================================================= */
.abcta-lime {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--af-lime);
  color: var(--af-ink-teal);          /* never inherit link colour onto lime */
  text-decoration: none; white-space: nowrap;
  font-family: var(--font-sans);
  transition: transform var(--t-instant) var(--e-out),
              box-shadow var(--t-base) var(--e-out);
}
.abcta-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-50);
  color: var(--af-white);
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
.abcta-chev { display: inline-flex; align-items: center; flex: none; width: 16px; height: 20px; }
.abcta-chev img { display: block; }
@media (hover: hover) and (pointer: fine) {
  .abcta-lime:hover  { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.22); }
  .abcta-ghost:hover { background-color: var(--w-06); }
}
.abcta-lime:active, .abcta-ghost:active { transform: scale(.97); }


/* ---------------------------------------------------------------------------
   MOBILE PERFORMANCE, 3 Aug 2026
   This decorative glow carries filter: blur(258px) over a box ~1693x956. Blur
   cost is O(area x radius), so on a phone GPU it is one of the most expensive
   things on the page — and because it sits in the backdrop root, anything that
   samples the backdrop (the mobile menu's overlay) had to resolve it first,
   which took ~15s. A 258px-blurred solid ellipse is, visually, a radial
   gradient; below 768 it is drawn as one, for nothing.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  .abcta-glow {
    filter: none;
    background: radial-gradient(closest-side, var(--af-hero-glow) 0%, rgba(5,31,29,0) 100%);
  }
}