/* FAQ, demo form, footer */

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq-copy { display: grid; gap: 22px; position: sticky; top: calc(var(--nav-h) + 40px); }
.faq-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 500; letter-spacing: -0.01em;
  transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: #fff; }
.qa summary:focus-visible { border-radius: 8px; }
.plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color .3s, border-color .3s, transform .4s var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; margin: -.8px 0 0 -6px; background: var(--c); border-radius: 2px; transition: transform .3s var(--ease), background-color .3s; }
.plus::after { transform: rotate(90deg); }
.qa[open] .plus { background: var(--grad); border-color: transparent; transform: rotate(180deg); }
.qa[open] .plus::before, .qa[open] .plus::after { background: var(--ink); }
.qa[open] .plus::after { transform: rotate(0deg); }
.ans { padding: 0 56px 26px 0; color: var(--muted); max-width: 64ch; }
.qa[open] .ans { animation: ben-in .4s var(--ease); }

/* Demo */
.demo { overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); }
.stage-soft .glow { right: auto; left: -260px; top: 20%; opacity: .8; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.demo-copy { display: grid; gap: 24px; }
.demo-copy .checks { margin-top: 4px; }
.alt-contact { margin-top: 6px; }
.demo-card {
  position: relative; padding: 34px; border-radius: var(--r-lg); background: rgba(17, 16, 19, .92); border: 1px solid var(--line-2);
  display: grid; gap: 16px; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9), 0 0 120px -60px var(--glow);
}
.demo-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(250, 204, 82, .5), transparent 40%, transparent 60%, rgba(250, 6, 73, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.df-title { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 4px; }
.field { display: grid; gap: 7px; align-content: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { font-size: 14px; color: var(--muted); }
.opt { color: var(--dim-text); }
.field input, .field select {
  width: 100%; height: 50px; padding: 0 16px; border-radius: 14px; background: #0a090b; border: 1px solid var(--line-2);
  font-size: 16px; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.field select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%239B959A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.field select option { background: #111013; color: var(--text); }
.field input:hover, .field select:hover { border-color: rgba(255, 255, 255, .28); }
.field input:focus, .field select:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 3px rgba(252, 85, 76, .25); }
.field.has-err input, .field.has-err select { border-color: var(--p); }
.err { min-height: 0; font-size: 13px; color: #ff7a8f; }
.err:empty { display: none; }
.df-submit { width: 100%; margin-top: 6px; }
.df-note:empty { display: none; }
.df-note { padding: 12px 14px; border-radius: 14px; background: rgba(250, 204, 82, .08); border: 1px solid rgba(250, 204, 82, .35); font-size: 14.5px; }
.df-note a { text-decoration: underline; }
.df-fine { color: var(--dim-text); font-size: 13px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 72px 0 calc(32px + env(safe-area-inset-bottom)); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand { display: grid; gap: 16px; align-content: start; }
.foot-brand p { color: var(--muted); max-width: 34ch; font-size: 15px; }
.foot-col { display: grid; gap: 10px; align-content: start; font-size: 15px; }
.foot-col > p { color: var(--dim-text); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.foot-col a { color: var(--muted); transition: color .2s; width: fit-content; }
.foot-col a:hover { color: var(--text); }
/* .foot-base sits inside .wrap, so its divider lines up with the content edge */
.foot-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim-text); font-size: 14px; }
@media (min-width: 900px) { .foot-base { padding-right: 72px; } }

@media (max-width: 899px) {
  .faq-grid, .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .faq-copy { position: static; }
  .ans { padding-right: 0; }
  .demo-card { padding: 24px 20px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .foot-base { flex-direction: column; }
}
.foot-base a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-base a:hover { color: var(--text); }