/* ============================================================================
   Home FAQ — "The questions you'd ask before you buy".
   Figma 705:57602 "Frame 2147259240" (1512 x 745).

   Two things about the height. The frame is 745 WITH row 4 drawn open. That is
   the expanded state, not the default: shipped all-closed the band is 677
   (745 - (136 - 68)) and grows to 745 when one row opens. Do not chase 745
   with a min-height.

   The band does NOT clip (clipsContent: false in the file). Three puzzle
   renders and the dot field deliberately spill onto the black sections above
   and below. If the integrating page needs them contained, add
   `overflow: hidden` to .afxq and nothing else changes.

   Figma child order is back-to-front:
     705:57603  dot field   1642x1289 @ (-130, -100), opacity .8, clips to 1512
     705:77924  head        690x177   @ (411, 40)
     705:77939  rows        716x376   @ (398, 249)
     705:77955  puzzle      350.8 aabb @ (-133, 379)
     705:77956  puzzle      532.7 aabb @ (-141, 464)
     705:77957  puzzle      391.6 aabb @ (1311, 305)
   ========================================================================= */

/* 705:57602 — column, align CENTER, padding 40/40/120/40, gap 32.
   That padding is genuine auto-layout padding. The fill is a plain vertical
   ramp; the handles really are vertical here, so no re-derivation needed. */
.afxq {
  position: relative;
  /* the --c puzzle piece is centred on x 1506.8 and is 302 wide, so it reaches
     x 1658 — 146px past the 1512 frame. The Figma page frame clips it; without
     a clip here it gives the whole document a horizontal scrollbar (measured
     documentElement.scrollWidth 1703 at a 1512 viewport). */
  overflow: hidden;
  box-sizing: border-box;
  padding: 40px 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;
}

/* 705:57603 "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 PNG 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 absoluteRenderBounds are 1512 wide starting at the band's left
   edge and run from y -100 to y +1189, which is what is reproduced. */
.afxq__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;
}

/* 705:77955 / 77956 / 77957 — the same 1024x1024 puzzle 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|):
     705:77955  aabb 350.8 @ (-133, 379)   t  +9.86 deg  -> 303.3 square
     705:77956  aabb 532.7 @ (-141, 464)   t -35.14 deg  -> 382.3 square, blur 7
     705:77957  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 below. Figma LAYER_BLUR radius is 2x the CSS blur(). */
.afxq__puzzle {
  position: absolute; display: block; pointer-events: none; z-index: 1;
  transform-origin: 50% 50%;
}
.afxq__puzzle--a { width: 303.3px; height: 303.3px; left: 42.4px;   top: 554.4px; margin: -151.65px 0 0 -151.65px; transform: rotate(-9.86deg); }
.afxq__puzzle--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); }
.afxq__puzzle--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); }

/* ---- 705:77924 — 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. */
.afxq__head {
  position: relative; z-index: 2;
  width: 690px; display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* 705:77926 — 78x33, radius 57, padding 6/14, gap 7. No fill on this node. */
.afxq__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  height: 33px; padding: 6px 14px; border-radius: 57px; box-sizing: border-box;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px; color: #0D0D0D;
}
.afxq__eyebrow img { width: 16px; height: 16px; display: block; flex: none; }

/* 705:77936 — column, gap 0. SF Pro 510 / 64 / 64px / ls -1.92 */
.afxq__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;
}
.afxq__h2 span { display: block; }
/* 705:77937 — the first line only. Gradient re-derived over the 690x64 text
   box: fx.py reports 164.7deg because it reads the handle vector without
   correcting for a 10.8:1 box. The corrected angle is 108.7deg, which puts
   the dark-to-light crossover between "questions" and "you'd" exactly as
   drawn. Verified against the reference export. */
.afxq__h2 .afxq__h2a {
  background: linear-gradient(108.7deg, #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;
}

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

/* 705:77940 (closed) / 705:77943 (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.
   705:77943 also carries INNER_SHADOW rgba(221,255,252,.24) blur 105.8 — a
   faint mint bloom that only shows once the row is open. */
.afxq__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-faq.js mirrors aria-expanded onto .afxq__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. */
.afxq__row--open { box-shadow: inset 0 0 105.8px rgba(221,255,252,.24); }

.afxq__rowh { margin: 0; font: inherit; }
/* 705:77944 — the header row, 684x52, SPACE_BETWEEN, align CENTER */
.afxq__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;
}
/* 705:77945 — SF Pro 590 / 20 / 30px / ls -.6 */
.afxq__q {
  font-size: 20px; line-height: 30px; font-weight: var(--w-semi);
  letter-spacing: -.6px; color: #0D0D0D;
}
/* 705:77946 — 52x52, radius 12, fill #F0F5F5, 20x20 glyph in #053F3B */
.afxq__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);
}
.afxq__toggle img {
  grid-area: 1 / 1; width: 20px; height: 20px; display: block;
  transition: opacity var(--t-fast) var(--e-out);
}
.afxq__toggle .afxq__minus { opacity: 0; }
.afxq__row--open .afxq__plus  { opacity: 0; }
.afxq__row--open .afxq__minus { opacity: 1; }

/* 705:77953 — 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. */
.afxq__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--e-out);
}
.afxq__row--open .afxq__panel { grid-template-rows: 1fr; }
.afxq__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. */
.afxq__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 ------------------------------------------------------------
   Transform and opacity only, hover behind a real pointer, reduced motion
   already neutralised globally in atlas-tokens.css.                        */
@media (hover: hover) and (pointer: fine) {
  .afxq__btn:hover .afxq__toggle { background-color: #E4EDED; }
}
.afxq__btn:active .afxq__toggle { transform: scale(.94); }
.afxq__btn:focus-visible {
  outline: 2px solid #053F3B; outline-offset: 4px; border-radius: var(--r-8);
}

/* ---- narrow viewports ---------------------------------------------------
   The frame is only drawn at 1512; below that the fixed boxes are released.
   Nothing here changes the 1512 rendering. */
@media (max-width: 1512px) {
  .afxq__puzzle--c { left: auto; right: 5.2px; margin-left: 0; margin-right: -151.05px; }
}
@media (max-width: 800px) {
  .afxq { padding: 40px var(--gutter) 80px; }
  .afxq__head, .afxq__rows { width: 100%; }
  .afxq__h2 { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; }
  .afxq__a { padding-right: 0; }
  .afxq__puzzle { display: none; }
}

/* ============================================================================
   MOBILE — Figma 705:120245 "Frame 2147259242", 393 x 703.
   Same note as 1512: the frame is 703 WITH row 4 drawn open. Shipped
   all-closed the band is 583 and grows to 703 when a row opens — 392 - 272
   is exactly the 120 the open row adds. Do not chase 703 with a min-height.
   Desktop rules above are untouched.
   ========================================================================= */
@media (max-width: 767px) {
  .afxq { padding: 50px 24px 100px; gap: 32px; }

  /* 705:140567 — two puzzle renders on mobile, not three. Same derivation:
     side = aabb / (|cos t| + |sin t|), and Figma's CCW rotation flips sign.
       705:140568  aabb 283.6 @ (-91.2,529.6)  t  +9.86deg -> 245.2 square
       705:140569  aabb 307   @ (19,567.2)     t -35.14deg -> 220.3 square, blur 7 */
  .afxq__puzzle { display: block; }
  .afxq__puzzle--a { width: 245.2px; height: 245.2px; left: 50.6px;  top: 671.4px; margin: -122.6px 0 0 -122.6px; transform: rotate(-9.86deg); filter: none; }
  .afxq__puzzle--b { width: 220.3px; height: 220.3px; left: 172.5px; top: 720.7px; margin: -110.15px 0 0 -110.15px; transform: rotate(35.14deg); filter: blur(3.5px); }
  .afxq__puzzle--c { display: none; }

  /* --- 705:140570 head, 345 x 129, gap 12 -------------------------------- */
  .afxq__head { width: 345px; gap: 12px; }
  /* 705:140581 — two 42px lines, ls -1.26. Pinned: SF Pro Display fits each in
     the 345 column, the fallback would not. */
  .afxq__h2 { font-size: 42px; line-height: 42px; letter-spacing: -1.26px; }
  .afxq__h2 span { white-space: nowrap; }

  /* --- 705:140584 rows, 345 x 392 (open) / 272 (closed), gap 8 ----------- */
  .afxq__rows { width: 345px; gap: 8px; }
  /* 705:140585 — 62 tall closed: 8 + 46 + 8. Padding 8/8/8/20. */
  .afxq__row { padding: 8px 8px 8px 20px; }
  .afxq__btn { min-height: 46px; }
  /* 705:140586 — SF Pro 590 / 18 / 27 / ls -0.54 */
  .afxq__q { font-size: 18px; line-height: 27px; letter-spacing: -.54px; }
  /* 705:140587 — 46x46, radius 10.615, 18px glyph */
  .afxq__toggle { width: 46px; height: 46px; border-radius: 10.615px; }
  .afxq__toggle img { width: 18px; height: 18px; }
  /* 705:140615 open row — 24 between the header and the answer, and the row's
     bottom padding goes 8 -> 20, so the panel carries the extra 12.
     705:140625 is 317 wide (345 - 20 - 8), four 21px lines. */
  .afxq__a { padding: 24px 0 12px; line-height: 21px; }
}