/* V0.6 paired phones. Raw source screenshots retain their natural proportions. */
.port-phone-pair{display:block;position:relative;width:min(100%,430px);margin:0 auto;min-width:0}
.port-phone-stage{display:block;position:relative;width:100%;aspect-ratio:11/15;isolation:isolate}
.port-phone-stage:before{content:"";position:absolute;left:1%;right:1%;top:11%;bottom:9%;border-radius:47% 53% 44% 56%;background:#ffe5aa;z-index:-1;opacity:.68}
.port-phone-pair[data-port=broker] .port-phone-stage:before{background:#b9ead9}
.port-phone-pair[data-port=merchant] .port-phone-stage:before{background:#c2dffc}
.port-phone{display:block;position:absolute;min-width:0;padding:0;margin:0;border:0;background:transparent;color:inherit;text-align:left;transition:transform .4s var(--ease),filter .4s var(--ease);transform-origin:center center}
.port-phone-front{width:61%;left:0;top:0;z-index:2}
.port-phone-back{width:45%;right:0;top:6.5%;z-index:1}
.port-phone-shell{display:block;position:relative;padding:6px;background:#222727;border:1px solid #515656;border-radius:25px;box-shadow:0 14px 24px #172c3526,0 3px 7px #172c3521}
.port-phone-shell img{display:block;width:100%;height:auto;max-width:100%;border-radius:18px;object-fit:contain;background:#fff;aspect-ratio:auto}
.port-phone-zoom{position:absolute;right:11px;bottom:11px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#fffef2e8;color:#273734;font-size:16px;box-shadow:0 2px 8px #102a3030;pointer-events:none}
.port-phone:hover,.port-phone:focus-visible{z-index:3;transform:translateY(-5px);filter:drop-shadow(0 9px 9px #182c3818)}
.port-phone:focus-visible{outline:3px solid #df9200;outline-offset:5px;border-radius:25px}
.port-phone-pair>figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;text-align:center;margin:24px 0 0;font-size:12px;line-height:1.8;color:#344439}
.port-phone-pair>figcaption span{font-size:11px;color:#727969}
.port-phone-pair-compact{width:min(100%,270px);margin:28px auto 16px}
.port-phone-pair-compact .port-phone-stage:before{opacity:0}
.port-phone-pair-compact .port-phone-shell{padding:5px;border-radius:20px;box-shadow:0 11px 19px #172c3524,0 2px 5px #172c351b}
.port-phone-pair-compact .port-phone-shell img{border-radius:14px}
.product-tile:has(.port-phone-pair){min-height:0;padding-bottom:66px}
.product-tile:has(.port-phone-pair)>p{max-width:none}
.product-tile:hover .port-phone-front{transform:translateY(-4px)}
.product-tile:hover .port-phone-back{transform:translateY(3px)}
@media(max-width:900px) and (min-width:561px){
  .product-grid:has(.port-phone-pair){grid-template-columns:1fr}
  .product-tile:has(.port-phone-pair){display:grid;grid-template-columns:1fr 1fr;column-gap:20px;padding:25px 28px 66px;align-content:center}
  .product-tile:has(.port-phone-pair)>.product-tile-top,.product-tile:has(.port-phone-pair)>h3,.product-tile:has(.port-phone-pair)>p{grid-column:1}
  .product-tile:has(.port-phone-pair)>.product-tile-top{align-self:end;margin-top:25px}
  .product-tile:has(.port-phone-pair)>h3{font-size:31px}
  .product-tile:has(.port-phone-pair)>p{align-self:start;font-size:12px}
  .product-tile .port-phone-pair-compact{grid-column:2;grid-row:1/4;width:min(100%,250px);margin:0 auto}
}
@media(max-width:560px){
  .port-phone-pair{width:min(100%,360px)}
  .port-phone-pair-compact{width:min(100%,265px);margin:26px auto 8px;position:relative;top:auto;right:auto;rotate:none;z-index:auto}
  .product-tile:has(.port-phone-pair){display:block;padding:24px 24px 64px;min-height:0}
  .product-tile:has(.port-phone-pair)>h3{max-width:none;font-size:29px}
  .product-tile:has(.port-phone-pair)>p{max-width:none;margin-top:12px;font-size:12px;line-height:1.8}
  .product-tile:has(.port-phone-pair)>.product-tile-top{max-width:none;margin-bottom:18px}
  .product-tile:has(.port-phone-pair)>.product-tile-top>span:last-child{display:block}
  .port-phone-shell{padding:5px;border-radius:22px}
  .port-phone-shell img{border-radius:16px}
  .port-phone-pair>figcaption{margin-top:20px;font-size:12px}
  .port-phone-pair>figcaption span{display:block;flex-basis:100%;font-size:11px}
}
@media(max-width:360px){
  .product-tile:has(.port-phone-pair){padding-inline:20px}
  .product-tile:has(.port-phone-pair)>h3{font-size:26px;max-width:none}
  .port-phone-shell{border-radius:19px;padding:4px}
  .port-phone-shell img{border-radius:14px}
}
@media(prefers-reduced-motion:reduce){.port-phone{transition:none!important;transform:none!important}}
.motion-paused .port-phone{transition:none!important;transform:none!important}

/* The six-platform footer opens eight owner-selected social accounts. */
.social-links button{display:flex;justify-content:space-between;align-items:center;gap:9px;min-height:42px;padding:5px 0;border-bottom:1px solid #ebece2;line-height:1.6}
.social-links button>span{display:block}
.social-links button small{display:block;font-size:9px;color:#7d8474}
.social-links button>b{font-size:15px;font-weight:400}
.social-panel{padding-top:20px}
.social-account-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.social-account-options button{flex:1 1 140px;min-height:44px;padding:10px 12px;border-radius:13px;border:1px solid #dadfce;background:#fafcf5;color:#344333;font-size:12px;line-height:1.5;text-align:center}
.social-account-options button[aria-pressed=true]{background:#ffdf56;border-color:#e9bd26;color:#303522}
.social-account-options button:hover{border-color:#c99c18}
.social-account-options button:focus-visible,.social-original-actions a:focus-visible{outline:3px solid #cc9615;outline-offset:3px}
.social-account-card{padding:18px;background:#fff;border:1px solid #e4e7db;border-radius:19px;margin:0}
.social-account-card figcaption{display:block;text-align:center;margin:0 0 14px}
.social-account-card figcaption>span{display:block;color:#74806c;font-size:11px;line-height:1.8}
.social-current-title{display:block;font-size:19px;line-height:1.65;color:#2e3e2c;overflow-wrap:anywhere}
.social-code-image{display:block;width:auto;height:auto;max-width:100%;max-height:min(52dvh,440px);object-fit:contain;margin:0 auto;border-radius:0;background:#fff}
dialog .social-scan-hint{font-size:12px;text-align:center;margin:16px 0 12px;color:#68745c;line-height:1.8}
.social-original-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;font-size:12px}
.social-original-actions a{min-height:36px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:5px;color:#3b4c2b}
.social-original-actions a:hover{color:#b57408}
@media(max-width:560px){
  .social-links button{font-size:12px;min-height:46px}
  .social-links button small{font-size:10px}
  .social-panel{padding-top:16px}
  .social-account-options{gap:7px;margin-bottom:14px}
  .social-account-options button{flex-basis:100%;min-height:42px;padding:9px 10px}
  .social-account-card{padding:14px;border-radius:15px}
  .social-current-title{font-size:17px}
  .social-code-image{max-height:48dvh}
  .social-original-actions{gap:8px 25px}
}
