.policy-header,.policy-main,.policy-footer{width:min(760px,calc(100% - 40px));margin-inline:auto}
.policy-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:25px;font-size:14px;font-weight:700}
.policy-main{padding-block:40px 60px;overflow-wrap:anywhere}
.policy-main h1{font-size:clamp(32px,7vw,48px);line-height:1.1;margin-bottom:24px}
.policy-main h2{font-size:24px;line-height:1.25;margin-top:32px}
.policy-main p,.policy-main li{color:var(--muted);line-height:1.7}
.policy-main a:not(.button),.policy-footer a{text-decoration:underline;text-underline-offset:3px}
.policy-main .price{font-size:40px;font-weight:700;color:var(--violet)}
.price small{display:block;font-size:16px;font-weight:400}
.notice{background:var(--lavender);padding:20px;border-radius:12px}
/* The pay button stays on screen while the order details above it scroll. */
.pay-actions{position:sticky;bottom:0;z-index:5;padding:12px 0 max(12px,env(safe-area-inset-bottom));background:var(--paper)}
.pay-actions::before{content:"";position:absolute;right:0;bottom:100%;left:0;height:24px;background:linear-gradient(rgb(255 253 252/0),var(--paper));pointer-events:none}
.pay-actions:not(:has(> :not([hidden]))){display:none}
.pay-actions .button{width:100%;min-height:54px}
.pay-terms{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;color:var(--muted);font-size:.85rem;line-height:1.5}
.pay-terms input{width:20px;height:20px;flex:0 0 auto;margin-top:2px;accent-color:var(--violet)}
.pay-terms a{color:var(--violet)}
.pay-terms.is-missing{color:#a12424}
.pay-terms.is-missing input{outline:2px solid #a12424;outline-offset:2px}
.pay-error{margin:0 0 10px;color:#a12424;font-size:.88rem;font-weight:700}
.updated{font-size:14px}
.policy-footer{display:flex;flex-wrap:wrap;gap:20px;border-top:1px solid var(--line);padding-block:24px 50px;font-size:14px}