/* The reverse is a physical companion to the approved front. */
#access-key-back{container-type:inline-size;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:5%;padding:5.2% 6%;background:none;border:0;box-shadow:none;color:#dce0e2}
#access-key-back .key-back-material{position:absolute;left:-2.991%;top:-3.79%;width:105.917%;height:107.581%;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none;z-index:-1}
#access-key-back::after{inset:2px;opacity:.2;z-index:3}
.key-reverse-header{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}
.key-reverse-brand{display:flex;align-items:center;gap:8px;font:400 clamp(14px,4.8cqw,27px)/1 var(--serif);letter-spacing:.14em;color:#dfe2e4;text-shadow:0 -1px #000,0 1px #ffffff20}
.key-reverse-brand svg{width:clamp(13px,4.1cqw,23px);height:clamp(13px,4.1cqw,23px);fill:#c7cdd0;flex-shrink:0}
.key-reverse-type{font-size:clamp(7px,1.8cqw,10px);letter-spacing:.14em;color:#b2b9bd;white-space:nowrap;text-shadow:0 -1px #000}
#access-key-back .key-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;min-width:0;min-height:0;border-top:1px solid #d5dce137;border-bottom:1px solid #d5dce137;box-shadow:0 1px 0 #0009,inset 0 1px 0 #0009}
#access-key-back .key-products button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;min-width:0;min-height:44px;padding:7% 9% 7% 0;background:none;border:0;border-radius:0;text-shadow:0 -1px 0 #000,0 1px 0 #ffffff13;transition:background .2s,color .2s}
#access-key-back .key-products button+button{padding:7% 0 7% 12%;border-left:1px solid #d5dce12b}
#access-key-back .key-product-number{display:block;position:absolute;right:10%;top:14%;font-size:clamp(8px,2cqw,11px);line-height:1;letter-spacing:.08em;color:#a2abaf}
#access-key-back .key-products button+button .key-product-number{right:0}
#access-key-back .key-products strong{font:400 clamp(25px,8cqw,45px)/1.06 var(--serif);letter-spacing:-.015em;color:#e2e5e7;padding-right:19px;margin:0 0 8px}
#access-key-back .key-product-action{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;font-size:clamp(11px,2.75cqw,15px);font-weight:400;line-height:1.3;letter-spacing:0;color:#bfc8ce;white-space:normal}
#access-key-back .key-product-action svg{width:clamp(13px,3.6cqw,20px);height:clamp(13px,3.6cqw,20px);flex-shrink:0;transition:transform .2s}
#access-key-back .key-products button:hover{background:#e5edf408;color:#fff}
#access-key-back .key-products button:hover .key-product-action{color:#fff}
#access-key-back .key-products button:hover svg{transform:translateX(2px)}
#access-key-back .key-back-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:0;min-width:0}
.key-reverse-edition{display:flex;flex-direction:column;gap:4px;font-size:clamp(8px,2cqw,11px);line-height:1;letter-spacing:.13em;color:#c8cfd4;text-shadow:0 -1px #000}
.key-reverse-edition>span{font-size:clamp(6px,1.6cqw,9px);letter-spacing:.12em;color:#9aa5ad}
#access-key-back .key-enter{display:inline-flex;align-items:center;justify-content:flex-end;gap:clamp(7px,3cqw,16px);min-height:32px;margin:0;padding:6px 0;border:0;font-size:clamp(11px,2.7cqw,15px);font-weight:450;line-height:1.2;color:#e0e5e8;text-shadow:0 -1px #000;white-space:nowrap}
#access-key-back .key-enter svg{width:clamp(14px,3.5cqw,20px);height:clamp(14px,3.5cqw,20px);flex-shrink:0}
#access-key-back button:focus-visible,#access-key-back a:focus-visible{outline:1px solid #eef3f5;outline-offset:3px}
@container(max-width:310px){#access-key-back .key-products strong{font-size:25px;margin-bottom:5px}#access-key-back .key-products button{padding-block:6px}#access-key-back .key-product-action{font-size:11px}#access-key-back .key-product-number{top:10%}.key-reverse-brand{font-size:15px;gap:6px}.key-reverse-type{font-size:7px;letter-spacing:.08em}.key-reverse-edition{gap:3px}}
@media(prefers-reduced-motion:reduce){#access-key-back .key-products button,#access-key-back .key-product-action svg{transition:none}#access-key-back .key-products button:hover svg{transform:none}}
@media(forced-colors:active){#access-key-back{background:Canvas;border:1px solid CanvasText;color:CanvasText}#access-key-back .key-back-material{display:none}#access-key-back .key-products strong,#access-key-back .key-product-action,#access-key-back .key-enter,.key-reverse-brand,.key-reverse-type,.key-reverse-edition,.key-reverse-edition>span{color:CanvasText;text-shadow:none}#access-key-back .key-products,#access-key-back .key-products button+button{border-color:CanvasText}}
/* Keep the reverse face above its 3D wrapper in native pointer hit testing. */
.access-key-stage.is-flipped .key-card-tilt{pointer-events:none}
.access-key-stage.is-flipped #access-key-back{pointer-events:auto}

/* Engraved capability marks, lit dividers and a quiet response at the fingertip. */
#access-key-back .key-products{position:relative;border-color:#c4d9e847;box-shadow:0 1px 0 #000c,inset 0 1px 0 #0009}
#access-key-back .key-products::before,#access-key-back .key-products::after{content:"";position:absolute;left:0;right:0;height:1px;pointer-events:none;background:linear-gradient(90deg,#d9efff90,transparent 36%,#c3dfed35 65%,transparent);z-index:2}
#access-key-back .key-products::before{top:-1px}
#access-key-back .key-products::after{bottom:-1px;transform:rotate(180deg)}
#access-key-back .key-products button{isolation:isolate;transition:color .25s}
#access-key-back .key-products button::before{content:"";position:absolute;inset:3px 0;background:linear-gradient(115deg,#b8d9ef12,transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:-1}
#access-key-back .key-products button:hover,#access-key-back .key-products button:focus-visible{background:transparent}
#access-key-back .key-products button:is(:hover,:focus-visible)::before{opacity:1}
#access-key-back .key-products button:active::before{opacity:1;background:#c8e3f218}
#access-key-back .key-products .key-product-glyph{position:absolute;right:11%;top:30%;width:clamp(21px,6.8cqw,39px);height:auto;fill:none;stroke:#bcd2df;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transform:none;transition:opacity .25s,transform .25s;pointer-events:none}
#access-key-back .key-products button+button .key-product-glyph{right:0}
#access-key-back .key-products button:is(:hover,:focus-visible) .key-product-glyph{opacity:1;transform:translateY(-2px)}
#access-key-back .key-product-number{font-size:clamp(7px,1.7cqw,10px);letter-spacing:.15em;color:#abbcc7}
#access-key-back .key-products strong{padding-right:clamp(36px,9cqw,52px);color:#eaf1f5;text-shadow:0 -1px #050708,0 1px #ffffff30}
#access-key-back .key-product-action svg{padding:2px;border:1px solid #aecbde35;border-radius:50%;width:clamp(18px,4.4cqw,25px);height:clamp(18px,4.4cqw,25px);transition:transform .25s,border-color .25s}
#access-key-back .key-products button:is(:hover,:focus-visible) .key-product-action svg{border-color:#c9e2f18c;transform:translateX(2px)}
#access-key-back .key-reverse-type{color:#c0d2df;letter-spacing:.18em}
#access-key-back .key-reverse-edition{color:#d5e2e9}
#access-key-back .key-enter{color:#eaf3f9}
@media(prefers-reduced-motion:reduce){#access-key-back .key-products button::before,#access-key-back .key-products .key-product-glyph,#access-key-back .key-product-action svg{transition:none}#access-key-back .key-products button:is(:hover,:focus-visible) .key-product-glyph,#access-key-back .key-products button:is(:hover,:focus-visible) .key-product-action svg{transform:none}}
@media(forced-colors:active){#access-key-back .key-products::before,#access-key-back .key-products::after,#access-key-back .key-products button::before{display:none}#access-key-back .key-products .key-product-glyph{stroke:CanvasText;opacity:1}#access-key-back .key-products strong,#access-key-back .key-reverse-type,#access-key-back .key-reverse-edition,#access-key-back .key-enter{color:CanvasText;text-shadow:none}}

/* The softbox illuminates the material beneath the engraved UI. */
#access-key-back .key-optics{z-index:0}
#access-key-back .key-reverse-header,#access-key-back .key-products,#access-key-back .key-back-footer{position:relative;z-index:1}