/* the paywall: the same pearl and deep sea as the door, one clear price, one button */
body[data-screen=pay] #app { max-width:560px; }
.plan { position:relative; overflow:hidden; background:radial-gradient(120% 90% at 85% 0%, var(--sea-2) 0%, var(--sea) 65%); color:var(--on-sea); border-radius:var(--r-lg); padding:26px 22px 22px; margin:14px 0; }
.plan .pearl { --s:58px; position:absolute; inset-inline-end:20px; top:20px; }
.plan-k { font:600 13px var(--body); color:var(--on-sea-soft); letter-spacing:.04em; }
.plan h1 { color:var(--on-sea); font-size:clamp(26px,6vw,34px); margin:6px 0 10px; max-width:9em; }
.price { font:700 44px/1.1 var(--display); background:var(--nacre); -webkit-background-clip:text; background-clip:text; color:transparent; margin:6px 0 14px; }
.incl { list-style:none; margin:0 0 6px; padding:0; display:grid; gap:10px; }
.incl li { position:relative; padding-inline-start:30px; color:var(--on-sea); font-size:16px; line-height:1.6; }
.incl li::before { content:""; position:absolute; inset-inline-start:0; top:7px; width:18px; height:18px; border-radius:50%; background:var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%231E1400' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.plan .main { width:100%; font:700 18px var(--display); border-radius:var(--r); padding:15px 18px; min-height:54px; display:flex; align-items:center; justify-content:center; text-decoration:none; background:var(--brass); color:var(--on-brass); margin-top:20px; box-shadow:0 10px 24px -10px rgba(227,169,58,.6); }
.plan .hint { color:var(--on-sea-soft); text-align:center; margin:12px 0 0; }
#payKeyForm input { font-family:var(--mono); }
.fine a { color:var(--primary); }
.gate-note { background:var(--primary-soft); border-radius:var(--r); padding:12px 16px; margin:8px 0; display:flex; gap:12px; align-items:center; justify-content:space-between; } .gate-note span { font-size:15px; } .gate-note button { margin:0; width:auto; padding:0 16px; min-height:44px; font-size:15px; }
/* the two approved plans: a paid 3-day trial, then monthly. Each says only its price and length; nothing about renewal or limits */
.pay-state { margin:0 0 14px; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.1); color:var(--on-sea); font:600 15px/1.6 var(--body); }
.plans { display:grid; gap:12px; margin-top:20px; }
.pl { position:relative; display:grid; gap:4px; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.18); border-radius:var(--r); padding:16px; }
.pl.rec { border-color:var(--brass); background:rgba(227,169,58,.12); }
.pl-k { font:700 17px var(--display); color:var(--on-sea); }
.pl-tag { position:absolute; inset-inline-end:14px; top:14px; font:700 12px var(--body); color:var(--on-brass); background:var(--brass); border-radius:999px; padding:2px 10px; }
.pl-p { font:700 34px/1.15 var(--display); color:var(--on-sea); } .pl-p small { font:500 15px var(--body); color:var(--on-sea-soft); }
.pl-sar { font:500 13.5px var(--body); color:var(--on-sea-soft); }
.pl-what { margin:4px 0 0; font:400 14.5px/1.6 var(--body); color:var(--on-sea); }
.plan .pl .main { margin-top:12px; }
.plan .pl .main[aria-disabled=true] { background:rgba(255,255,255,.18); color:var(--on-sea-soft); box-shadow:none; cursor:not-allowed; }
.pl-off { margin:6px 0 0; font:500 13px var(--body); color:var(--on-sea-soft); }
@media (min-width:760px) { body[data-screen=pay] #app { max-width:820px; } .plans { grid-template-columns:1fr 1fr; } }
.pl .fld.chk{display:flex;gap:.6rem;align-items:flex-start;margin:.6rem 0;font-size:.95rem}
.pl .fld.chk input{width:1.4rem;height:1.4rem;margin-top:.1rem;flex:none}
.pl-en { font:600 12.5px var(--body); color:var(--on-sea-soft); letter-spacing:.04em; direction:ltr; text-align:start; }
.pl-list { margin:6px 0 4px; padding-inline-start:18px; display:grid; gap:3px; font:400 14px/1.5 var(--body); color:var(--on-sea); }
.usage { margin:0 0 14px; } .usage .bar { height:10px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden; } .usage .bar i { display:block; height:100%; background:var(--brass); }
.u-line { margin:8px 0 0; font:600 14.5px/1.6 var(--body); color:var(--on-sea); }
.stg-tools { display:grid; gap:8px; margin-top:14px; } .stg-tools .main { margin-top:0; font-size:15px; min-height:44px; }