Refine service information and simplify device controls

apps/web/src/style.css

@@ -164,7 +164,7 @@ button:active:not(:disabled) {
 }
 .header-actions {
   display: flex;
-  gap: 20px;
+  gap: 8px;
   align-items: center;
   margin-left: auto;
 }
@@ -3252,7 +3252,12 @@ a.button {
 .modal .create-space {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  margin-top: 18px;
+  gap: 14px;
+}
+.modal .join-form .modal-subtitle,
+.modal .create-space .modal-subtitle {
+  margin: 0;
 }
 .modal .join-form input {
   width: 100%;
@@ -3440,16 +3445,58 @@ a.button {
 .service-info {
   padding: 24px 0 4px;
   font-size: 13px;
-  line-height: 1.8;
 }
-.service-info strong {
+.service-brand {
   font-size: 30px;
   letter-spacing: -0.07em;
 }
 .service-info p {
-  margin: 12px 0;
-  color: var(--muted);
+  margin: 0;
 }
-.service-info small {
+.service-info .service-tagline {
   color: var(--muted);
+  margin-top: 2px;
+}
+.service-intro {
+  margin: 24px 0;
+}
+.service-intro p + p {
+  margin-top: 8px;
+}
+.service-features {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.service-features li {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+.service-features svg {
+  color: var(--muted);
+  flex-shrink: 0;
+  margin-top: 3px;
+}
+.service-features strong {
+  font-size: 14px;
+  font-weight: 500;
+}
+.service-features p {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 5px;
+}
+.service-info-footer {
+  border-top: 1px solid var(--line);
+  padding-top: 18px;
+  margin-top: 28px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--muted);
+  font-size: 12px;
 }