.checkout-open { position:fixed; top:var(--checkout-scroll-top,0); left:0; right:0; overflow:hidden; }
.reading-checkout { inset:0; width:100%; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:max(64px,calc(env(safe-area-inset-top) + 48px)) max(16px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); border:0; background:#0b0e10; color:#e8eaf0; overflow-y:auto; overscroll-behavior:contain; }
.reading-checkout::backdrop { background:#06080be8; }
.reading-checkout[open] { display:block; }
.reading-checkout [hidden] { display:none!important; }
.rc-wrap { max-width:560px; margin:0 auto; }
.reading-checkout h2 { text-align:center; font:600 26px/1.6 var(--hw-serif); padding:0 12px; }
.rc-subtitle { text-align:center; color:#a9b0bb; font-size:12px; line-height:1.8; margin:12px 0 28px; }
.rc-close { position:fixed; top:max(12px,env(safe-area-inset-top)); right:max(16px,env(safe-area-inset-right)); width:44px; height:44px; z-index:2; border:1px solid #39424c; border-radius:50%; background:#0f141a; color:#d3d9df; font-size:25px; }
.rc-moon { display:block; margin:32px auto 22px; }
.rc-ranks fieldset,.rc-packages { border:0; min-width:0; padding:0; margin:0; display:grid; gap:16px; }
.rc-ranks legend { width:100%; margin-bottom:38px; text-align:center; font:600 22px/1.6 var(--hw-serif); letter-spacing:.2em; }
.rc-rank { position:relative; display:grid; grid-template-columns:112px minmax(0,1fr); gap:16px; padding:16px; min-height:188px; border:1px solid #292f38; border-radius:12px; background:linear-gradient(115deg,#1b1e23,#13161b); cursor:pointer; color:inherit; text-align:left; }
.rc-rank img { width:112px; height:152px; object-fit:cover; border:1px solid #30343b; border-radius:6px; }
.rc-featured { border-color:#d7dfe9; background:linear-gradient(120deg,#303744,#191e27); }
.rc-rank-copy { align-self:center; }
.rc-rank-copy>b { display:block; font:600 22px/1.4 var(--hw-serif); }
.rc-rank-copy>small { display:block; color:#a8b0bc; font-size:11px; margin-top:6px; }
.rc-condition { display:block; margin:14px 0 18px; font-size:12px; line-height:1.8; word-break:keep-all; }
.rc-next { font-size:11px; color:#d2dbea; }
.rc-badge { display:block; width:fit-content; padding:3px 8px; background:#dee3ed; color:#222a36; border-radius:3px; font:600 11px/1.6 var(--hw-sans); margin-bottom:10px; }
.rc-back { min-height:44px; padding:8px 0; color:#c1cad6; background:none; border:0; font-size:12px; }
.rc-selected { margin:26px 0 10px; text-align:center; color:#b8c7db; font-size:12px; }
.reading-checkout h3 { margin:0; text-align:center; font:400 26px/1.6 var(--hw-serif); }
.rc-intro { margin:16px 0 32px; text-align:center; color:#d5deec; font-size:12px; line-height:1.8; }
.rc-package { display:grid; grid-template-columns:18px minmax(0,1fr); gap:12px; border:1px solid #3c4552; border-radius:10px; padding:23px 16px; background:#151a21; cursor:pointer; }
.rc-package:has(input:checked) { border-color:#e2e8ef; background:linear-gradient(125deg,#313a49,#1b2029); }
.rc-package input { width:16px; height:16px; margin:4px 0 0; accent-color:#c8d7e9; }
.rc-package-copy b { display:block; text-align:center; font:400 17px/1.7 var(--hw-serif); word-break:keep-all; }
.rc-package-copy small { display:block; text-align:center; margin-top:9px; color:#b3bfd0; font-size:11px; line-height:1.8; }
.rc-price { grid-column:2; text-align:right; margin-top:12px; }
.rc-original { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; color:#abb8ca; font-size:11px; }
.rc-original em { font-style:normal; font-weight:600; color:#e8edf6; }
.rc-reference-note { display:block; font-size:11px; color:#aebbc9; margin-bottom:7px; }
.rc-price strong { display:block; font:400 27px/1.4 var(--hw-serif); margin-top:6px; }
.rc-saving { grid-column:2; font-size:11px; color:#c4d0e2; text-align:right; }
.rc-owned { font-size:11px; color:#aab4c4; line-height:1.8; margin:18px 0; }
.rc-availability { display:flex; justify-content:space-between; gap:12px; border-block:1px solid #333d49; padding:20px 0; font-size:11px; color:#abb8ca; }
.rc-benefits { display:flex; justify-content:space-around; gap:6px; margin:26px 0; font-size:11px; color:#a3b3c6; }
.rc-benefits span+span { border-left:1px solid #343f4d; padding-left:12px; }
.rc-pay { width:100%; min-height:54px; padding:15px 10px; border:0; border-radius:11px; color:#10151c; background:linear-gradient(#f2f5f8,#b4becb); box-shadow:0 8px 28px #c6d8ed1a; font-weight:600; }
.rc-status { font-size:11px; line-height:1.8; color:#b2c2d8; text-align:center; margin-top:16px; }
.rc-info { margin:20px auto 0; text-align:center; color:#b4bcc7; font-size:11px; line-height:1.9; }
.rc-info summary { min-height:44px; padding:12px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; }
.rc-info p { max-width:420px; margin:14px auto; }
.rc-sr { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; white-space:nowrap; }
.rc-rank:has(input:focus-visible),.rc-package:has(input:focus-visible) { outline:2px solid #e1e9f5; outline-offset:4px; }
.reading-checkout button:focus-visible,.rc-info summary:focus-visible { outline:2px solid #e1e9f5; outline-offset:3px; }
@media(max-width:359px) { .reading-checkout { padding-inline:16px; }.rc-rank { grid-template-columns:90px minmax(0,1fr); padding:12px; gap:12px; }.rc-rank img { width:90px; height:140px; }.rc-rank-copy>b { font-size:19px; }.rc-condition { font-size:11px; }.reading-checkout h2 { font-size:23px; } }