@font-face { font-family:Inter; src:url('/portal/joinai-why-choose/assets/fonts/inter-400-da03732a27e16543f09d6a6a62b0cdd4.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:Inter; src:url('/portal/joinai-why-choose/assets/fonts/inter-500-51205681a1ba304816fc629e8989256b.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:Inter; src:url('/portal/joinai-why-choose/assets/fonts/inter-600-2ede57db1a3a5f41f40467e7a43a1dd4.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:Inter; src:url('/portal/joinai-why-choose/assets/fonts/inter-700-8ca0a51552960933d0fd52c19175cbe9.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:Inter; src:url('/portal/joinai-why-choose/assets/fonts/inter-800-900ae45e40b83b7de8fb7341b3302041.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

:root {
  --orange:#ff4518;
  --ink:#080b19;
  --body:#7f8da4;
  --canvas:#f7f8f9;
  color:var(--ink);
  background:var(--canvas);
  font-synthesis:none;
}

* { box-sizing:border-box; }
html { min-width:320px; background:var(--canvas); }
button { font:inherit; }

.page-shell {
  width:100%;
  min-height:100vh;
  overflow:hidden;
  container-name:page;
  container-type:inline-size;
}

.why-joinai { width:calc(100% - 176px); max-width:1496px; margin:0 auto; padding:41px 0 20px; }
.section-heading { text-align:center; }
.section-heading h1 { margin:0; font-size:53px; line-height:1.08; letter-spacing:-2.55px; font-weight:800; }
.section-heading h1 span { color:var(--orange); }
.section-heading>p { margin:9px 0 0; color:#7d8ba2; font-size:20px; line-height:1.5; letter-spacing:-.44px; }

.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:34px; }
.feature-card { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; background:rgba(255,255,255,.92); border:1px solid rgba(224,228,234,.34); border-radius:22px; box-shadow:0 16px 46px rgba(30,45,70,.035); }
.feature-card.tall { height:393px; padding:27px 33px 23px; }
.feature-card.short { height:344px; padding:23px 33px 22px; }
.feature-art { position:relative; width:100%; }
.tall .feature-art { height:auto; aspect-ratio:674/229; }
.short .feature-art { height:auto; aspect-ratio:674/183; }
.source-art { position:absolute; left:0; display:block; width:100%; max-width:none; height:auto; }
.source-simple { top:-4px; }
.source-transfers { top:-9px; }
.source-rates { top:-7px; }
.source-security { top:-12px; }

/* The motion layers reuse the exact source artwork. Their clipped regions add
   restrained light movement without changing the composition or introducing
   replacement shapes. */
.motion-art {
  position:absolute;
  left:0;
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  opacity:0;
  pointer-events:none;
  transform-origin:center;
  will-change:opacity,transform,filter;
}
.motion-transfers-map {
  top:-9px;
  clip-path:inset(3% 5% 5% 26%);
  mix-blend-mode:multiply;
}
.motion-transfers-plane {
  top:-9px;
  clip-path:inset(18% 38% 19% 38%);
  mix-blend-mode:multiply;
}
.motion-transfers-signal {
  top:-9px;
  clip-path:inset(20% 76% 9% 24%);
  mix-blend-mode:screen;
}
.motion-security {
  top:-12px;
  clip-path:inset(4% 37% 4% 37%);
  mix-blend-mode:multiply;
}
.feature-card.is-in-view .motion-transfers-map {
  animation:transfer-map-breathe 6.4s ease-in-out 300ms infinite;
}
.feature-card.is-in-view .motion-transfers-plane {
  animation:transfer-plane-pulse 5.2s ease-in-out 650ms infinite;
}
.feature-card.is-in-view .motion-transfers-signal {
  animation:transfer-signal-pass 6.2s ease-in-out 950ms infinite;
}
.feature-card.is-in-view .motion-security {
  animation:security-shield-pulse 6s ease-in-out 450ms infinite;
}

@keyframes transfer-map-breathe {
  0%, 100% { opacity:0; transform:scale(1); filter:saturate(1); }
  28% { opacity:.10; transform:scale(1.004); filter:saturate(1.02); }
  49% { opacity:.22; transform:scale(1.009); filter:saturate(1.06); }
  68% { opacity:.08; transform:scale(1.004); filter:saturate(1.02); }
}
@keyframes transfer-plane-pulse {
  0%, 100% { opacity:0; transform:scale(1); filter:brightness(1); }
  35% { opacity:.15; transform:scale(1.008); filter:brightness(1.03); }
  55% { opacity:.38; transform:scale(1.022); filter:brightness(1.08); }
  73% { opacity:.06; transform:scale(1.004); filter:brightness(1.01); }
}
@keyframes transfer-signal-pass {
  0%, 13% { opacity:0; clip-path:inset(20% 76% 9% 24%); }
  24% { opacity:.18; clip-path:inset(20% 76% 9% 24%); }
  57% { opacity:.30; clip-path:inset(20% 7% 9% 24%); }
  72%, 100% { opacity:0; clip-path:inset(20% 7% 9% 24%); }
}
@keyframes security-shield-pulse {
  0%, 100% { opacity:0; transform:scale(1); filter:brightness(1) saturate(1); }
  30% { opacity:.12; transform:scale(1.006); filter:brightness(1.02) saturate(1.03); }
  53% { opacity:.32; transform:scale(1.018); filter:brightness(1.06) saturate(1.08); }
  73% { opacity:.07; transform:scale(1.006); filter:brightness(1.01) saturate(1.02); }
}

.feature-copy { display:flex; flex:1; min-height:0; flex-direction:column; align-items:flex-start; }
.feature-copy h3 { margin:4px 0 5px; font-size:27px; line-height:1.18; letter-spacing:-1.15px; font-weight:700; }
.feature-copy>p { width:96%; max-width:600px; margin:0; color:var(--body); font-size:18px; line-height:1.35; letter-spacing:-.32px; }
.card-rates .feature-copy>p { max-width:560px; }
.card-transfers .feature-copy>p { max-width:570px; }
.card-security .feature-copy>p { max-width:610px; }
.card-rates .feature-copy h3,.card-security .feature-copy h3 { margin-top:3px; }

.learn-more { display:inline-flex; align-items:center; gap:12px; min-height:28px; margin:8px 0 0; padding:0; border:0; color:var(--orange); background:transparent; font-size:16px; line-height:1; font-weight:600; cursor:pointer; text-decoration:none; }
.learn-more img { width:17px; height:17px; object-fit:contain; transition:transform 180ms ease; }
.learn-more:hover img { transform:translateX(4px); }
.learn-more:focus-visible { outline:2px solid var(--orange); outline-offset:4px; border-radius:3px; }
.card-rates .learn-more,.card-security .learn-more { margin-top:auto; }

.notice { position:fixed; right:24px; bottom:24px; z-index:20; padding:12px 18px; border-radius:12px; color:#fff; background:#101525; box-shadow:0 16px 40px rgba(0,0,0,.18); opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity 180ms ease,transform 180ms ease; font-size:14px; }
.notice.visible { opacity:1; transform:translateY(0); }

@container page (max-width:1200px) {
  .why-joinai { width:calc(100% - 64px); }
}

@container page (max-width:900px) {
  .why-joinai { width:min(calc(100% - 40px),742px); padding-top:32px; }
  .feature-grid { grid-template-columns:1fr; }
  .section-heading h1 { font-size:clamp(39px,8vw,53px); }
  .section-heading>p { max-width:620px; margin-inline:auto; font-size:18px; }
}

@container page (max-width:650px) {
  .why-joinai { width:calc(100% - 24px); padding-top:28px; }
  .section-heading h1 { letter-spacing:-1.8px; }
  .section-heading>p { font-size:16px; line-height:1.45; }
  .feature-grid { margin-top:26px; }
  .feature-card.tall,.feature-card.short { height:auto; min-height:0; padding:22px 20px 24px; }
  .source-art { top:0; }
  .source-transfers,.source-security { top:-4px; }
  .motion-transfers-map,.motion-transfers-signal,.motion-transfers-plane,.motion-security { top:-4px; }
  .feature-copy h3 { font-size:25px; }
  .feature-copy>p { width:100%; font-size:16px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
  .motion-art { opacity:0 !important; animation:none !important; }
}