/* ===========================================================================
   /verify — Figma 3179:293142 (desktop 3179:293143, mobile 3179:355094).
   Needs atlas-tokens.css. Band 2 reuses atlas-steps.css; the footer brings
   atlas-footer.css.
   ========================================================================= */

/* Own this. atlas-promo.css scopes its copy to .afxpz, so borrowing it left
   the certificate-ID label rendering visibly next to the input. */
.vfy-hero .afx-vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.vfy-hero, .vfy-trust, .vfy-photo, .vfy-feed, .vfy-close {
  position: relative; overflow-x: clip; overflow-y: visible; isolation: isolate;
}

/* shared ----------------------------------------------------------------- */
.vfy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; padding: 18px 32px; box-sizing: border-box; border-radius: 100px;
  text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 19px; letter-spacing: -.48px;
  transition: transform var(--t-instant) var(--e-out), box-shadow var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out);
}
/* ink set explicitly: these sit on dark AND light bands, and a white link
   colour inherited from the page made a lime pill unreadable once already */
.vfy-btn--lime  { background: #E1FFA0; color: #001D21; box-shadow: 2px 14px 24px rgba(38,63,66,.12); }
.vfy-btn--ghost { background: rgba(255,255,255,.10); color: #FFFFFF; font-weight: var(--w-medium);
                  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.vfy-btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .vfy-btn--lime:hover { box-shadow: 2px 18px 30px rgba(38,63,66,.18); }
  .vfy-btn--ghost:hover { background: rgba(255,255,255,.16); }
}
.vfy-chev {
  width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("/assets/figma/steps-chevron.svg") center / contain no-repeat;
          mask: url("/assets/figma/steps-chevron.svg") center / contain no-repeat;
  transition: transform var(--t-fast) var(--e-out);
}
@media (hover: hover) and (pointer: fine) { .vfy-btn:hover .vfy-chev { transform: translateX(3px); } }

.vfy-eyebrow { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
               font-size: 14px; line-height: 21px; color: rgba(13,13,13,.72); }
.vfy-eyebrow--light { color: rgba(255,255,255,.72); }
.vfy-fade {
  background: linear-gradient(90deg, #3F4547 0%, #CECECE 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  /* ink guard: background-clip:text leaves descenders unpainted */
  padding-bottom: .16em; margin-bottom: -.16em;
}

/* --- BAND 1, hero — 3179:293477 ----------------------------------------- */
/* Padding places the NAVBAR (spliced in as a flow child); the grid carries the
   offset down to the copy. Putting the 189px on the section pushed the nav a
   third of the way down the page on /contact. */
.vfy-hero { min-height: 890px; padding: 10px 10px 40px; background: #0B2A27; }
.vfy-hero__bg { position: absolute; inset: 0; z-index: -3;
                background: url("/assets/verify/vf-hero-bg.webp") center / cover no-repeat; }
/* 3179:293478 — the blurred ellipse. It is not decoration: it is what makes
   110px white type legible over a pale photograph. */
.vfy-hero__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(80% 74% at 4% 70%, rgba(5,31,29,.90) 0%, rgba(5,31,29,.74) 24%,
              rgba(5,31,29,.44) 46%, rgba(5,31,29,.16) 68%, rgba(5,31,29,0) 86%);
}
.vfy-hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(5,31,29,.34) 0%, rgba(5,31,29,.12) 26%, rgba(5,31,29,0) 48%),
              linear-gradient(180deg, rgba(5,63,59,.62) 0%, rgba(194,213,213,0) 21%,
                              rgba(194,213,213,0) 83%, rgba(5,63,59,.40) 100%);
}
.vfy-hero__grid {
  /* The RESULT-STATE frame 3179:354941 is the functional arrangement - it is
     the only one with the lookup input - so the layout follows it: copy left
     (1054 in the file), result card and certificate stacked right (420 at
     x1046). The desktop frame puts the card under the headline instead and has
     no input at all, which cannot be the shipped behaviour on a page whose job
     is looking an ID up. */
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) 420px;
  align-items: start; gap: 24px; max-width: 1432px; margin: 120px auto 0;
  padding: 0 30px; box-sizing: border-box;
}
.vfy-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.vfy-hero__eyebrow { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
                     font-size: 14px; line-height: 21px; color: #FFFFFF;
                     text-shadow: 0 1px 14px rgba(5,31,29,.75); }
/* SF Pro is not servable, so off Apple this falls back to a wider face and the
   Figma's own column width under-measures. Lines are nowrap so they can only
   break where the design breaks them. */
.vfy-hero__h1 span { display: block; white-space: nowrap; }
.vfy-hero__h1 {
  margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 110px; line-height: 99px; letter-spacing: -3.3px;
  background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding-bottom: .06em; margin-bottom: -.06em;
}
.vfy-hero__lede { margin: 0; max-width: 588px;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 18px; line-height: 27px; letter-spacing: -.36px; color: rgba(255,255,255,.8); }

/* 3179:293501 — 368x57, r50, white 8% */
.vfy-lookup {
  display: flex; align-items: center; gap: 8px; width: 368px; max-width: 100%;
  height: 57px; padding: 4px 4px 4px 20px; box-sizing: border-box; border-radius: 50px;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.vfy-lookup__input {
  flex: 1; min-width: 0; border: 0; background: none; color: #FFFFFF;
  font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; letter-spacing: -.32px;
}
.vfy-lookup__input::placeholder { color: rgba(255,255,255,.56); }
.vfy-lookup__input:focus { outline: none; }
.vfy-lookup:focus-within { box-shadow: inset 0 0 0 2px #E1FFA0; }
.vfy-lookup__btn {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 49px; padding: 0 22px; border: 0; border-radius: 50px; cursor: pointer;
  background: #E1FFA0; color: #001D21;
  font-family: var(--font-display); font-weight: var(--w-semi); font-size: 16px; letter-spacing: -.48px;
}
.vfy-lookup__msg { margin: 0; min-height: 21px; font-family: var(--font-display);
                   font-size: 14px; line-height: 21px; color: rgba(255,255,255,.72); }

.vfy-hero__side { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
/* 3179:293526 — 640x253, r32, rgba(52,72,71,.6) */
.vfy-res {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; box-sizing: border-box; border-radius: 32px;
  background: rgba(52,72,71,.60);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
}
.vfy-res__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px; margin: 0; }
.vfy-res__title { display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 24px; line-height: 24px; letter-spacing: -.48px; color: #FFFFFF; }
.vfy-res__tick { width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: #7CB1AC url("/assets/contact/cap-tick.svg") center / contain no-repeat; }
.vfy-res__id {
  margin: 0; padding: 4px 12px; border-radius: 57px; white-space: nowrap;
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(124,177,172,.8) 60%, #7CB1AC 100%);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: #0D2725;
}
.vfy-res__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.vfy-res__cell {
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  min-height: 56px; padding: 8px 12px; box-sizing: border-box; border-radius: 16px;
  background: rgba(255,255,255,.06);
}
.vfy-res__k { font-family: var(--font-display); font-weight: var(--w-medium);
              font-size: 14px; line-height: 21px; color: rgba(255,255,255,.66); }
.vfy-res__v { font-family: var(--font-display); font-weight: var(--w-medium);
              font-size: 18px; line-height: 24px; color: #FFFFFF; }
.vfy-res__cell:nth-child(4) .vfy-res__v { font-weight: var(--w-bold); color: #CFF3A6; }
.vfy-hero__cert { width: 100%; height: auto; border-radius: 24px; display: block; }

/* --- BAND 2 lede (the rest is atlas-steps.css) --------------------------- */
.vfy-steps__lede { margin: 0; max-width: 640px; text-align: center;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; color: rgba(13,13,13,.72); }
.afxs--vfy .afxs-cta { margin: 40px auto 0; }

/* --- BAND 3, trust — 3179:293707 ---------------------------------------- */
.vfy-trust { padding: 120px 40px; background: #0D0D0D; }
.vfy-trust__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(56% 50% at 78% 46%, rgba(57,107,106,.30) 0%, rgba(57,107,106,0) 72%); }
.vfy-trust__grid { display: grid; grid-template-columns: minmax(0,1fr) 451px; gap: 64px;
                   align-items: center; max-width: 1432px; margin: 0 auto; }
.vfy-trust__copy { display: flex; flex-direction: column; gap: 24px; }
.vfy-trust .vfy-eyebrow { color: rgba(255,255,255,.72); }
.vfy-trust__h2 span { display: block; }
.vfy-trust__h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px; color: #FFFFFF; }
.vfy-trust__lede { margin: 0; max-width: 640px; font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 16px; line-height: 24px; color: rgba(255,255,255,.72); }
.vfy-claims { display: flex; flex-direction: column; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.vfy-claims li { display: flex; gap: 12px; font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 16px; line-height: 24px; color: rgba(255,255,255,.86); }
.vfy-claims li::before { content: ''; width: 20px; height: 20px; flex: none; margin-top: 2px;
  background: #7CB1AC url("/assets/contact/cap-tick.svg") center / contain no-repeat; border-radius: 50%; }

/* 3179:334412 — 451x630, r32, #1F1F1F -> #151515 */
.vfy-cert {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 12px; box-sizing: border-box; border-radius: 32px; overflow: hidden;
  background: linear-gradient(180deg, #1F1F1F 0%, #151515 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.vfy-cert__art { height: 210px; border-radius: 24px;
  background: url("/assets/verify/vf-trust-art.webp") center / cover no-repeat; }
.vfy-cert__title { display: flex; align-items: center; gap: 8px; margin: 12px 0 0;
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 24px; line-height: 24px; color: #FFFFFF; }
.vfy-cert__id { margin: 0; align-self: flex-start; padding: 4px 12px; border-radius: 57px;
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(124,177,172,.8) 60%, #7CB1AC 100%);
  font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 16px; line-height: 24px; color: #0D2725; }
.vfy-cert__amt { margin: 0; padding: 16px; border-radius: 24px; text-align: center;
  background: linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(124,177,172,.18) 100%);
  font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px; color: #FFFFFF; }
.vfy-cert__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.vfy-cert__cell { display: flex; flex-direction: column; gap: 4px; min-height: 88px;
  justify-content: center; padding: 12px 16px; box-sizing: border-box; border-radius: 16px;
  background: rgba(255,255,255,.05); }
.vfy-cert__k { font-family: var(--font-display); font-weight: var(--w-regular);
               font-size: 14px; line-height: 21px; color: rgba(255,255,255,.6); }
.vfy-cert__v { font-family: var(--font-display); font-weight: var(--w-medium);
               font-size: 20px; line-height: 26px; color: #FFFFFF; }

/* --- BAND 4, photo — 3179:334497 ---------------------------------------- */
.vfy-photo { min-height: 800px; display: flex; align-items: center; padding: 0 40px; background: #060B0B; }
.vfy-photo__art { position: absolute; inset: 0; z-index: -1;
  background: url("/assets/verify/vf-photo.webp") center / cover no-repeat; }
.vfy-photo__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
                    max-width: 1432px; margin: 0 auto; width: 100%; }
.vfy-photo__h2 span { display: block; }
.vfy-photo__h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 64px; line-height: 64px; letter-spacing: -1.92px; color: #FFFFFF; }

/* --- BAND 5, live feed — 3179:334520 ------------------------------------ */
.vfy-feed { padding: 120px 40px; background: linear-gradient(180deg, #FFFFFF 0%, #EEF1F3 100%); text-align: center; }
.vfy-feed__coin { position: absolute; width: 215px; height: 208px; z-index: -1; pointer-events: none;
  background: url("/assets/figma/image-1172-e02b31.webp") center / contain no-repeat; }
.vfy-feed__coin--a { left: 40px;  top: 448px; }
.vfy-feed__coin--b { left: 96px;  top: 821px; width: 216px; height: 228px; }
.vfy-feed__coin--c { right: 60px; top: 389px; width: 201px; height: 229px; }
.vfy-feed__head { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 40px; }
.vfy-feed__h2 span { display: block; }
.vfy-feed__h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 96px; line-height: 96px; letter-spacing: -2.88px; color: #0D0D0D; }
.vfy-feed__lede { margin: 0; max-width: 620px; font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 16px; line-height: 24px; color: rgba(13,13,13,.72); }

.vfy-table { width: 100%; max-width: 800px; margin: 0 auto; text-align: left; }
.vfy-table__head { display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 4px 16px; box-sizing: border-box; border-radius: 16px;
  background: rgba(118,151,148,.10); margin-bottom: 0; }
.vfy-table__live, .vfy-table__count { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: var(--w-semi); font-size: 16px;
  line-height: 24px; color: #3F4547; }
.vfy-table__dot { width: 8px; height: 8px; border-radius: 50%; background: #34938C;
                  box-shadow: 0 0 0 4px rgba(52,147,140,.18); }
.vfy-table__rows { margin: 0; padding: 0; list-style: none; }
/* 800x56 rows, r16, zebra #FBFBFB / #FFFFFF straight off the file */
.vfy-row { display: grid; grid-template-columns: 180px 1fr auto 110px; align-items: center;
  gap: 12px; min-height: 56px; padding: 16px; box-sizing: border-box; border-radius: 16px;
  background: #FFFFFF; }
.vfy-row:nth-child(odd) { background: #FBFBFB; }
.vfy-row__who { display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: var(--w-semi); font-size: 16px;
  line-height: 24px; color: #3F4547; }
.vfy-row__flag { width: 20px; height: 20px; flex: none; border-radius: 50%;
                 background: rgba(63,69,71,.12) center / cover no-repeat; }
.vfy-row__id { font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; color: #3F4547; }
.vfy-row__amt { font-family: var(--font-display); font-weight: var(--w-bold);
  font-size: 16px; line-height: 24px; color: #34938C; white-space: nowrap; }
.vfy-row__ago { font-family: var(--font-display); font-weight: var(--w-semi);
  font-size: 16px; line-height: 24px; color: rgba(63,69,71,.6); text-align: right; }

/* --- BAND 6, closer — 3179:354894 --------------------------------------- */
.vfy-close { padding: 120px 40px; background: #0D0D0D; text-align: center; }
.vfy-close__art { position: absolute; inset: 0; z-index: -1;
  background: url("/assets/verify/vf-close-art.webp") center top / cover no-repeat; opacity: .9; }
.vfy-close__inner { display: flex; flex-direction: column; align-items: center; gap: 24px;
                    max-width: 900px; margin: 0 auto; }
.vfy-close__h2 span { display: block; }
.vfy-close__h2 { margin: 0; font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px; color: #FFFFFF; }
.vfy-close__lede { margin: 0; max-width: 660px; font-family: var(--font-display);
  font-weight: var(--w-medium); font-size: 16px; line-height: 24px; color: rgba(255,255,255,.72); }
.vfy-close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.vfy-close__notes { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;
  margin: 24px 0 0; padding: 0; list-style: none; }
.vfy-close__notes li { font-family: var(--font-display); font-weight: var(--w-medium);
  font-size: 14px; line-height: 21px; color: rgba(255,255,255,.56); }

/* --- responsive (mobile frame 3179:355094, 393 wide) --------------------- */
@media (max-width: 1280px) {
  .vfy-hero__h1 { font-size: 84px; line-height: 80px; letter-spacing: -2.5px; }
  /* minmax(0,1fr), NOT 1fr. A bare 1fr is minmax(auto,1fr) and the auto floor
     is the widest item's min-content - the 368px fixed lookup pill - so the
     single column resolved 380 wide inside a 369 container and the whole copy
     block hung off the right edge. */
  .vfy-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .vfy-trust__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .vfy-trust__h2, .vfy-photo__h2 { font-size: 48px; line-height: 50px; letter-spacing: -1.44px; }
  .vfy-feed__h2 { font-size: 68px; line-height: 70px; letter-spacing: -2px; }
  .vfy-close__h2 { font-size: 60px; line-height: 62px; letter-spacing: -1.8px; }
  .vfy-feed__coin { display: none; }
}
@media (max-width: 900px) {
  .vfy-hero { padding: 10px 12px 32px; min-height: 0; }
  .vfy-hero__grid { margin-top: 90px; padding: 0 12px; gap: 32px; }
  .vfy-hero__h1 { font-size: 54px; line-height: 56px; letter-spacing: -1.62px; }
  .vfy-trust, .vfy-feed, .vfy-close { padding-left: 24px; padding-right: 24px; }
  .vfy-trust, .vfy-close { padding-top: 80px; padding-bottom: 80px; }
  .vfy-feed { padding-top: 80px; padding-bottom: 80px; }
  .vfy-photo { min-height: 560px; padding: 0 24px; }
  .vfy-trust__h2, .vfy-photo__h2 { font-size: 38px; line-height: 42px; letter-spacing: -1.14px; }
  .vfy-feed__h2 { font-size: 46px; line-height: 48px; letter-spacing: -1.38px; }
  .vfy-close__h2 { font-size: 40px; line-height: 44px; letter-spacing: -1.2px; }
  .vfy-cert__amt { font-size: 44px; line-height: 46px; }
  /* the four-column row cannot hold 393px; ID and time drop under the name */
  .vfy-row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 16px; }
  /* the pill is 368 fixed at the design width; below the two-column hero it
     must be free to shrink */
  .vfy-lookup { width: 100%; }
  .vfy-row__id  { grid-column: 1; font-size: 14px; color: rgba(63,69,71,.7); }
  .vfy-row__amt { grid-column: 2; grid-row: 1; }
  .vfy-row__ago { grid-column: 2; grid-row: 2; font-size: 14px; }
}
@media (max-width: 560px) {
  .vfy-hero__h1 { font-size: 38px; line-height: 42px; letter-spacing: -1.14px; }
  .vfy-close__h2, .vfy-feed__h2 { font-size: 32px; line-height: 36px; letter-spacing: -.96px; }
  .vfy-res__grid, .vfy-cert__grid { grid-template-columns: 1fr; }
  .vfy-btn, .vfy-lookup { width: 100%; }
  .vfy-close__actions { flex-direction: column; align-items: stretch; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .vfy-btn, .vfy-chev { transition: none; } }