/* ============================================================================
   Free Trial FAQ — "The questions you'd ask before you buy".
   Figma 774:310097 "Frame 2147259807" (1512 x 785), file
   rijNBFC24rPaqbSoj29uvJ.

   HEIGHT: 785 is the frame WITH row 4 drawn open. That is the expanded state,
   not the default. Shipped all-closed the band is 717 (785 - (136 - 68)) and
   grows to 785 when one row opens. Do not chase 785 with a min-height.
   80 (pad) + 177 (head) + 32 (gap) + 376 (rows) + 120 (pad) = 785.

   This is the same accordion component as the home FAQ (705:57602) with a
   different backdrop and a different decorative render, so the row geometry
   below matches atlas-faq.css by derivation, not by copying. It is a separate
   file on purpose: the two bands differ in top padding and in the art.

   Figma child order is back-to-front:
     774:310098  dot field  1642x1289 @ (-130, -100), opacity .8, rotation 180
     774:330419  head       690x177   @ (411, 80)
     774:330434  rows       716x376   @ (398, 289)
     774:330450  orb        350.8 AABB @ (-133, 379)
     774:330451  orb        532.7 AABB @ (-141, 464)
     774:330452  orb        391.6 AABB @ (1311, 305)
   ========================================================================= */

.afxfq {
  position: relative;
  box-sizing: border-box;
  padding: 80px var(--gutter) 120px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  background: linear-gradient(180deg, #FFFFFF 0%, #EBEDF2 100%);
  font-family: var(--font-sans);
  color: #0D0D0D;
}
.afxfq *, .afxfq *::before, .afxfq *::after { box-sizing: border-box; }

/* 774:310098 "dots" — 2538 ellipses in 8 tiled pattern groups. Rebuilt as a
   repeating radial tile rather than shipped as art: the grid is perfectly
   regular (14.914 x 19.1 pitch, 1.66 x 2.12 dots) and a 3284x2578 image for it
   would be absurd.
   Colour: #7CB1AC at fill opacity .5, on nodes at opacity .4, inside a frame
   at opacity .8 -> an effective 16% teal, split here as a .5 paint under a .32
   layer so the two multipliers stay legible. The frame's render bounds are
   1512 wide from the band's left edge and run y -100 to y +1189. */
.afxfq__dots {
  position: absolute; left: 0; top: -100px; width: 100%; height: 1289px;
  opacity: .32;
  background-image: radial-gradient(ellipse 0.83px 1.06px at center, rgba(124,177,172,.5) 0 99%, transparent 100%);
  background-size: 14.914px 19.1px;
  background-position: -12.6px 293.1px;
  pointer-events: none;
  z-index: 0;
}

/* 774:330450 / 330451 / 330452 — the same 1024x1024 render three times,
   rotated. Figma reports the axis-aligned bounding box of a rotated node, not
   the node, so each side is AABB / (|cos t| + |sin t|):
     774:330450  AABB 350.8 @ (-133, 379)   t  +9.86 deg  -> 303.3 square
     774:330451  AABB 532.7 @ (-141, 464)   t -35.14 deg  -> 382.3 square, blur 7
     774:330452  AABB 391.6 @ (1311, 305)   t -21.42 deg  -> 302.1 square, blur 4.9
   Figma rotation is counter-clockwise positive and CSS is clockwise positive,
   hence the sign flips. Figma LAYER_BLUR radius is 2x the CSS blur(). */
.afxfq__orb {
  position: absolute; display: block; pointer-events: none; z-index: 1;
  transform-origin: 50% 50%;
}
.afxfq__orb--a { width: 303.3px; height: 303.3px; left: 42.4px;   top: 554.4px; margin: -151.65px 0 0 -151.65px; transform: rotate(-9.86deg); }
.afxfq__orb--b { width: 382.3px; height: 382.3px; left: 125.35px; top: 730.35px; margin: -191.15px 0 0 -191.15px; transform: rotate(35.14deg); filter: blur(3.5px); }
.afxfq__orb--c { width: 302.1px; height: 302.1px; left: 1506.8px; top: 500.8px; margin: -151.05px 0 0 -151.05px; transform: rotate(21.42deg); filter: blur(2.45px); }

/* ---- 774:330419 — head, 690x177 ---------------------------------------- */
/* 411 = (1512 - 690) / 2. Fixed width: at auto the 64px heading sets its own
   measure and the two lines stop breaking where they are drawn.
   774:330419's gap 32 never applies — it has a single child (774:330420),
   which is the gap-16 pair. */
.afxfq__head {
  position: relative; z-index: 2;
  width: 690px; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* 774:330421 — 78x33, radius 57, padding 6/14, gap 7. No fill on this node. */
.afxfq__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 14px; border-radius: 57px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #0D0D0D;
}
.afxfq__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }

/* 774:330431 — column, gap 0. SF Pro 510 / 64 / 64px / ls -1.92 */
.afxfq__h2 {
  margin: 0; width: 100%;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px;
  text-align: center; color: #0D0D0D;
}
.afxfq__h2 span { display: block; }
/* 774:330432 — the first line only. Re-derived over the 690x64 text box: fx.py
   reports 164.7deg because it reads the handle without correcting for a 10.8:1
   box. The corrected angle puts the dark-to-light crossover between
   "questions" and "you'd", exactly as drawn. */
.afxfq__h2 .afxfq__h2a {
  background: linear-gradient(108.71deg, #0D0D0D 55.77%, #CECECE 80.63%);
  -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;
}

/* ---- 774:330434 — rows, 716x376, column, gap 12 ------------------------- */
/* 398 = (1512 - 716) / 2. 716 is a `width`. */
.afxfq__rows {
  position: relative; z-index: 2;
  width: 716px; display: flex; flex-direction: column; gap: 12px;
}

/* 774:330435-437 (closed) / 774:330438 (open) — radius 16, white.
   Padding is 8/8/8/24 closed and 8/8/24/24 open; the extra 16px of bottom
   padding lives on the panel so it animates away with everything else.
   774:330438 also carries INNER_SHADOW rgba(221,255,252,.24) blur 105.8 — a
   faint mint bloom that only shows once the row is open. */
.afxfq__row {
  border-radius: var(--r-16);
  background: var(--af-white);
  padding: 8px 8px 8px 24px;
  transition: box-shadow var(--t-base) var(--e-out);
}
/* atlas-ft-faq.js mirrors aria-expanded onto .afxfq__row--open so the open
   state can be styled from the row down without :has(). aria-expanded stays
   the source of truth for assistive tech. */
.afxfq__row--open { box-shadow: inset 0 0 105.8px rgba(221,255,252,.24); }

.afxfq__rowh { margin: 0; font: inherit; }
/* 774:330439 — the header row, 684x52, SPACE_BETWEEN, align CENTER */
.afxfq__btn {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 52px; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit;
}
/* 774:330440 — SF Pro 590 / 20 / 30px / ls -.6 */
.afxfq__q {
  font-size: 20px; line-height: 30px; font-weight: var(--w-semi);
  letter-spacing: -.6px; color: #0D0D0D;
}
/* 774:330441 — 52x52, radius 12, fill #F0F5F5, 20x20 glyph in #053F3B */
.afxfq__toggle {
  position: relative; flex: none;
  width: 52px; height: 52px; border-radius: var(--r-12);
  background: var(--af-pale);
  display: grid; place-items: center;
  transition: background-color var(--t-fast) var(--e-out), transform var(--t-instant) var(--e-out);
}
.afxfq__toggle img {
  grid-area: 1 / 1; width: 20px; height: 20px; display: block;
  transition: opacity var(--t-fast) var(--e-out);
}
.afxfq__toggle .afxfq__minus { opacity: 0; }
.afxfq__row--open .afxfq__plus  { opacity: 0; }
.afxfq__row--open .afxfq__minus { opacity: 1; }

/* 774:330448 — the answer, 684 wide with 76px of right padding, so the text
   measures 608. Animated with grid-template-rows 0fr -> 1fr; never `height`,
   which cannot be interpolated from auto. */
.afxfq__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--e-out);
}
.afxfq__row--open .afxfq__panel { grid-template-rows: 1fr; }
.afxfq__panel > div { overflow: hidden; min-height: 0; }
/* 10px gap under the header + 42px of copy + the 16px that takes the row's
   bottom padding from 8 to 24 = 68, which is exactly 136 - 68. */
.afxfq__a {
  margin: 0; padding: 10px 76px 16px 0;
  font-size: 16px; line-height: 21.12px; font-weight: var(--w-medium);
  letter-spacing: -.48px; color: #0D0D0D; opacity: .8;
}

/* ---- motion ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .afxfq__btn:hover .afxfq__toggle { background-color: #E4EDED; }
}
.afxfq__btn:active .afxfq__toggle { transform: scale(.94); }
.afxfq__btn:focus-visible {
  outline: 2px solid #053F3B; outline-offset: 4px; border-radius: var(--r-8);
}

/* ---- narrow viewports --------------------------------------------------- */
@media (max-width: 1512px) {
  .afxfq__orb--c { left: auto; right: 5.2px; margin-left: 0; margin-right: -151.05px; }
}
@media (max-width: 800px) {
  .afxfq { padding: 56px var(--gutter) 80px; }
  .afxfq__head, .afxfq__rows { width: 100%; }
  .afxfq__h2 { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .afxfq__a { padding-right: 0; }
  .afxfq__orb { display: none; }
}