Выровнять FAQ и анимировать раскрытие

Reviewed-on: Rosetta/landing#3

public/support/index.html

@@ -209,13 +209,26 @@
       }
 
       details {
+        display: grid;
+        grid-template-rows: auto 0fr;
         padding: 19px 20px;
         border: 1px solid #dbe2ee;
         border-radius: 8px;
         background: #ffffff;
+        overflow: hidden;
+        transition: grid-template-rows 260ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease;
+      }
+
+      details[open] {
+        grid-template-rows: auto 1fr;
       }
 
       summary {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) 28px;
+        gap: 12px;
+        align-items: center;
+        min-height: 28px;
         cursor: pointer;
         color: #1d293d;
         font-size: 17px;
@@ -227,23 +240,53 @@
         display: none;
       }
 
+      summary::marker {
+        content: "";
+      }
+
       summary::after {
-        float: right;
+        display: grid;
+        width: 28px;
+        height: 28px;
+        place-items: center;
         color: #075ed3;
         content: "+";
-        font-size: 22px;
+        font-size: 26px;
         font-weight: 500;
-        line-height: 0.8;
+        line-height: 1;
+        transform: rotate(0deg);
+        transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
       }
 
       details[open] summary::after {
-        content: "-";
+        transform: rotate(45deg);
       }
 
-      details p {
+      details > p {
-        margin: 14px 0 0;
+        display: block;
+        min-height: 0;
+        margin: 0;
+        overflow: hidden;
         color: #526176;
         font-size: 15px;
+        opacity: 0;
+        transform: translateY(-4px);
+        transition: opacity 140ms ease, transform 180ms ease, margin 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
+      }
+
+      details[open] > p {
+        margin: 14px 0 0;
+        opacity: 1;
+        transform: translateY(0);
+        transition-delay: 70ms;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        details,
+        summary::after,
+        details > p {
+          transition: none;
+        }
       }
 
       .contact-panel {