/* ============================================================================
   Instant Zero band 4 - comparison table + the 24-hour guarantee.
   Figma 934:25073, 1512 x 2350, on #0f0f0f.

   Every number below is read out of the node JSON, not inferred from a
   screenshot. Band-relative y coordinates are quoted next to the rules that
   depend on them so the next person can re-verify without opening Figma.

     934:25113  comparison frame   rel(0,0)      1512 x 1185
                VERTICAL, gap 60, padding 40 / 40 / 120 / 40, align CENTER
     934:45584  guarantee pill+h2  rel(376.5,1225) 834 x 241
     934:25078  phone mockup       render rel(478.7,1443.7) 526.5 x 646.6
     934:25090  "24 hours" badge   rel(392.5,1661) 195 x 58
     934:25100  "$1,000 if late"   rel(939,1757)   247 x 58
     934:25083  lead + CTAs        rel(318,2045)   875 x 185
   ========================================================================= */

.afxiz-guar {
  position: relative; isolation: isolate; overflow: hidden;
  background: #0f0f0f;
}

/* ---- background art (934:25074-25077) ---------------------------------
   A centred 1512 stage so the art keeps its design-space coordinates at any
   viewport, rather than drifting right of spec on wide screens.
   __art is anchored to the section (band coordinates); __visual is anchored
   to .afxiz-guar__promise, so its offsets are band-y minus 1225.           */
.afxiz-guar__art,
.afxiz-guar__visual {
  position: absolute; left: 50%; top: 0; width: 1512px; margin-left: -756px;
  height: 100%; pointer-events: none; z-index: 0;
}

/* 934:25077 - rect rel(-335.9,856) 2235.1x1603.5, image scaleMode FILL */
.afxiz-guar__streaks {
  position: absolute; left: -335.9px; top: 856px;
  width: 2235.1px; height: 1603.5px; object-fit: cover; display: block;
}
.afxiz-guar__glow { position: absolute; display: block; border-radius: 50%; }
/* Figma LAYER_BLUR radius is ~2x the CSS blur radius that matches it. */
.afxiz-guar__glow--wide {                    /* 934:25074 #303030 blur 400  */
  left: -181px; top: 1045px; width: 1875px; height: 305px;
  background: #303030; filter: blur(200px);
}
.afxiz-guar__glow--dark {                    /* 934:25075 #000 40% blur 150.6 */
  left: 369px; top: 1433px; width: 784px; height: 669.8px;
  background: rgba(0,0,0,.4); filter: blur(75px);
}
.afxiz-guar__glow--teal {                    /* 934:25076 #00ADB5 36% blur 204.8 */
  left: 501.7px; top: 1547px; width: 548.8px; height: 137.3px;
  background: rgba(0,173,181,.36); filter: blur(102px);
}

/* ---- shared pill (Frame 2147259134) ----------------------------------
   r 57, 1px gradient stroke, gap 7, padding 6/14. Fill 9% on the comparison
   instance (934:45440), 14% on the guarantee instance (934:45585).        */
.afxiz-guar__pill {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  /* strokeAlign INSIDE: the 1px stroke lives inside the 33px box, so the
     6px/14px Figma padding becomes 5px/13px once the border is added. */
  padding: 5px 13px; border-radius: 57px; border: 1px solid transparent;
  /* 934:45440 - fill gradient 81.3deg at 9%, stroke gradient 3.8deg 1px.
     Both are near-invisible over #0f0f0f by design; an opaque glass capsule
     here is an invented element. */
  background:
    linear-gradient(81.3deg, rgba(5,63,59,.09) 0%, rgba(5,63,59,.071) 15%, rgba(255,255,255,.09) 100%) padding-box,
    linear-gradient(3.8deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%) border-box;
}
.afxiz-guar__pill--bright {
  /* 934:45585 - fill gradient 73.7deg at 14% */
  background:
    linear-gradient(73.7deg, rgba(255,255,255,.14) 0%, rgba(0,0,0,.11) 40%, rgba(0,0,0,0) 100%) padding-box,
    linear-gradient(3.8deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 55%, rgba(255,255,255,0) 100%) border-box;
}
.afxiz-guar__pill img { display: block; flex: none; }
/* 934:45449 / 934:45587 - SF Pro 510 / 14 / 21, ls -0.42 */
.afxiz-guar__pill-t {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; letter-spacing: -0.42px;
  color: var(--af-white);
}
/* character overrides: "Why " and "The 24-hour " stay full white, the rest
   drops to 60% - same weight, opacity only (934:45449 / 934:45587) */
.afxiz-guar__pill-dim { color: var(--w-60); }

/* ---- headline type ----------------------------------------------------
   934:45451/2 and 934:45589/90 are both SF Pro 510 / 96 / 96, ls -2.88.
   Line one carries a 162.23deg #F8F8F8 -> #636363 gradient, line two is
   flat #FFFFFF.                                                           */
.afxiz-guar__h1, .afxiz-guar__h2 {
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 96px; line-height: 96px; letter-spacing: -2.88px;
  color: var(--af-white); text-align: center; margin: 0;
}
.afxiz-guar__h1 > span, .afxiz-guar__h2 > span { display: block; }
.afxiz-guar__grad {
  background: linear-gradient(162.23deg, #F8F8F8 0%, #636363 100%);
  -webkit-background-clip: text; background-clip: text; 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;
}

/* ---- comparison frame 934:25113 (1512 x 1185) -------------------------
   Opaque so it occludes the background art above y1185, matching the
   Figma z-order where the comparison frame sits over image 1159.          */
.afxiz-guar__cmp {
  position: relative; z-index: 2;
  /* Rectangle 161133127 is a near-transparent gradient whose last stop lifts
     the foot of the frame to rgb(26,26,26) - measured off the Figma render at
     x=20: 15 flat to y~850, then up to 26 by y1185. Over it sits the "dots"
     frame: #7CB1AC ellipses 1.66x2.12 on a 14.9 x 19.1 pitch at an effective
     16% alpha (fill .5 x node .4 x frame .8). */
  background-color: #0f0f0f;
  background-image:
    radial-gradient(1.7px 2.1px at 1px 1px, rgba(124,177,172,.16) 99%, transparent 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 71.7%, rgba(255,255,255,.043) 100%);
  background-size: 14.9px 19.1px, 100% 100%;
  padding: 40px 40px 138px;      /* 40 top; 1047 content end + 138 = 1185 */
  display: flex; flex-direction: column; align-items: center;
}
.afxiz-guar__head { display: flex; flex-direction: column; align-items: center; }
.afxiz-guar__h1 { margin-top: 16px; }        /* pill 40+33=73 -> h1 89 */
/* 934:45453 - 16/21.12, ls -0.48, node opacity 0.8; h1 281 -> lead 313 */
.afxiz-guar__lead {
  margin: 32px 0 0; max-width: 548px; text-align: center;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -0.48px;
  color: rgba(255,255,255,.8);
}
/* 934:45583 - 12/18, ls 0, node opacity 0.3; cards end 933 -> 993 = gap 60 */
.afxiz-guar__disclaimer {
  margin: 60px 0 0; width: 459px; text-align: left;   /* 934:45583 align=LEFT */
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 12px; line-height: 18px; color: rgba(255,255,255,.3);
}

/* ---- the comparison itself (934:45455) -------------------------------
   Group rel(40,415) 1432x518. Three columns flush against each other:
     desc  522 wide, no card
     atlas 455 wide, 2px #37928C, r32, inset glow rgba(92,255,244,.24) 105.8
     other 455 wide, 2px #DB4446, r32, inset glow rgba(219,68,70,.24) 105.8
   Both cards keep all four 32px corners - they meet as two separate rounded
   cards, they are not one table with a divider.
   Columns are VERTICAL with gap -1, so rows overlap by exactly 1px.        */
.afxiz-cmp2 {
  margin-top: 60px;                 /* head ends 355 -> cards 415 */
  width: 100%; max-width: 1432px; display: flex; align-items: flex-start;
}
.afxiz-cmp2__col {
  display: flex; flex-direction: column;
  padding-bottom: 6px;              /* last row 927 -> card bottom 933 */
}
.afxiz-cmp2__col--desc  { width: 36.4525%; }   /* 522 / 1432 */
/* In Figma the card is Rectangle 161125510/11 painted OVER the column, not a
   border on it - so the rows stay a full 455 wide and the column stays 518
   tall. Reproduced with an overlay rather than a border, which would
   otherwise add 4px to both axes. */
.afxiz-cmp2__col--atlas,
.afxiz-cmp2__col--other { width: 31.7737%; position: relative; }  /* 455 / 1432 */
.afxiz-cmp2__col--atlas::after,
.afxiz-cmp2__col--other::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 32px; background: rgba(255,255,255,.01);
}
.afxiz-cmp2__col--atlas::after {
  border: 2px solid #37928C;
  box-shadow: inset 0 0 105.8px rgba(92,255,244,.24);
}
.afxiz-cmp2__col--other::after {
  border: 2px solid #DB4446;
  box-shadow: inset 0 0 105.8px rgba(219,68,70,.24);
}
/* cards top 415, rows top 500 -> an 85px header band */
.afxiz-cmp2__hd {
  height: 85px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 20px; line-height: 30px; letter-spacing: -0.6px;
  color: var(--af-white);
}
.afxiz-cmp2__logo { display: block; width: 66px; height: 20px; }

/* rows: 72 tall, padding 24, alternating rgba(255,255,255,.04) */
.afxiz-cmp2__row {
  height: 72px; box-sizing: border-box; padding: 24px;
  display: flex; align-items: center;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; letter-spacing: -0.48px;
  color: var(--af-white);
}
.afxiz-cmp2__row + .afxiz-cmp2__row { margin-top: -1px; }   /* itemSpacing -1 */
.afxiz-cmp2__row--alt { background: rgba(255,255,255,.04); }

/* desc column: icon 20, gap 12, content left-aligned */
.afxiz-cmp2__row--desc { gap: 12px; justify-content: flex-start; }
.afxiz-cmp2__ico { flex: none; display: block; }
/* character override from the " - ": the tail drops to 60% white */
.afxiz-cmp2__desc { color: rgba(255,255,255,.6); }
.afxiz-cmp2__desc b { font-weight: inherit; color: var(--af-white); }

/* value columns: glyph 40, gap 16, content centred, text a fixed width */
.afxiz-cmp2__row--atlas,
.afxiz-cmp2__row--other { gap: 16px; justify-content: center; }
.afxiz-cmp2__glyph {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.afxiz-cmp2__glyph--yes { background: #203736; }              /* 934:45483 */
.afxiz-cmp2__glyph--no  { background: rgba(255,255,255,.04); } /* 934:45532 */
.afxiz-cmp2__glyph img { display: block; }
.afxiz-cmp2__row--atlas .afxiz-cmp2__val { width: 190px; }
.afxiz-cmp2__row--other .afxiz-cmp2__val { width: 213px; }

/* ---- the 24-hour guarantee -------------------------------------------
   Starts at band y1225, i.e. 40 below the comparison frame.               */
.afxiz-guar__promise {
  position: relative; z-index: 2;
  margin-top: 40px; padding-bottom: 120px;   /* fineprint 2230 -> band 2350 */
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* 934:45584 rel(376.5,1225) 834x241 -> centre 793.5 on a 1512 band whose
   centre is 756. The 75px left margin recentres the block +37.5px to match;
   see the design note in fragments/iz-guarantee.html. */
.afxiz-guar__promise-head {
  display: flex; flex-direction: column; align-items: center; margin-left: 75px;
}
.afxiz-guar__h2 { margin-top: 16px; }        /* pill 1258 -> h2 1274 */
/* the visual stage is positioned, so in-flow text needs its own layer to
   stay above the phone art rather than behind it */
.afxiz-guar__promise-head,
.afxiz-guar__lead2,
.afxiz-guar__ctas,
.afxiz-guar__fineprint { position: relative; z-index: 1; }

/* phone render bounds rel(478.7,1443.7); 1443.7 - 1225 = 218.7 in promise space */
.afxiz-guar__phone {
  position: absolute; left: 478.7px; top: 218.7px;
  width: 526.5px; height: 646.6px; display: block;
}
/* badges: glass, r58, gap 6, padding 8/24 */
.afxiz-guar__badge {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 24px; border-radius: 58px;
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 6px 12px 17px rgba(0,0,0,.35),
              inset 3px -4px 4px rgba(124,177,172,.32),
              inset 0 0 0 1px rgba(255,255,255,.18);
}
.afxiz-guar__badge--time { left: 392.5px; top: 436px; }   /* band 1661 */
.afxiz-guar__badge--fine { left: 939px;   top: 532px; }   /* band 1757 */
.afxiz-guar__badge img { display: block; flex: none; }
/* 934:25099 / 934:25112 - SF Pro 860 / 28 / 42, ls -0.84, #FFF -> #7E9A98 */
.afxiz-guar__badge-t {
  font-family: var(--font-display); font-weight: var(--w-heavy);
  font-size: 28px; line-height: 42px; letter-spacing: -0.84px;
  background: linear-gradient(90deg, #FFFFFF 0%, #7E9A98 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}

/* 934:25085 - 16/21.12, ls -0.32; h2 ends 1466, lead starts 2045 */
/* line 1 is a 700 override (styleOverrideTable[8]); lines 2-3 are 510 at 80% */
.afxiz-guar__lead2 {
  margin: 579px 0 0; max-width: 623px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 21.12px; letter-spacing: -0.32px;
  color: rgba(255,255,255,.8);
}
.afxiz-guar__lead2 b { font-weight: var(--w-bold); color: var(--af-white); }
.afxiz-guar__ctas { display: flex; gap: 12px; margin-top: 24px; }
/* 934:25087 - #E1FFA0, 1.5px inside gradient stroke, r100, pad 18/32 */
.afxiz-guar__cta-lime, .afxiz-guar__cta-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 56px; padding: 18px 32px;
  font-family: var(--font-display); font-size: 16px; line-height: 19.09px;
  letter-spacing: -0.48px; text-decoration: none; white-space: nowrap;
}
.afxiz-guar__cta-lime {
  gap: 8px; border-radius: 100px; background: var(--af-lime);
  color: #001D21; font-weight: var(--w-semi);
  border: 1.5px solid transparent;
  background-image: linear-gradient(var(--af-lime), var(--af-lime)),
    linear-gradient(90deg, #053F3B 0%, rgba(5,63,59,.27) 51.4%, #053F3B 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
}
.afxiz-guar__chev { display: block; }
.afxiz-guar__cta-ghost {
  border-radius: 50px; border: 1px solid rgba(255,255,255,.08);
  color: var(--af-white); font-weight: var(--w-medium); height: 55px;
}
/* 934:25089 - 12/18, node opacity 0.2 */
.afxiz-guar__fineprint {
  margin: 24px 0 0; max-width: 515px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 12px; line-height: 18px; color: rgba(255,255,255,.2);
}

/* ---- below the design width -------------------------------------------
   The 1512 art stage and the fixed-width comparison stop being meaningful,
   so the columns stack and the phone returns to the flow.                 */
/* Between the design width and the stacking breakpoint the table stays a
   three-column grid but goes fluid. It used to be hard-pinned to 1432px with
   nothing until 1180, so at e.g. 1280 the left column's icons were pushed off
   the canvas and clipped by the section's overflow - silently, with no
   horizontal scrollbar to show it. */
@media (max-width: 1511px) {
  .afxiz-guar__cmp { padding-bottom: 100px; }
  .afxiz-cmp2__row { height: auto; min-height: 72px; }
  .afxiz-cmp2__row--atlas .afxiz-cmp2__val,
  .afxiz-cmp2__row--other .afxiz-cmp2__val { width: auto; }
  .afxiz-guar__disclaimer { width: auto; max-width: 459px; }
}
@media (max-width: 1180px) {
  .afxiz-guar__h1, .afxiz-guar__h2 { font-size: 52px; line-height: 56px; letter-spacing: -1.56px; }
  .afxiz-cmp2 { width: 100%; flex-direction: column; align-items: stretch; }
  .afxiz-cmp2__col--desc { width: 100%; }
  .afxiz-cmp2__col--atlas, .afxiz-cmp2__col--other { width: 100%; margin-top: 16px; }
  .afxiz-cmp2__row--atlas, .afxiz-cmp2__row--other { justify-content: flex-start; }
  .afxiz-cmp2__row--atlas .afxiz-cmp2__val,
  .afxiz-cmp2__row--other .afxiz-cmp2__val { width: auto; }
  .afxiz-guar__visual { position: static; width: auto; margin: 0; height: auto; }
  .afxiz-guar__phone { position: static; margin: 40px auto 0; width: min(100%, 526.5px); height: auto; }
  .afxiz-guar__badge { position: static; display: inline-flex; margin: 12px 6px 0; }
  .afxiz-guar__badge-t { font-size: 20px; line-height: 30px; }
  .afxiz-guar__lead2 { margin-top: 40px; }
  .afxiz-guar__promise-head { margin-left: 0; }
  .afxiz-guar__art { display: none; }
}
@media (max-width: 640px) {
  .afxiz-guar__h1, .afxiz-guar__h2 { font-size: 36px; line-height: 40px; letter-spacing: -1.08px; }
  .afxiz-guar__ctas { flex-direction: column; width: 100%; }
}


/* ---- motion -------------------------------------------------------------
   Parity with the home page (atlas-hero.css / atlas-final.css / atlas-compare.css):
   a 90ms press on everything clickable, hover confined to real pointers, a 2px
   chevron nudge, a focus ring, and a row highlight that answers "which line am
   I reading?" across all three columns. Transform, colour and shadow only -
   nothing here touches layout, so the static geometry QA still holds.

   The lime CTA has no shadow in Figma (934:25087 carries no effects), so its
   resting shadow is transparent rather than absent - that keeps the static
   render identical while still giving the hover something to interpolate. */
.afxiz-guar__cta-lime, .afxiz-guar__cta-ghost {
  transition: transform var(--t-instant) var(--e-out),
              background-color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}
.afxiz-guar__cta-lime { box-shadow: 2px 14px 24px 0 rgba(38,63,66,0); }
.afxiz-guar__chev { transition: transform var(--t-fast) var(--e-out); }
.afxiz-cmp2__row { transition: background-color var(--t-fast) var(--e-out); }

@media (hover: hover) and (pointer: fine) {
  .afxiz-guar__cta-lime:hover { box-shadow: 2px 18px 30px 0 rgba(38,63,66,.18); }
  .afxiz-guar__cta-lime:hover .afxiz-guar__chev { transform: translateX(2px); }
  .afxiz-guar__cta-ghost:hover { background-color: var(--w-06); }

  /* the three columns are separate stacks, so the row is matched by index */
  .afxiz-cmp2:has(.afxiz-cmp2__col > :nth-child(2):hover) .afxiz-cmp2__col > :nth-child(2),
  .afxiz-cmp2:has(.afxiz-cmp2__col > :nth-child(3):hover) .afxiz-cmp2__col > :nth-child(3),
  .afxiz-cmp2:has(.afxiz-cmp2__col > :nth-child(4):hover) .afxiz-cmp2__col > :nth-child(4),
  .afxiz-cmp2:has(.afxiz-cmp2__col > :nth-child(5):hover) .afxiz-cmp2__col > :nth-child(5),
  .afxiz-cmp2:has(.afxiz-cmp2__col > :nth-child(6):hover) .afxiz-cmp2__col > :nth-child(6),
  .afxiz-cmp2:has(.afxiz-cmp2__col > :nth-child(7):hover) .afxiz-cmp2__col > :nth-child(7)
  { background-color: rgba(255,255,255,.07); }
}

.afxiz-guar__cta-lime:active,
.afxiz-guar__cta-ghost:active { transform: scale(.97); }

.afxiz-guar a:focus-visible {
  outline: 2px solid var(--af-lime); outline-offset: 4px; border-radius: var(--r-pill);
}