/* EasyPrint How It Works V2.72 — mobile-only true-proportion phone + single step list.
   All mobile rules scoped to #how-it-works under <=1024px. No desktop/backend changes. */
.ep-how-mobile-scene { display: none; }
@media screen and (max-width: 1024px) {
  body #how-it-works.how-section {
    box-sizing: border-box !important; min-height: 0 !important; height: auto !important;
    padding: clamp(36px, 5svh, 60px) clamp(13px, 3.5vw, 32px) 48px !important;
    display: block !important; overflow: hidden !important;
  }
  body #how-it-works .how-container { width: 100% !important; max-width: 820px !important; margin: 0 auto !important; }
  body #how-it-works .how-heading { max-width: 480px !important; margin: 0 auto !important; text-align: center !important; }
  body #how-it-works .how-heading::after { margin: 15px auto 0 !important; width: 40px !important; height: 2px !important; }
  body #how-it-works .how-kicker { text-align: center !important; font: 850 10px/1.3 Arial,Helvetica,sans-serif !important; letter-spacing: .2em !important; color: #3295c4 !important; }
  body #how-it-works .how-heading .section-title { margin: 9px auto 12px !important; font-family: Arial,Helvetica,sans-serif !important; font-size: clamp(27px,7.6vw,39px) !important; font-weight: 850 !important; line-height: 1.045 !important; letter-spacing: -.045em !important; text-align: center !important; }
  body #how-it-works .how-subtitle { max-width: 360px !important; margin: 0 auto !important; font: 400 13px/1.55 Arial,Helvetica,sans-serif !important; text-align: center !important; color: #55778f !important; }
  /* V2.72 staged reveal: title first, then phone, then step cards. */
  body #how-it-works .how-heading,
  body #how-it-works .ep-how-mobile-scene,
  body #how-it-works .steps-grid .step-card {
    will-change: opacity, transform;
  }
  body #how-it-works.ep-how-mobile-enhanced .how-heading {
    opacity: 0; transform: translateY(10px);
    transition: opacity .82s cubic-bezier(.22,.61,.36,1), transform .82s cubic-bezier(.22,.61,.36,1);
  }
  body #how-it-works.ep-how-mobile-enhanced.ep-how-title-on .how-heading {
    opacity: 1; transform: translateY(0);
  }
  body #how-it-works.ep-how-mobile-enhanced .ep-how-mobile-scene {
    opacity: 0; transform: translateY(12px) scale(.985);
    transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1);
  }
  body #how-it-works.ep-how-mobile-enhanced.ep-how-phone-on .ep-how-mobile-scene {
    opacity: 1; transform: translateY(0) scale(1);
  }
  body #how-it-works .how-desktop-showcase { display: none !important; }
  /* A single full portrait device, not a fake short phone or stacked cards. */
  body #how-it-works .ep-how-mobile-scene {
    position: relative !important; display: grid !important; place-items: center !important;
    width: min(100%, 440px) !important;
    height: clamp(395px, calc(min(56vw, 232px) * 2.20), 520px) !important;
    margin: 14px auto 6px !important; isolation: isolate; pointer-events: none;
    font-family: Arial,Helvetica,sans-serif;
  }
  body #how-it-works .ep-how-glow {
    position: absolute; z-index: -1; width: 87%; height: 74%; inset: 15% auto auto 6%; border-radius: 50%;
    background: radial-gradient(ellipse, rgba(72,187,228,.22), rgba(164,225,247,.08) 60%, transparent 78%); filter: blur(18px);
  }
  body #how-it-works .ep-how-phone {
    position: relative; box-sizing: border-box; width: clamp(184px,56vw,232px);
    aspect-ratio: 9 / 19.0;
    border: 6px solid #233547; border-radius: 37px;
    transform: rotate(-5deg); transform-origin: center center;
    box-shadow: 15px 23px 32px rgba(31,75,109,.24), 2px 3px 0 rgba(255,255,255,.4) inset, -1px 0 1px rgba(13,31,48,.5);
    background: #233547; padding: 2px;
  }
  body #how-it-works .ep-how-phone::before {
    content: ''; position: absolute; right: -8px; top: 25%; height: 47px; width: 3px; border-radius: 0 2px 2px 0; background: #4b6170;
  }
  body #how-it-works .ep-how-phone-screen {
    position: relative; box-sizing: border-box; width: 100%; height: 100%; overflow: hidden;
    border-radius: 29px; background: linear-gradient(165deg,#ffffff 0%,#effbff 49%,#e1f5fc 100%); color: #184e83;
  }
  body #how-it-works .ep-how-phone-notch {
    position: absolute; z-index: 5; top: -1px; left: 29%; width: 42%; height: 20px;
    border-radius: 0 0 15px 15px; background: #233547;
  }
  body #how-it-works .ep-phone-status {
    position: relative; z-index: 2; box-sizing: border-box; height: 31px; padding: 10px 17px 0;
    display: flex; align-items: flex-start; justify-content: space-between;
    font: 800 9px/1 Arial,Helvetica,sans-serif; color: #315d78;
  }
  body #how-it-works .ep-phone-status-signals { font-size: 7px; letter-spacing: 1px; color: #315d78; }
  body #how-it-works .ep-phone-appbar { height: 37px; padding: 0 15px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.58); border-bottom: 1px solid rgba(197,223,236,.5); }
  body #how-it-works .ep-phone-wordmark { font: 900 16px/1 Arial,Helvetica,sans-serif; letter-spacing: -.065em; color: #13b6c7; }
  body #how-it-works .ep-phone-wordmark span { color: #287cba; }
  body #how-it-works .ep-phone-appbar-menu { display: grid; gap: 3px; }
  body #how-it-works .ep-phone-appbar-menu i { display: block; width: 11px; height: 1.7px; border-radius: 2px; background: #1d6090; }
  body #how-it-works .ep-how-panels { position: absolute; inset: 68px 0 29px; overflow: hidden; }
  body #how-it-works .ep-how-panel { position: absolute; inset: 0; box-sizing: border-box; padding: 25px 15px 6px; opacity: 0; visibility: hidden; transform: translateY(9px); transition: opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1),visibility 0s linear .72s; }
  body #how-it-works .ep-how-panel.is-current { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .72s cubic-bezier(.22,.61,.36,1),transform .72s cubic-bezier(.22,.61,.36,1),visibility 0s; }
  body #how-it-works .ep-phone-kicker { display: block; font: 900 8px/1.3 Arial,Helvetica,sans-serif; letter-spacing: .15em; color: #318db9; }
  body #how-it-works .ep-how-panel h3 { font: 900 clamp(15px,4.5vw,20px)/1.04 Arial,Helvetica,sans-serif; letter-spacing: -.052em; color: #184e83; margin: 9px 0 7px; }
  body #how-it-works .ep-how-panel h3 em { font-style: normal; color: #19aeca; }
  body #how-it-works .ep-phone-intro { font: 400 9px/1.45 Arial,Helvetica,sans-serif; color: #537792; margin: 0 0 16px; }
  body #how-it-works .ep-phone-upload-area,
  body #how-it-works .ep-phone-code-area,
  body #how-it-works .ep-phone-kiosk-area,
  body #how-it-works .ep-phone-complete-area {
    box-sizing: border-box; width: 100%; height: clamp(144px,32vw,172px); border-radius: 16px;
    background: linear-gradient(160deg, #ffffff,#e9f7fc);
    box-shadow: 0 9px 20px rgba(40,120,166,.08); border: 1px solid #d4edf7;
  }
  body #how-it-works .ep-phone-upload-area { position: relative; display: flex; flex-direction: column; align-items: center; padding: 12px 10px; }
  body #how-it-works .ep-phone-paper { display: flex; flex-direction: column; gap: 6px; background: white; box-shadow: 0 7px 15px rgba(33,110,160,.17); border-radius: 6px; width: 62px; height: 86px; padding: 10px; box-sizing: border-box; }
  body #how-it-works .ep-phone-doc-logo { display: grid; place-items: center; background: #238bcb; color: #fff; width: 20px; height: 20px; border-radius: 3px; font: 900 11px/1 Arial,Helvetica,sans-serif; }
  body #how-it-works .ep-phone-paper-line { display: block; height: 3px; width: 90%; border-radius: 6px; background: #d9eaf4; }
  body #how-it-works .ep-phone-paper-line:nth-of-type(3) { width: 65%; }
  body #how-it-works .ep-phone-upload-name { font: 800 9px/1.4 Arial,Helvetica,sans-serif; margin-top: 9px; text-align: center; color: #246398; }
  body #how-it-works .ep-phone-upload-name span { display: block; font: 400 8px/1.2 Arial,Helvetica,sans-serif; color: #709bb4; }
  body #how-it-works .ep-phone-tick { position: absolute; bottom: 13px; right: 20px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #ddf9f5; color: #1ea99a; font: 900 12px/1 Arial,Helvetica,sans-serif; }
  body #how-it-works .ep-phone-action { margin: 17px 0 0; padding: 10px 12px; border-radius: 10px; background: linear-gradient(100deg,#19b7c8,#329cdf); color: white; font: 850 9px/1.3 Arial,Helvetica,sans-serif; box-shadow: 0 6px 14px rgba(32,156,205,.18); display: flex; align-items: center; justify-content: space-between; }
  body #how-it-works .ep-phone-code-area { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; }
  body #how-it-works .ep-phone-code-label { color: #7099b6; font: 850 8px/1 Arial,Helvetica,sans-serif; letter-spacing: .13em; }
  body #how-it-works .ep-phone-code-area strong { color: #195e98; font: 900 23px/1 Arial,Helvetica,sans-serif; letter-spacing: .09em; white-space: nowrap; }
  body #how-it-works .ep-phone-code-valid { display: block; border-radius: 20px; background: #e2f9f6; padding: 6px 9px; color: #159d9d; font: 750 8px/1 Arial,Helvetica,sans-serif; }
  body #how-it-works .ep-phone-kiosk-area { display: flex; align-items: center; justify-content: center; gap: 12px; }
  body #how-it-works .ep-phone-kiosk-area > span { color: #517a96; font: 750 9px/1.4 Arial,Helvetica,sans-serif; }
  body #how-it-works .ep-demo-kiosk { height: 111px; width: 75px; border-radius: 11px 11px 5px 5px; background: linear-gradient(145deg,#23b7d3,#1e76c8); box-shadow: 5px 7px 8px rgba(35,92,139,.23); display: flex; flex-direction: column; align-items: center; padding-top: 9px; box-sizing: border-box; }
  body #how-it-works .ep-demo-kiosk-top { background: white; border-radius: 6px; padding: 4px 6px; font: 900 7px/1 Arial,Helvetica,sans-serif; color: #2381b2; }
  body #how-it-works .ep-demo-kiosk-monitor { display: grid; place-items: center; width: 43px; height: 42px; margin-top: 7px; background: #c7f3f7; border: 5px solid #184e83; border-radius: 8px; color: #23a0c2; font-size: 23px; }
  body #how-it-works .ep-demo-kiosk-slot { height: 5px; width: 33px; margin-top: 7px; border-radius: 3px; background: #16446c; }
  body #how-it-works .ep-phone-complete-area { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; }
  body #how-it-works .ep-phone-complete-icon { width: 51px; height: 51px; display: grid; place-items: center; border-radius: 50%; background: #d7f9f3; border: 2px solid #abebe1; color: #15aaa0; font: 900 27px/1 Arial,Helvetica,sans-serif; }
  body #how-it-works .ep-phone-complete-area strong { color: #1d6098; font: 900 13px/1 Arial,Helvetica,sans-serif; }
  body #how-it-works .ep-phone-complete-area > span:last-child { color: #6d95ab; font: 400 8px/1.2 Arial,Helvetica,sans-serif; }
  body #how-it-works .ep-phone-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
  body #how-it-works .ep-phone-bottom-dots { display: flex; gap: 5px; }
  body #how-it-works .ep-phone-bottom-dots i { height: 3px; width: 13px; border-radius: 8px; background: #cfebf7; }
  body #how-it-works .ep-phone-bottom-dots i.is-active { background: #22aace; }
  body #how-it-works .ep-phone-home-indicator { width: 36%; height: 4px; border-radius: 20px; background: #274c67; opacity: .75; }
  /* Reuse the existing 4 real step descriptions as the ONLY external list.
     V2.72: compact 2x2 grid on normal mobile; fallback to 1 column only on very narrow phones. */
  body #how-it-works .steps-grid {
    position: relative !important; display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(100%, 440px) !important; max-width: 440px !important;
    margin: 6px auto 0 !important; padding: 0 !important; gap: 8px !important; align-items: stretch !important;
  }
  body #how-it-works .steps-grid::before,
  body #how-it-works .steps-grid .step-card::after { display: none !important; content: none !important; }
  body #how-it-works .steps-grid .step-card,
  body #how-it-works .steps-grid .step-card:nth-child(2),
  body #how-it-works .steps-grid .step-card:nth-child(4) {
    display: block !important; position: relative !important; box-sizing: border-box !important;
    width: 100% !important; min-height: 90px !important; margin: 0 !important;
    padding: 12px 12px 12px 12px !important; border-radius: 14px !important;
    border: 1px solid rgba(168,214,236,.5) !important; background: rgba(255,255,255,.55) !important;
    box-shadow: none !important; overflow: hidden !important; transform: none !important;
    text-align: left !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    cursor: pointer;
  }
  body #how-it-works .steps-grid .step-card::before {
    content: '01' !important; position: relative !important; top: 0 !important; left: 0 !important;
    transform: none !important; display: inline-grid !important; place-items: center !important;
    width: 30px !important; height: 30px !important; border-radius: 10px !important;
    padding: 0 !important; margin: 0 0 9px 0 !important; background: rgba(213,237,249,.92) !important;
    border: 1px solid #d0eaf7 !important; color: #318dbb !important;
    font: 850 11px/1 Arial,Helvetica,sans-serif !important; opacity: 1 !important; box-shadow: none !important;
  }
  body #how-it-works .steps-grid .step-card:nth-child(2)::before { content: '02' !important; }
  body #how-it-works .steps-grid .step-card:nth-child(3)::before { content: '03' !important; }
  body #how-it-works .steps-grid .step-card:nth-child(4)::before { content: '04' !important; }
  body #how-it-works .steps-grid .step-card h3 { margin: 0 0 4px !important; color: #1d5889 !important; font: 800 11.5px/1.18 Arial,Helvetica,sans-serif !important; letter-spacing: -.01em !important; }
  body #how-it-works .steps-grid .step-card p { margin: 0 !important; max-width: none !important; color: #68879a !important; font: 400 9.5px/1.35 Arial,Helvetica,sans-serif !important; }
  body #how-it-works .steps-grid .step-card.is-active { border-color: #a4ddef !important; background: rgba(250,254,255,.94) !important; box-shadow: 0 8px 22px rgba(62,150,193,.12) !important; }
  body #how-it-works .steps-grid .step-card:focus-visible { outline: 2px solid #188cc3; outline-offset: 2px; }
  html.ep-motion-ready body #how-it-works .steps-grid .step-card,
  html.ep-motion-ready body #how-it-works .steps-grid .step-card.ep-step-off,
  html.ep-motion-ready body #how-it-works .steps-grid .step-card.ep-step-on {
    opacity: 1 !important; translate: none !important; filter: none !important;
    transition: opacity .72s cubic-bezier(.22,.61,.36,1), translate .72s cubic-bezier(.22,.61,.36,1), box-shadow .42s ease, background .42s ease !important;
  }
  html body #how-it-works.ep-how-mobile-enhanced .steps-grid .step-card:not(.ep-how-revealed),
  html.ep-motion-ready body #how-it-works.ep-how-mobile-enhanced .steps-grid .step-card:not(.ep-how-revealed) {
    opacity: 0 !important; translate: 0 9px !important; pointer-events: none;
  }
  body #how-it-works.ep-how-mobile-enhanced .steps-grid .step-card.ep-how-revealed {
    opacity: 1 !important; translate: none !important; pointer-events: auto;
  }
  body #how-it-works.ep-how-mobile-enhanced.ep-how-hide-cards .steps-grid .step-card {
    opacity: 0 !important; translate: 0 10px !important; pointer-events: none;
  }
}
@media screen and (max-width: 360px) {
  body #how-it-works .steps-grid { grid-template-columns: 1fr !important; max-width: 320px !important; }
  body #how-it-works .steps-grid .step-card { min-height: 0 !important; }

  body #how-it-works .ep-how-mobile-scene { height: 406px !important; }
  body #how-it-works .ep-how-phone { width: 184px; }
  body #how-it-works .ep-how-panel { padding: 19px 12px 5px; }
  body #how-it-works .ep-how-panel h3 { font-size: 16px; }
  body #how-it-works .ep-phone-intro { margin-bottom: 8px; }
  body #how-it-works .ep-phone-action { margin-top: 9px; padding: 7px 9px; min-height: 0; box-sizing: border-box; }
  body #how-it-works .ep-phone-upload-area,
  body #how-it-works .ep-phone-code-area,
  body #how-it-works .ep-phone-kiosk-area,
  body #how-it-works .ep-phone-complete-area { height: 134px; }
}
@media screen and (min-width: 761px) and (max-width: 1024px) {
  body #how-it-works .ep-how-mobile-scene { height: 516px !important; }
  body #how-it-works .how-heading .section-title { font-size: 40px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body #how-it-works .ep-how-mobile-scene *,body #how-it-works .steps-grid .step-card { animation: none !important; transition: none !important; }
  html body #how-it-works.ep-how-mobile-enhanced .steps-grid .step-card:not(.ep-how-revealed) { opacity: 1 !important; translate: none !important; }
}