/* ============================================================================
   Home band — "How Atlas compares".  Figma 705:16575 (1512 x 1219),
   child of the mega-container 705:16528.
   Unlike the guarantee band this one IS auto-layout: a vertical stack with
   120px top/bottom, 40px side padding and a 60px gap, so it is built as flow
   and only the background group is taken out of it.
   ========================================================================= */

.afxc {
  --afxc-atlas-cell: #121B1A;   /* 705:36981 fill, band-local */
  --afxc-teal-edge:  #378E8C;   /* 705:37101 stroke */
  --afxc-red-edge:   #DB4446;   /* 705:37102 stroke */

  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 60px;
  padding: 120px 40px; box-sizing: border-box;
  /* 705:16575 fill — handle runs from 17.30% to the bottom, so the top 210px
     is flat #0F0F0F. */
  background: linear-gradient(180deg, #0F0F0F 17.30%, #121212 100%);
  overflow: hidden;
}

/* 705:16576 "Group 2147258026" — layoutPositioning ABSOLUTE, 1512x1185 at 0/0.
   705:16577 is an ALPHA mask (a 5-stop grey gradient) over 705:16579 "dots",
   a rotated 1642x1370 frame holding 20,320 individual 1.66x2.12 ellipses in
   eight 2,540-node groups. That is far past what is sane as vector, so the
   group is exported flat at 2x with the mask already applied. */
/* FULL-BLEED FIX: the design is drawn on a 1512 canvas, but this layer is a
   band background, not placed art. Pinned at 1512 it stopped short on wider
   viewports and left a bare strip of flat band colour down the right.
   Spans the viewport now; cover keeps the artwork's aspect. */
.afxc__bg {
  position: absolute; left: 0; right: 0; top: 0;
  width: auto; min-width: 1512px; height: 1185px; margin-left: 0;
  background: url('/assets/figma/cmp-dots.webp') no-repeat center top / cover;
  pointer-events: none;
}

/* ---- 705:36900 — header, 769x315, gap 32 -------------------------------- */
.afxc__head {
  position: relative; z-index: 1;
  width: 769px;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
/* 705:36901 — 769x241, gap 16 */
.afxc__headtop {
  width: 769px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
/* 705:36902 — 183x33, padding 6/14, gap 7, radius 57. fills[] is empty on this
   one (the guarantee band's twin has invisible paints), so nothing is drawn
   behind the label. */
.afxc__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 6px 14px; border-radius: 57px;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  color: var(--af-white);
}
.afxc__eyebrow-icon { display: block; width: 16px; height: 16px; flex: none; }
/* 705:36911 styleOverrideTable[2] — second run is white at .6 paint opacity */
.afxc__dim { color: var(--w-60); }

/* 705:36912 — 769x192, two 96px lines, gap 0 */
.afxc__title {
  margin: 0; width: 769px;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 96px; line-height: 96px; letter-spacing: -2.88px;
  text-align: center; color: var(--af-white);
}
/* 705:36913 fills[1]. fx.py reports this as "162.2deg 0%/100%" — that is the
   raw handle vector and it is wrong. Figma treats the three handles as an
   affine basis in the unit square and then stretches by the box, so the
   painted direction depends on the box aspect. Re-derived from h0/h1/h2 for
   this 769x96 box; the identical paint on the guarantee band's 614x96 box was
   plane-fitted against a 1:1 reference export in PIL and the derivation landed
   within 0.05deg / 0.8% of the measurement, so the same maths is trusted here.
   705:36914 is plain #FFF and is HUG at 578 wide. */
.afxc__title-a {
  display: block; width: 769px;
  background: linear-gradient(160.71deg, #F8F8F8 33.58%, #636363 93.23%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.afxc__title-b { display: block; width: 769px; }
/* The mobile frame breaks the headline one word earlier than 1512, so "where"
   exists twice in the markup and exactly one copy is ever rendered. At 1512
   nothing changes: .afxc__w is the live one, .afxc__w2 is removed. */
.afxc__w2 { display: none; }

/* 705:36915 — 548x42, 16/510, lh 21.12, ls -.48, node opacity .8 */
.afxc__sub {
  margin: 0; width: 548px; text-align: center;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -.48px;
  color: var(--af-white); opacity: .8;
}

/* ---- 705:36916 — table block, 1432x604, gap 32 -------------------------- */
.afxc__block {
  position: relative; z-index: 1;
  width: 1432px; max-width: 100%;
  display: flex; flex-direction: column; gap: 32px;
}
.afxc__scroll { width: 100%; }

/* 705:36917 — 1432x518. The 85px above the rows is the header band; the 6px
   below the last row is the ring's overhang. */
.afxc__grid { position: relative; width: 1432px; height: 518px; }

/* the one column template used by the header and every row:
   522 + 227.5 x 4 = 1432 exactly. */
.afxc__heads,
.afxc__row {
  display: grid;
  grid-template-columns: 522px 227.5px 227.5px 227.5px 227.5px;
}

/* header labels, 16/590, lh 24, ls -.48, sitting 34px down (the Atlas
   wordmark 705:37100 sits at 32 because it is 20 tall, not 24) */
.afxc__heads { height: 85px; }
.afxc__head-cell {
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 34px;
  font-family: var(--font-sans); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; letter-spacing: -.48px;
  color: var(--af-white);
}
.afxc__head-cell--logo { padding-top: 32px; }
/* 705:37100 — image ba32dbba…, STRETCH with an imageTransform and Figma image
   filters (contrast +.30, shadows +.65). Exported as a raster so the filters
   are baked; drawn at 66x20. */
.afxc__logo { display: block; width: 66px; height: 20px; }

/* rows: 6 x 72 with a -1 itemSpacing, i.e. each row after the first overlaps
   the one above by 1px. 6*72 - 5 = 427, which is the frame height. */
.afxc__rows { position: absolute; left: 0; top: 85px; width: 1432px; }
.afxc__row { height: 72px; }
.afxc__row + .afxc__row { margin-top: -1px; }

.afxc__feat,
.afxc__cell {
  box-sizing: border-box; padding: 24px; min-width: 0;
  display: flex; align-items: center;
  font-family: var(--font-sans); font-size: 16px;
  line-height: 24px; letter-spacing: -.48px;
  transition: background-color var(--t-fast) var(--e-out);
}
/* 705:36920 — row / align CENTER / gap 12 */
.afxc__feat { gap: 12px; font-weight: var(--w-semi); color: var(--af-white); }
.afxc__feat-icon { display: block; width: 20px; height: 20px; flex: none; }
.afxc__cell { justify-content: center; }
/* 705:37003 "Upgrade tier" etc — 590, solid white */
.afxc__cell--atlas { font-weight: var(--w-semi); color: var(--af-white); }
/* 705:37036 etc — 510, white at node opacity .8 */
.afxc__cell--rival { font-weight: var(--w-medium); color: var(--af-white); opacity: .8; }

/* the striped rows (Figma rows 0, 2, 4). The unstriped ones are a #FFF paint
   at opacity 0, i.e. nothing. The bar is one continuous pill: 16px on the
   outer left of the feature cell and the outer right of the last cell. */
.afxc__row--on .afxc__feat { background: var(--af-card); border-radius: 16px 0 0 16px; }
.afxc__row--on .afxc__cell { background: var(--af-card); }
.afxc__row--on .afxc__cell--atlas { background: var(--afxc-atlas-cell); }
.afxc__row--on .afxc__cell:last-child { border-radius: 0 16px 16px 0; }

/* the two 518-tall rings, drawn last in Figma so they sit over everything.
   705:37101  228x518 at x 522, 2px #378E8C, #FFF fill at 1%
   705:37102  678x518 at x 754, 2px #DB4446, #FFF fill at 1%
   DECLARED DEVIATION: both carry an INNER_SHADOW in LINEAR_DODGE (additive).
   CSS inset box-shadow only composites normally, so the glow is reproduced at
   the file's colour and .24 alpha and reads slightly cooler than Figma. */
.afxc__ring {
  position: absolute; top: 0; height: 518px;
  border-radius: var(--r-32); border: 2px solid;
  background: rgba(255,255,255,.01);
  box-sizing: border-box; pointer-events: none;
}
.afxc__ring--atlas  { left: 522px; width: 228px; border-color: var(--afxc-teal-edge); box-shadow: inset 0 0 105.8px 0 rgba(92,255,244,.24); }
.afxc__ring--rivals { left: 754px; width: 678px; border-color: var(--afxc-red-edge);  box-shadow: inset 0 0 105.8px 0 rgba(219,68,70,.24); }

/* 705:37103 — 459x54, 12/510, lh 18, node opacity .3, left aligned to the
   table's own left edge. */
.afxc__legal {
  margin: 0; width: 459px; max-width: 100%;
  font-family: var(--font-sans); font-weight: var(--w-medium);
  font-size: 12px; line-height: 18px;
  color: var(--af-white); opacity: .3;
}

/* ---- motion ------------------------------------------------------------
   One question only: "which row am I reading?" A striped row lifts its tint
   on hover; nothing moves. Guarded so a tap does not leave a row stuck on. */
@media (hover: hover) and (pointer: fine) {
  .afxc__row--on:hover .afxc__feat,
  .afxc__row--on:hover .afxc__cell { background-color: var(--af-card-2); }
  .afxc__row--on:hover .afxc__cell--atlas { background-color: #16211F; }
}

/* ---- narrower viewports -------------------------------------------------
   The table is a fixed 1432 composition, so below the design width it scrolls
   sideways rather than reflowing. The header text scales. */
/* Between mobile and the design width the table now SCALES to the viewport
   rather than scrolling. It was the only thing on the site you had to drag
   sideways to read, and a comparison you cannot see all of is not a
   comparison. The column ratios are the Figma pixels expressed as percentages
   of 1432 — 522 / 227.5 x 4 — so the composition is identical, just narrower.
   The rings stretch with it, and the rows are allowed to grow so a cell that
   wraps at 1100 pushes its row down instead of spilling into the next one. */
@media (min-width: 900px) and (max-width: 1511px) {
  .afxc__scroll { overflow-x: hidden; }
  .afxc__grid { width: 100%; height: auto; min-height: 518px; }
  .afxc__heads,
  .afxc__row { grid-template-columns: 36.4525% 15.8869% 15.8869% 15.8869% 15.8869%; }
  /* static so growing rows push the grid instead of overflowing it */
  .afxc__rows { position: static; width: 100%; }
  .afxc__heads { height: 85px; }
  .afxc__row { height: auto; min-height: 72px; }
  .afxc__feat,
  .afxc__cell { padding: 12px 16px; }
  .afxc__ring { top: 0; bottom: 0; height: auto; }
  .afxc__ring--atlas  { left: 36.4525%; width: 15.9218%; }
  .afxc__ring--rivals { left: 52.6536%; width: 47.3464%; }
}
@media (max-width: 899px) {
  .afxc__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .afxc__grid { flex: none; }
}
@media (max-width: 899px) {
  .afxc { padding: 72px 20px 80px; gap: 40px; }
  .afxc__head, .afxc__headtop, .afxc__title { width: 100%; }
  .afxc__title { font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
  .afxc__title-a, .afxc__title-b { width: 100%; }
  .afxc__sub { width: 100%; }
  .afxc__bg { display: none; }
}

/* ============================================================================
   MOBILE — Figma 705:79130 "Frame 2147259228", 393 x 1165.
   Same auto-layout as 1512, at 393: 100 top/bottom, 24 sides, 50 gap.
   The 960-wide table becomes a real horizontal rail; the RAIL scrolls, never
   the page. Desktop rules above are untouched.
   ========================================================================= */
@media (max-width: 767px) {
  .afxc { padding: 100px 24px; gap: 50px; }

  /* 705:79131 — the dot field is 1349 x 1057.3 at (-478,0) on mobile, not
     full-bleed; it is shown again (the 899px rule drops it). */
  .afxc__bg {
    display: block; left: -478px; right: auto; top: 0;
    width: 1349px; min-width: 0; height: 1057.3px;
    background: url('/assets/figma/cmp-dots.webp') no-repeat 0 0 / 100% 100%;
  }

  /* --- 705:99455 head, 345 x 288: 201 + 24 + 63 ------------------------- */
  .afxc__head, .afxc__headtop { width: 345px; max-width: 100%; }
  .afxc__headtop { gap: 12px; }
  .afxc__head { gap: 24px; }
  /* 705:99467 — three 52px lines. The mobile file breaks the headline after
     "different", the 1512 file after "where", so the word is carried in two
     spans and only one is ever rendered. MARKUP: .afxc__w / .afxc__w2 were
     added to index.html for this. Both lines are pinned nowrap — SF Pro
     Display fits them, the Roboto/Inter fallback would not. */
  .afxc__title { width: 345px; font-size: 52px; line-height: 52px; letter-spacing: -1.56px; }
  .afxc__title-a { width: 345px; white-space: nowrap; }
  .afxc__title-b { width: 297px; white-space: nowrap; }
  .afxc__l2 { display: block; }
  .afxc__w  { display: none; }
  .afxc__w2 { display: inline; }
  /* 705:99470 — 345 wide, three 21px lines (Figma rounds 21.12) */
  .afxc__sub { width: 345px; line-height: 21px; }

  /* --- 705:99472 — the table, 960 x 523 ---------------------------------- */
  .afxc__block { width: 100%; gap: 32px; }
  .afxc__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .afxc__scroll::-webkit-scrollbar { display: none; }
  .afxc__grid { width: 960px; height: 523px; }
  /* 290 + 160 + 170 x 3 = 960 */
  .afxc__heads, .afxc__row { grid-template-columns: 290px 160px 170px 170px 170px; }
  /* 705:99652-55 — labels sit 7 down, the 52x16 wordmark 11 */
  .afxc__heads { height: 48px; }
  .afxc__head-cell { padding-top: 7px; }
  .afxc__head-cell--logo { padding-top: 11px; }
  .afxc__logo { width: 52px; height: 16px; }
  /* six 80px rows on a -1 gap: 6 x 80 - 5 = 475 */
  .afxc__rows { top: 48px; width: 960px; }
  .afxc__row { height: 80px; }
  .afxc__feat, .afxc__cell { padding: 16px; }
  .afxc__feat { gap: 12px; }
  /* 705:99537 / 99570 — on mobile every tick and dash sits inside a 32px
     rounded chip (#203736 for Atlas, #FFF at 4% for the rivals) with the glyph
     scaled to 12.8 wide. Drawn as a pseudo-element on the cell so the 1512
     markup is untouched. */
  .afxc__cell { position: relative; }
  .afxc__cell::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 32px; height: 32px; margin: -16px 0 0 -16px;
    border-radius: 80px; background: rgba(255,255,255,.04);
  }
  .afxc__cell--atlas::before { background: #203736; }
  .afxc__cell img { position: relative; z-index: 1; }
  .afxc__cell img[alt="Yes"] { width: 12.8px; height: 8px; }
  .afxc__cell img[alt="No"]  { width: 12.8px; height: 1.4px; }

  /* 705:99656 — only the Atlas column is ringed on mobile, 160 x 523 at x 290 */
  .afxc__ring--atlas { left: 290px; width: 160px; height: 523px; border-color: #37928C; box-shadow: inset 0 0 106px 0 rgba(92,255,244,.24); }
  .afxc__ring--rivals { display: none; }

  /* 705:99657 — 345 wide, four 18px lines */
  .afxc__legal { width: 345px; }
}