.package-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,5cqw,80px); padding:0 var(--page-gutter); min-height:0; }
.package-intro, .package-details { min-height:0; overflow:auto; padding:28px 6px 32px 3px; scrollbar-width:thin; scrollbar-color:var(--line) var(--base); }
.package-eyebrow { margin:0 0 14px; color:var(--accent); font-size:.8rem; }
.package-intro h1 { font-size:clamp(2rem,4.4cqw,4.5rem); line-height:1.02; margin:0 0 20px; }
.testing-note { margin:24px 0 8px; padding:16px 0 16px 16px; border-left:3px solid var(--accent); }
.testing-note strong { font-size:.95rem; }
.testing-note p { color:var(--muted); font-size:.875rem; line-height:1.65; margin:8px 0 0; }
.account-link { padding-left:0; }
.plan-card { padding:24px; border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--panel); }
.plan-top { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.plan-top h2 { font-size:1.7rem; margin:0; }
.plan-period { color:var(--muted); font-size:.8rem; }
.plan-price { margin:22px 0 8px; }
.plan-price strong { font-size:clamp(1.8rem,3.6cqw,3rem); letter-spacing:-.04em; }
.plan-price span { color:var(--muted); font-size:.875rem; }
.plan-terms, .plan-footnote, .package-privacy { color:var(--muted); font-size:.8rem; line-height:1.65; }
.plan-terms { margin:0; }
.plan-benefits { padding-left:20px; margin:20px 0; color:var(--muted); font-size:.9rem; line-height:1.7; }
.plan-benefits li + li { margin-top:8px; }
.plan-benefits strong { color:var(--text); }
.plan-card .primary-action { width:100%; }
.plan-footnote { margin:12px 0 0; }
.included-games { margin-top:16px; border-bottom:1px solid #ffffff25; }
.included-games summary { display:list-item; padding:12px 0; min-height:44px; cursor:pointer; color:var(--text); font-size:.9rem; }
.included-games summary:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.included-games ul { margin:0; padding:0 0 12px; list-style:none; }
.included-games a { display:flex; align-items:center; min-height:44px; padding:8px 0; color:var(--muted); font-size:.85rem; text-decoration:none; }
.included-games a:hover { color:var(--accent); }
.package-privacy { margin:16px 0 0; }
.package-privacy a { display:inline-flex; align-items:center; min-height:44px; }
@container stage (max-width:650px) {
  .package-layout { gap:16px; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  .plan-card { padding:16px; }
  .plan-top { display:block; }
  .plan-top h2 { font-size:1.45rem; }
  .plan-period { display:block; margin-top:5px; }
  .package-intro h1 { font-size:1.85rem; }
}
@container stage (max-height:420px) {
  .package-intro, .package-details { padding-block:16px 24px; }
  .qris-card { padding:16px; }
  .order-code { margin:6px 0 10px; }
  .package-intro h1 { font-size:clamp(1.8rem,3.7cqw,2.6rem); margin-bottom:12px; }
  .package-eyebrow { font-size:.75rem; margin-bottom:10px; }
  .testing-note { margin-top:16px; padding-block:10px; }
  .plan-card { padding:18px; }
  .plan-price { margin-top:14px; }
  .plan-benefits { margin-block:14px; }
}
/* Paid release: account state and the QRIS order. Same panel language as the plan card. */
.access-panel { margin:24px 0 8px; padding:16px 0 16px 16px; border-left:3px solid var(--accent); }
.access-state { margin:0; font-size:.95rem; line-height:1.6; }
.access-panel .action-row { margin:14px 0 6px; }
.promo-form { margin:14px 0 10px; }
.promo-form label { display:block; margin-bottom:7px; font-size:.86rem; font-weight:700; }
.promo-row { display:flex; align-items:center; gap:8px; }
.promo-row input { min-width:0; min-height:44px; flex:1; padding:8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--base); color:var(--text); font:inherit; text-transform:uppercase; }
.promo-row input:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.promo-row button { min-height:44px; }
.promo-form .plan-terms { margin-top:7px; }
.plan-terms.is-error { color:#ffb2a8; }
.qris-card { padding:24px; border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--panel); }
.qris-card h2 { font-size:1.35rem; margin:0; }
.order-code { margin:10px 0 16px; font-size:clamp(1.6rem,3cqw,2.2rem); font-weight:800; letter-spacing:.08em; }
.qris-row { display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:18px; align-items:start; }
.qris-row img { width:100%; height:auto; border-radius:12px; background:#fff; }
.qris-steps { margin:0; padding-left:20px; color:var(--muted); font-size:.85rem; line-height:1.6; }
.qris-steps li + li { margin-top:8px; }
.qris-steps strong { color:var(--text); }
@container stage (max-width:650px) {
  .qris-card { padding:16px; }
  .qris-row { grid-template-columns:minmax(0,120px) minmax(0,1fr); gap:12px; }
  .qris-steps { font-size:.8rem; }
}