/* Homepage treasure hold. Detailed fittings surround a full, usable swap window. */
#buy.treasure-hold { padding:125px 0 105px; isolation:isolate; background:radial-gradient(ellipse at 40% 65%,#39174866,transparent 65%) }
#buy .hold-interior { width:min(1200px,calc(100% - 100px)); position:relative }
.hold-heading { position:relative; text-align:center; margin-bottom:32px }
.hold-kicker { color:#d6b687; font-size:21px; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px }
#buy .section-title { font-size:clamp(46px,4.8vw,68px); margin:0 auto; color:#f4e4ff }
#buy .hold-guide { position:absolute; right:10px; top:-55px; margin:0 }
.hold-layout { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); grid-template-areas:'contract contract' 'intro hatch' 'treasure hatch'; grid-template-rows:auto auto 1fr; gap:32px 24px; align-items:start; position:relative }
#buy .hold-welcome { grid-area:intro; padding:16px 25px 0 }
#buy .section-intro { margin:0; max-width:none; text-align:left; font-size:24px; line-height:1.45; color:#e4d1eb }
.hold-treasure { grid-area:treasure; position:relative; margin:0; width:100%; align-self:end }
.hold-treasure img { width:100%; max-width:500px; margin:auto; height:auto; mask:url('/assets/illustrated/hold-beast-mask-v1.svg') center/100% 100% no-repeat }
#buy .hold-contract { grid-area:contract; display:grid; grid-template-columns:minmax(0,1fr) 62px; gap:4px 18px; position:relative; align-items:center; justify-self:center; width:max-content; max-width:100%; min-width:0; min-height:150px; padding:40px 68px 42px; margin:0 auto; background:url('/assets/illustrated/hold-contract-v2.svg') center/100% 100% no-repeat; border:0; border-radius:0; box-shadow:none; isolation:isolate }
#buy .hold-contract .ca-text { grid-column:1; display:block; font-size:26px; line-height:1.5; color:#f5e6ff; white-space:nowrap; word-break:normal; overflow-wrap:normal; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#bb9163 #23122f; letter-spacing:0; min-width:0; text-align:left; padding-bottom:4px; overscroll-behavior-x:contain }
#buy .hold-ca-prefix { color:#e9c9a5 }
#buy .hold-contract .ca-text:focus-visible { outline:2px solid #bd94ff; outline-offset:3px }
#buy .hold-contract .copy-btn { grid-column:2; grid-row:1; width:62px; height:68px; padding:13px; margin:0; background:url('/assets/illustrated/contract-copy-v1.svg') center/100% 100% no-repeat; border:0; color:#f4e3fa }
#buy .hold-contract .copy-btn svg { width:27px; height:27px }
#buy .hold-contract .copy-btn:hover { color:white; filter:brightness(1.16) }
#buy .hold-hatch { grid-area:hatch; position:relative; isolation:isolate; width:100%; max-width:none; padding:100px 58px 125px; margin:0; background:none; border:0; display:flex; flex-direction:column; align-self:stretch }
#buy .hold-hatch::before { content:''; position:absolute; inset:15px 0 0; background:url('/assets/illustrated/hold-hatch-body-v2.svg') center/100% 100% no-repeat; z-index:-1; pointer-events:none }
#buy .hold-hatch::after { content:''; position:absolute; left:0; right:0; bottom:0; height:auto; aspect-ratio:600/125; background:url('/assets/illustrated/hold-hatch-sill-v3.svg') center/contain no-repeat; pointer-events:none }
.hold-hatch-crown { position:absolute; top:-7px; left:0; width:100%; height:auto; pointer-events:none }
.hold-provider { position:absolute; top:42px; left:50%; transform:translateX(-50%); color:#efd7b6; font-size:19px; line-height:1; letter-spacing:1px; white-space:nowrap }
.hold-hinge,.hold-latch { position:absolute; pointer-events:none; width:65px; height:auto; z-index:4 }
.hold-hinge { right:-10px; top:26% }
.hold-hinge-lower { top:auto; bottom:15% }
.hold-latch { left:-9px; top:39%; width:58px }
.hold-aperture { position:relative; min-width:0; isolation:isolate; display:flex; flex-direction:column; flex:1 }
.hold-doors { position:absolute; inset:0; z-index:2; border-radius:14px; overflow:hidden; pointer-events:none }
.hold-door { position:absolute; top:0; bottom:0; width:50%; background:url('/assets/illustrated/hold-hatch-door-v1.svg') center/100% 100%; transition:transform .65s cubic-bezier(.2,.65,.3,1); will-change:auto }
.hold-door-left { left:0; border-right:2px solid #b49167 }
.hold-door-right { right:0; border-left:2px solid #473042; background-position:right top }
.hold-hatch.loading .hold-door-left,.hold-hatch.loaded .hold-door-left { transform:translateX(-103%) }
.hold-hatch.loading .hold-door-right,.hold-hatch.loaded .hold-door-right { transform:translateX(103%) }
#buy .swap-consent { position:relative; z-index:3; min-height:335px; padding:26px 12px; border-radius:14px; background:radial-gradient(ellipse at 50% 0,#51344455,transparent 45%),#1a102cda; flex:1 }
#buy .swap-consent h3 { font-size:30px; line-height:1.15; margin-bottom:22px; color:#f4e4ff; text-wrap:balance }
#buy .swap-consent p { font-size:23px; line-height:1.45; color:#e2cfea }
#buy .swap-consent-actions { margin-top:28px; gap:0 }
#buy .swap-load-button { font-size:22px; min-height:60px; padding:14px 27px; line-height:1.25; max-width:100%; background-size:100% 100%; white-space:normal }
#buy .swap-status { position:relative; z-index:5; padding:4px 6px 13px; font-size:22px; line-height:1.35; background:none; color:#eddafa }
#buy .hold-hatch iframe { position:relative; z-index:1; width:100%; height:660px; min-width:0; border-radius:12px; background:#140b24 }
.hold-service-footer { text-align:center; margin:20px 0 0; position:relative; z-index:5 }
.hold-service-footer a { display:inline-block; padding:7px 4px; color:#e1c2ff; font-size:21px; line-height:1.3; text-decoration-thickness:1px }
.hold-floor { position:relative; display:block; width:100%; margin:64px auto 0; pointer-events:none }
.hold-floor img { display:block; width:100%; height:auto }
.motion-paused .hold-door { transition:none }
@media (prefers-reduced-motion:reduce) { .hold-door { transition:none } }
@media (max-width:1199px) {
    #buy .hold-interior { width:calc(100% - 70px) }
    .hold-layout { grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:32px 18px }
    #buy .hold-welcome { padding:10px 12px 0 }
    #buy .section-intro { font-size:23px }
    #buy .hold-hatch { padding:87px 47px 105px }
    .hold-provider { top:35px; font-size:17px }
    #buy .hold-contract { grid-template-columns:minmax(0,1fr) 55px; column-gap:16px }
    #buy .hold-contract .ca-text { font-size:24px }
    #buy .hold-contract .copy-btn { width:55px; height:62px; padding:12px }
    .hold-hinge { width:57px; right:-10px }
    .hold-latch { width:49px; left:-9px }
    #buy .swap-consent h3 { font-size:27px }
    #buy .swap-consent p { font-size:22px }
    #buy .swap-consent { padding:24px 8px }
}
@media (max-width:1000px) {
    #buy.treasure-hold { padding-top:105px }
    #buy .hold-interior { width:min(720px,calc(100% - 56px)) }
    .hold-layout { grid-template-columns:minmax(0,1fr); grid-template-areas:'intro' 'contract' 'hatch' 'treasure'; gap:22px }
    #buy .hold-welcome { padding:0 12px }
    #buy .section-intro { text-align:center }
    #buy .hold-contract { min-height:142px; grid-template-columns:minmax(0,1fr) 56px; padding:38px 52px 40px }
    #buy .hold-contract .ca-text { font-size:21px }
    #buy .hold-contract .copy-btn { width:56px; height:62px }
    #buy .hold-hatch { width:100%; max-width:620px; margin:0 auto; padding:103px 59px 124px }
    .hold-provider { top:44px; font-size:20px }
    #buy .swap-consent { min-height:285px; padding:24px 12px }
    #buy .swap-consent h3 { font-size:30px; margin-bottom:18px }
    #buy .swap-consent p { font-size:23px }
    .hold-treasure { width:min(400px,88%); justify-self:center; margin:18px 0 0 }
    .hold-floor { margin-top:48px }
}
@media (max-width:600px) {
    #buy.treasure-hold { padding:95px 0 65px }
    #buy .hold-interior { width:calc(100% - 30px) }
    .hold-heading { margin-bottom:22px }
    .hold-kicker { font-size:17px; letter-spacing:1px }
    #buy .section-title { font-size:45px }
    #buy .hold-guide { width:72px; height:72px; top:-80px; right:2px }
    #buy .section-intro { font-size:22px; line-height:1.4 }
    #buy .hold-welcome { padding:0 12px }
    .hold-layout { gap:18px }
    #buy .hold-contract { background-image:url('/assets/illustrated/hold-contract-phone-v2.svg'); padding:34px 9% 36px; min-height:140px; grid-template-columns:minmax(0,1fr) 48px; gap:5px 8px }
    #buy .hold-contract .ca-text { font-size:20px; line-height:1.5 }
    #buy .hold-contract .copy-btn { grid-row:1; width:48px; height:48px; padding:10px }
    #buy .hold-contract .copy-btn svg { width:24px; height:24px }
    #buy .hold-hatch { padding:70px 28px 86px }
    .hold-provider { top:25px; font-size:16px }
    .hold-hinge { width:37px; right:-5px }
    .hold-latch { width:32px; left:-5px }
    #buy .swap-consent { padding:20px 5px; min-height:0 }
    #buy .swap-consent h3 { font-size:27px; margin-bottom:16px }
    #buy .swap-consent p { font-size:22px; line-height:1.4 }
    #buy .swap-consent-actions { margin-top:23px }
    #buy .swap-load-button { font-size:21px; min-height:58px; padding:14px 20px }
    #buy .hold-hatch iframe { height:660px }
    /* The third-party interface needs at least 320px. Let the opened hatch
       occupy the phone width, with its ornament above and below the controls. */
    #buy .hold-hatch.loading,#buy .hold-hatch.loaded { width:calc(100% + 30px); margin-left:-15px; padding-left:2px; padding-right:2px }
    .hold-hatch.loading .hold-hinge,.hold-hatch.loaded .hold-hinge,.hold-hatch.loading .hold-latch,.hold-hatch.loaded .hold-latch { visibility:hidden }
    .hold-service-footer { margin-top:16px }
    .hold-service-footer a { font-size:21px }
    .hold-treasure { width:min(320px,90%); margin-top:20px }
    .hold-floor { margin-top:36px }
}
@media (max-width:360px) {
    #buy .section-title { font-size:41px }
    #buy .hold-contract { grid-template-columns:minmax(0,1fr) 48px }
    #buy .hold-contract .ca-text { font-size:19px }
    #buy .hold-hatch { padding:63px 24px 75px }
    #buy .hold-hatch.loading,#buy .hold-hatch.loaded { padding-left:0; padding-right:0 }
    .hold-provider { top:20px; font-size:15px }
}