:root{
  --bg:#F2E8D2;
  --surface:#fffdf8;
  --surfaceAlt:#fffaf1;
  --text:#141414;
  --textSoft:#3A2216;
  --muted:#7A4624;
  --line:rgba(58,34,22,.14);
  --lineStrong:rgba(58,34,22,.2);
  --accent:#0F4C4C;
  --accentHover:#0b3b3b;
  --gold:#C49440;
  --goldSoft:rgba(196,148,64,.12);
  --radius:18px;
  --max:860px;
  --shadow:0 14px 34px rgba(20,20,20,.08);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"loos-normal", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  line-height:1.55;
}

.top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  max-width:1120px;
  margin:0 auto;
  padding:22px 24px 14px;
}

.brand{display:flex; align-items:center; text-decoration:none}
.logo{
  display:block;
  width:clamp(190px, 19vw, 215px);
  height:auto;
}

.topNav{display:flex; gap:18px; flex-wrap:wrap}
.topNav a{
  color:var(--textSoft);
  text-decoration:none;
  font-weight:600;
}
.topNav a:hover{color:var(--accent)}

.langSwitch{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--muted);
}
.langSwitch a{
  color:var(--textSoft);
  text-decoration:none;
  font-weight:700;
}
.langSwitch a.active,
.langSwitch a:hover{color:var(--accent)}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:26px 22px 28px;
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  background:var(--surface);
  box-shadow:var(--shadow);
}

.h1{
  margin:0 0 6px;
  font-size:34px;
  letter-spacing:-0.3px;
  color:var(--text);
}

.sub{margin:0 0 20px; color:var(--textSoft)}

.form{display:grid; gap:10px}
.label{font-size:13px; color:var(--textSoft); font-weight:600}
.input{
  padding:12px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:15px;
  background:#fff;
  color:var(--text);
}
.input:focus{
  outline:2px solid rgba(15,76,76,.2);
  border-color:rgba(15,76,76,.45);
}

.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surfaceAlt);
  cursor:pointer;
  font-weight:600;
  color:var(--textSoft);
  text-decoration:none;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.btn:hover{
  border-color:var(--lineStrong);
  background:#fff;
  color:var(--text);
}
.btn.primary:hover{
  background:var(--accentHover);
  border-color:var(--accentHover);
  color:#fff;
}
.btn.disabled,
.btn:disabled{
  cursor:not-allowed;
  color:var(--muted);
  background:#f4efe3;
}

.divider{height:1px; background:var(--line); margin:18px 0}

.link{color:var(--textSoft); text-decoration:none; font-weight:600}
.link:hover{text-decoration:underline}

.alert{
  background:var(--goldSoft);
  border:1px solid rgba(196,148,64,.28);
  padding:10px 12px;
  border-radius:10px;
  margin:0 0 12px;
  color:var(--textSoft);
}

.rules{
  margin-top:16px;
  background:var(--surfaceAlt);
  border:1px solid var(--line);
  padding:14px 16px;
  border-radius:var(--radius);
  color:var(--textSoft);
  font-size:14px;
  box-shadow:0 8px 22px rgba(20,20,20,.05);
}

.foot{
  margin-top:16px;
  color:var(--muted);
  font-size:13px;
}
.foot a{color:var(--textSoft); text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (max-width:720px){
  .top{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:14px 18px;
  }
  .brand{grid-column:1 / -1}
  .logo{width:min(210px, 64vw)}
  .topNav{gap:14px}
  .h1{font-size:28px}
  .card{padding:24px}
}

/* extras for account + subscribe */
.small{font-size:14px;color:var(--muted)}
.hint{font-size:12px;color:var(--muted);margin-top:-4px}

.divider{height:1px;background:var(--line);margin:18px 0}

.status{
  padding:10px 12px;
  border-radius:10px;
  margin:0 0 14px;
  font-size:14px;
}
.status.ok{background:rgba(15,76,76,.08);border:1px solid rgba(15,76,76,.18);color:var(--accent)}
.status.bad{background:rgba(196,148,64,.12);border:1px solid rgba(196,148,64,.24);color:var(--textSoft)}

.kv{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:14px 0;
}
.kv div{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.kv span{color:var(--muted);font-size:13px}
.kv strong{font-weight:700}

.debug{margin-top:12px}
.debug summary{cursor:pointer;color:var(--muted)}
.debug pre{
  margin:10px 0 0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  overflow:auto;
  font-size:12px;
}

.ctaRow{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}
.tiny{margin-top:14px;color:var(--muted);font-size:12px}

/* pricing inside subscribe */
.pricing{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:12px;
}
.plan{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  position:relative;
  background:#fff;
  box-shadow:0 10px 24px rgba(20,20,20,.05);
}
.plan.best{
  border:2px solid var(--gold);
  box-shadow:0 14px 28px rgba(20,20,20,.08);
}
.badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--gold);
  color:var(--text);
  padding:6px 14px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
}
.price{font-size:28px;font-weight:700;margin:8px 0}
.price span{font-size:13px;color:var(--muted);font-weight:400}
.muted{color:var(--muted);font-size:13px;margin-bottom:12px}

@media (max-width:720px){
  .pricing{grid-template-columns:1fr}
}