/* Mobile EZL app integration announcement. Scoped to this page. */
.eau-page { --eau-yellow: #fff6d5; --eau-blue: #b1d5ff; color: #111; padding: 190px 0 120px; font-size: 16px; line-height: 1.5; word-break: keep-all; }
.eau-page *, .eau-page *::before, .eau-page *::after { box-sizing: border-box; }
.eau-page [hidden] { display: none !important; }
.eau-page :focus-visible { outline: 3px solid #1a6eff; outline-offset: 5px; }
.eau-highlight { color: inherit; background: linear-gradient(transparent 58%, #ffdb4f 58%, #ffdb4f 94%, transparent 94%); }
.eau-intro-highlight { background: linear-gradient(transparent calc(100% - 20px), #ffdb4f 0); }
.eau-mobile-br, .eau-mobile-title, .eau-mobile-actions { display: none; }
.eau-news-header { text-align: center; margin: 0 20px 90px; }
.eau-category { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 18px; line-height: 25px; }
.eau-news-title { font-size: 32px; line-height: 1.5; font-weight: 600; margin-top: 20px; }
.eau-news-date { display: block; color: #4d4d4d; font-size: 18px; line-height: 25px; margin-top: 48px; }
.eau-content { width: 828px; max-width: 100%; margin: 0 auto; }
.eau-yellow { background: var(--eau-yellow); }
.eau-gray { background: #f9f9f9; }
.eau-hero { height: 369px; position: relative; overflow: hidden; background: linear-gradient(145deg, #ffeca4 30.474%, #ffd531 88.214%); }
.eau-hero-logo { position: absolute; left: 40px; top: 40px; }
.eau-hero-copy { position: absolute; left: 40px; top: 122px; z-index: 1; }
.eau-hero-title { font-size: 36px; font-weight: 700; line-height: 1.3; letter-spacing: -1px; }
.eau-hero-pill { display: inline-block; margin-top: 12px !important; border: 1px solid #fff; border-radius: 100px; padding: 6px 22px; background: #fff8c5; color: #272525; font-size: 20px; font-weight: 600; line-height: 1.3; }
.eau-hero-note { position: absolute; left: 40px; top: 300px; font-size: 14px; color: #4d4d4d; z-index: 1; }
.eau-hero-app { position: absolute; left: 553px; top: 134px; }
.eau-spotlight { position: absolute; width: 366px; height: 614px; left: 450px; top: -215px; }
/* The source-image alpha preserves the spotlight behind the color-adjusted export. */
.eau-podium { position: absolute; left: 473px; top: 213px; width: 320px; height: 156px; -webkit-mask: url('../images/ezl-app-update/podium-mask.png') left top / 320px 320px no-repeat; mask: url('../images/ezl-app-update/podium-mask.png') left top / 320px 320px no-repeat; }
.eau-sparkle { position: absolute; left: 772px; top: 108px; width: 34px; height: 34px; }
.eau-sparkle-small { position: absolute; left: 768px; top: 71px; width: 18px; height: 18px; }
.eau-sparkle-left { position: absolute; left: 456px; top: 252px; }
.eau-sparkle-left-small { position: absolute; left: 481px; top: 279px; }
.eau-sparkles-mobile { display: none !important; }
.eau-heading { text-align: center; }
.eau-section-icon { margin: 0 auto 8px; }
.eau-section-title { font-size: 32px; font-weight: 600; line-height: 1.5; }
.eau-intro { padding: 64px 28px; }
.eau-intro-description { text-align: center; font-size: 20px; line-height: 1.4; margin-top: 8px !important; }
.eau-compare { display: flex; justify-content: center; gap: 16px; position: relative; margin-top: 64px; }
.eau-compare-label { display: inline-block; border-radius: 100px; padding: 5px 12px; font-size: 18px; color: white; background: #272525; margin-bottom: 8px; }
.eau-compare-label.eau-after { color: #111; background: #ffcb00; }
.eau-compare-card { width: 300px; height: 300px; background: white; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.eau-app { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.eau-app-animation { position: absolute; top: -47px; left: -50px; width: 133px; height: 132px; transform: rotate(90deg); pointer-events: none; }
.eau-app-name { padding: 2px 4px; border-radius: 4px; background: #f5f6fa; font-size: 14px; font-weight: 500; line-height: 1.4; }
.eau-app-badge { position: absolute; left: 55px; top: -17px; padding: 6px 12px; border-radius: 8px; background: #595959; color: #fff; font-size: 14px; line-height: 1.4; }
.eau-new-app .eau-app { gap: 8px; }
.eau-new-app .eau-app-name { height: 20px; padding: 0 4px; line-height: 20px; }
.eau-new-app .eau-app-badge { background: #ed7c8a; left: 84px; top: -13px; }
.eau-merge-arrow { position: absolute; left: 50%; top: 147px; transform: translateX(-50%); z-index: 1; }
.eau-usage { padding: 64px 32px; }
.eau-usage .eau-tabs { margin-top: 56px; }
.eau-tab-list { display: flex; justify-content: center; gap: 12px; margin-bottom: 32px; }
.eau-tab-list [role=tab] { padding: 12px 24px; border-radius: 999px; background: white; color: #4d4d4d; font-size: 18px; font-weight: 500; line-height: 25px; white-space: nowrap; }
.eau-tab-list [aria-selected=true] { background: #ffd637; color: #111; }
.eau-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 60px; min-height: 320px; border-radius: 24px; background: #fff; }
.eau-card + .eau-card { margin-top: 24px; }
.eau-card-copy { align-self: stretch; padding-top: 24px; }
.eau-label { display: inline-block; border-radius: 8px; padding: 4px 12px; background: var(--eau-blue); font-size: 18px; font-weight: 600; line-height: 25px; }
.eau-card-title { font-size: 24px; line-height: 1.4; font-weight: 600; margin-top: 12px; }
.eau-card-description { font-size: 16px; line-height: 1.5; margin-top: 48px; }
.eau-card-image { width: 220px; height: 262px; flex-shrink: 0; }
.eau-features { padding: 64px 32px; }
.eau-feature-list { margin-top: 40px; display: flex; flex-direction: column; gap: 64px; }
.eau-feature { display: flex; gap: 40px; align-items: center; }
.eau-feature-art, .eau-slider { width: 350px; flex-shrink: 0; position: relative; }
.eau-bluetooth-animation { position: absolute; top: 20px; left: calc(50% + 61px); width: 44px; height: 44px; pointer-events: none; }
.eau-feature-image { width: 310px; height: 240px; border-radius: 16px; margin: 0 auto; }
.eau-feature-copy { flex: 1; min-width: 0; }
.eau-number { display: inline-block; border-radius: 100px; background: var(--eau-blue); padding: 6px 16px; font-size: 16px; font-weight: 700; line-height: 22px; margin-bottom: 16px; }
.eau-feature-title { font-size: 20px; line-height: 1.4; font-weight: 600; margin-bottom: 8px; }
.eau-feature-description { font-size: 16px; line-height: 1.5; color: #4d4d4d; }
.eau-feature-note { display: block; color: #9c9c9c; font-size: 14px; line-height: 1.4; margin-top: 16px; }
.eau-home-swiper { width: 310px; overflow: hidden; border-radius: 16px; }
.eau-slide-prev, .eau-slide-next { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 1px solid #eaeaea !important; border-radius: 50%; background: #fff; z-index: 2; display: flex; align-items: center; justify-content: center; }
.eau-slide-prev { left: 0; }
.eau-slide-prev-icon { transform: rotate(180deg); }
.eau-slide-next { right: 0; }
.eau-transfer { padding: 64px 28px; }
.eau-transfer .eau-tabs { margin-top: 48px; }
.eau-transfer .eau-tab-list { margin-bottom: 36px; }
.eau-transfer [aria-selected=true] { background: #ffcb00; }
.eau-transfer-box { background: white; border-radius: 24px; height: 332px; padding: 54px 24px; }
.eau-steps { padding: 0; list-style: none; display: flex; justify-content: center; gap: 46px; }
.eau-step { width: 130px; position: relative; text-align: center; }
.eau-step-icon { display: flex; width: 84px; height: 84px; border-radius: 50%; background: #f0f3f8; align-items: center; justify-content: center; margin: 0 auto 16px; }
.eau-step-title { color: #478aff; font-size: 16px; font-weight: 600; line-height: 1.4; }
.eau-step-description { color: #4d4d4d; font-size: 14px; line-height: 1.4; margin-top: 8px; white-space: nowrap; }
.eau-step-arrow { position: absolute; top: 36px; left: calc(100% + 16px); display: flex; width: 14px; height: 12px; }
.eau-step-arrow-icon { width: 7px; height: 12px; flex-shrink: 0; }
.eau-transfer-note { color: #9c9c9c; font-size: 14px; line-height: 1.4; text-align: center; margin-top: 56px !important; }
.eau-retain { padding: 64px 28px; text-align: center; }
.eau-retain-icon { margin: 0 auto 16px; }
.eau-retain-title { font-size: 24px; font-weight: 600; line-height: 1.4; }
.eau-retain-description { color: #4d4d4d; font-size: 18px; font-weight: 500; line-height: 1.4; margin-top: 16px; }
.eau-download { padding: 64px 28px; text-align: center; }
.eau-download-title { font-size: 32px; font-weight: 600; line-height: 1.5; }
.eau-download-description { font-size: 20px; line-height: 1.4; margin-top: 8px; }
.eau-download-links { display: flex; justify-content: center; align-items: center; gap: 223px; margin-top: 36px; }
.eau-store { width: 200px; height: 67px; border: 1px solid #dadde4; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: white; }
.eau-qr { width: 140px; height: 140px; border: 3px solid #ffcb00; border-radius: 23px; background: white; display: flex; align-items: center; justify-content: center; }
.eau-bottom-links { display: flex; justify-content: center; gap: 24px; margin-top: 60px; }
.eau-bottom-link { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid black; background: white; padding: 12px 20px; font-size: 20px; font-weight: 500; line-height: 1.4; color: black; text-decoration: none; }
@media (max-width: 768px) {
  .eau-page { padding-top: 177px; }
  .eau-page .eau-pc-only, .eau-pc-br, .eau-desktop-title { display: none; }
  .eau-mobile-br, .eau-mobile-title { display: block; }
  .eau-news-title { font-size: 24px; line-height: 1.4; }
  .eau-category { font-size: 16px; line-height: 24px; gap: 12px; }
  .eau-category-icon { width: 20px; height: 20px; }
  .eau-news-date { font-size: 14px; line-height: 21px; }
  .eau-hero { height: 560px; background: linear-gradient(79deg, #ffeca4 60.335%, #ffdf64 134.34%); }
  .eau-hero-logo { left: calc(50% - 24px); top: 40px; width: 48px; height: 19px; }
  .eau-hero-copy { left: 10px; right: 10px; top: 91px; text-align: center; }
  .eau-hero-title { font-size: 32px; line-height: 1.3; font-weight: 600; letter-spacing: -.48px; }
  .eau-hero-pill { padding: 6px 22px; font-size: 18px; font-weight: 500; margin-top: 16px !important; }
  .eau-hero-note { display: none; }
  .eau-spotlight { width: 335px; height: 1066px; left: calc(50% - 167px); top: -423px; }
  .eau-podium { width: 320px; height: 143px; left: calc(50% - 157px); top: 417px; }
  .eau-hero-app { width: 140px; height: 152px; left: calc(50% - 68px); top: 341px; }
  .eau-sparkle { left: calc(50% + 140px); top: 353px; }
  .eau-sparkle-small { left: calc(50% + 137px); top: 316px; }
  .eau-sparkle-left, .eau-sparkle-left-small { display: none; }
  .eau-sparkles-mobile { display: block !important; position: absolute; left: 18px; top: 433px; }
  .eau-section-title { font-size: 24px; line-height: 1.4; }
  .eau-section-icon { margin-bottom: 10px; }
  .eau-intro { padding: 48px 20px; }
  .eau-intro-description { font-size: 16px; line-height: 1.5; margin-top: 10px !important; }
  .eau-compare { gap: 8px; margin-top: 80px; }
  .eau-compare-column { width: 160px; max-width: calc(50% - 4px); }
  .eau-compare-label { padding: 4px 8px; margin-bottom: 4px; font-size: 14px; line-height: 21px; }
  .eau-compare-card { width: 100%; height: 160px; border-radius: 8px; gap: 16px; }
  .eau-app-icon { width: 38px; height: 38px; }
  .eau-app-animation { top: -24px; left: -26px; width: 69px; height: 69px; }
  .eau-app-name { font-size: 12px; padding: 0 4px; border-radius: 2px; line-height: 18px; }
  .eau-app-badge { left: 41px; top: -8px; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
  .eau-new-app .eau-app-icon { width: 52px; height: 52px; }
  .eau-bluetooth-animation { left: calc(50% + 81px); }
  .eau-new-app .eau-app-badge { left: 72px; top: -7px; font-size: 8px; }
  .eau-new-app .eau-app { gap: 10px; }
  .eau-new-app .eau-app-name { height: 18px; line-height: 18px; }
  .eau-merge-arrow { width: 40px; height: 40px; top: 92px; }
  .eau-usage { padding: 48px 20px; }
  .eau-usage .eau-tabs { margin-top: 48px; }
  .eau-tab-list { gap: 8px; margin-bottom: 24px; }
  .eau-tab-list [role=tab] { flex: 1; min-width: 0; padding: 12px 10px; }
  .eau-card { flex-direction: column; padding: 24px; gap: 32px; text-align: center; min-height: 0; }
  .eau-card-copy { padding-top: 0; }
  .eau-label { font-size: 16px; line-height: 22px; }
  .eau-card-title { font-size: 20px; }
  .eau-card-description { margin-top: 12px; color: #4d4d4d; }
  .eau-card-image { max-width: 100%; }
  .eau-features { padding: 80px 20px; }
  .eau-feature-list { margin-top: 80px; gap: 64px; }
  .eau-feature { flex-direction: column; gap: 24px; }
  .eau-feature-copy { order: -1; text-align: center; width: 100%; }
  .eau-number { margin-bottom: 16px; }
  .eau-feature-art, .eau-slider { max-width: 100%; }
  .eau-home-swiper, .eau-feature-image { max-width: 100%; }
  .eau-feature-image { height: auto; aspect-ratio: 31 / 24; }
  .eau-transfer { padding: 48px 20px; }
  .eau-transfer .eau-tabs { margin-top: 80px; }
  .eau-transfer .eau-tab-list { margin-bottom: 24px; }
  .eau-transfer-box { height: 546px; padding: 24px 48px; }
  .eau-steps { flex-direction: column; gap: 54px; }
  .eau-step { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; }
  .eau-step-icon { width: 72px; height: 72px; flex-shrink: 0; margin: 6px 0; }
  .eau-step-graphic { max-width: 40px; max-height: 40px; }
  .eau-step-description { white-space: normal; margin-top: 4px; }
  .eau-step-arrow { transform: rotate(90deg); top: 110px; left: 29px; }
  .eau-transfer-note { margin-top: 32px !important; font-size: 12px; }
  #eau-transfer-panel-station .eau-transfer-box, #eau-transfer-panel-both .eau-transfer-box { height: auto; min-height: 546px; }
  #eau-transfer-panel-station .eau-steps, #eau-transfer-panel-both .eau-steps { gap: 30px; }
  #eau-transfer-panel-station .eau-step-arrow, #eau-transfer-panel-both .eau-step-arrow { top: 93px; }
  .eau-retain { padding: 48px 20px; }
  .eau-retain-icon { margin-bottom: 10px; }
  .eau-retain-title { font-size: 24px; }
  .eau-retain-description { font-size: 16px; font-weight: 400; line-height: 1.5; margin-top: 10px; }
  .eau-mobile-actions { display: flex; flex-direction: column; gap: 12px; padding: 64px 20px; align-items: center; }
  .eau-mobile-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 282px; max-width: 100%; min-height: 54px; border-radius: 8px; padding: 12px; background: #111; color: white; font-size: 18px; font-weight: 500; text-decoration: none; }
  .eau-mobile-action-icon { filter: invert(1); }
}
@media (max-width: 359px) {
  .eau-hero-title { font-size: 28px; }
  .eau-hero-pill { font-size: 15px; padding: 6px 16px; }
  .eau-section-title, .eau-retain-title { font-size: 21px; }
  .eau-tab-list [role=tab] { font-size: 16px; }
  .eau-card { padding: 24px 16px; }
  .eau-card-title { font-size: 18px; }
  .eau-transfer-box { padding-left: 24px; padding-right: 24px; }
  .eau-feature-description, .eau-feature-note { font-size: 14px; }
}