/* Account, subscription and sign-in pages. Same ground and type as the reader. */
:root{
  --ground:#0A0D0F; --surface:#13181B; --raise:#1C2226;
  --ink:#E9EEF0; --muted:#8A979C; --dim:#56646A;
  --accent:#5FD4D6; --accent-dim:#2E7C7E; --warn:#E8B45A; --bad:#E58080; --ok:#6FCF97;
  --rule:rgba(233,238,240,.14);
  --display:"Bodoni Moda",ui-serif,Georgia,serif;
  --body:"Karla",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ground)}
body.acct{min-height:100vh;background:var(--ground);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;display:flex;justify-content:center;padding:clamp(28px,7vh,72px) 18px 48px}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.box{width:100%;max-width:34rem}
.brand{font-family:var(--display);letter-spacing:.42em;text-transform:uppercase;font-size:13px;color:var(--ink);margin-bottom:34px}
.brand a{color:inherit;text-decoration:none}
h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,6vw,44px);line-height:1.08;margin-bottom:14px;text-wrap:balance}
h1 em{font-style:italic;color:var(--accent)}
h2{font-family:var(--display);font-weight:400;font-size:22px;margin:30px 0 12px}
p{font-size:15.5px;line-height:1.65;color:#B9C4C8;font-weight:300;margin-bottom:14px}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:12px}
.small{font-size:12.5px;color:var(--muted);line-height:1.6}

form{margin-top:20px}
label.f{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
input[type=email]{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:2px;padding:13px 14px;outline:none}
input[type=email]:focus{border-color:var(--accent-dim)}
.check{display:flex;gap:12px;align-items:flex-start;margin:16px 0;font-size:14px;line-height:1.55;color:#B9C4C8;font-weight:300;cursor:pointer}
.check input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--rule);
  color:var(--ink);background:none;padding:13px 24px;font:inherit;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;text-decoration:none;cursor:pointer;border-radius:2px;
  transition:background .2s,color .2s,border-color .2s}
.btn:hover{border-color:var(--accent-dim);color:var(--accent)}
.btn.primary{border-color:var(--accent);color:var(--accent)}
.btn.primary:hover{background:var(--accent);color:#06191A}
.btn.quiet{border-color:transparent;color:var(--muted);padding-left:0;padding-right:0}
.btn.quiet:hover{color:var(--accent)}
.btn[disabled]{opacity:.45;pointer-events:none}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}

.or{display:flex;align-items:center;gap:14px;margin:30px 0 20px;color:var(--dim);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 6px}
@media (max-width:480px){.plans{grid-template-columns:1fr}}
.plan{position:relative;display:block;border:1px solid var(--rule);border-radius:3px;padding:18px 18px 16px;cursor:pointer;background:var(--surface);transition:border-color .2s}
.plan input{position:absolute;opacity:0;pointer-events:none}
.plan .t{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.plan .p{font-family:var(--display);font-size:30px;margin:8px 0 2px}
.plan .p small{font-family:var(--body);font-size:13px;color:var(--muted);margin-left:4px}
.plan .n{font-size:12.5px;color:var(--muted)}
.plan .tag{position:absolute;top:-9px;right:12px;background:var(--accent);color:#06191A;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:2px;font-weight:600}
.plan:has(input:checked){border-color:var(--accent)}
.plan:has(input:checked) .t{color:var(--accent)}

.card{border:1px solid var(--rule);border-radius:3px;background:var(--surface);padding:20px 20px 6px;margin-top:22px}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;margin-bottom:14px}
.card dt{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.card dd{font-size:15px;color:var(--ink)}
.note{border-left:2px solid var(--accent);padding:10px 14px;background:rgba(95,212,214,.06);margin:16px 0;font-size:14px;line-height:1.6;color:#C9D3D6}
.note.warn{border-color:var(--warn);background:rgba(232,180,90,.07)}
.note.bad{border-color:var(--bad);background:rgba(229,128,128,.07)}
.note.ok{border-color:var(--ok);background:rgba(111,207,151,.07)}

/* SumUp's card form sits on white — give it a calm white panel of its own */
#paybox{margin-top:20px}
#sumup-card{background:#fff;border-radius:4px;padding:6px;min-height:120px;color:#111}

.foot{margin-top:46px;padding-top:18px;border-top:1px solid var(--rule);display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot .who{margin-left:auto}

/* legal pages */
.legal h2{font-size:20px;margin-top:28px}
.legal p,.legal li{font-size:14.5px}
.legal ul{margin:0 0 14px 20px;color:#B9C4C8;font-weight:300;line-height:1.65}
.fill{background:rgba(232,180,90,.18);color:var(--warn);padding:0 4px;border-radius:2px}