/* long-form prose (About, Privacy) */
.prose{ max-width: 720px; margin: 0 auto; }
.prose h2{ font-size: clamp(22px,2.6vw,28px); margin-top: 44px; margin-bottom: 14px; }
.prose h2:first-child{ margin-top: 0; }
.prose p{ font-size: 16px; color: var(--ink-soft); margin-bottom: 16px; line-height: 1.7; }
.prose ul{ margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.prose li{ font-size: 16px; color: var(--ink-soft); margin-bottom: 8px; line-height: 1.6; }
.prose strong{ color: var(--ink); }
.prose .updated{
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint);
  margin-bottom: 36px; display:block;
}
.prose .callout{
  background: var(--mist); border-radius: var(--radius-m);
  padding: 18px 20px; font-size: 14.5px; color: var(--ink-soft); margin: 24px 0;
}

/* FAQ accordion */
.faq-list{ max-width: 760px; margin: 0 auto; }
.faq-item{
  border-bottom: 1px solid var(--mist-line);
}
.faq-item:first-child{ border-top: 1px solid var(--mist-line); }
.faq-q{
  width: 100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: 22px 4px; font-size: 16px; font-weight: 600; color: var(--ink);
}
.faq-q .plus{
  flex-shrink:0; width: 22px; height:22px; position:relative;
}
.faq-q .plus::before, .faq-q .plus::after{
  content:""; position:absolute; background: var(--green); border-radius:2px;
  transition: transform .2s var(--ease);
}
.faq-q .plus::before{ width:14px; height:2px; top:10px; left:4px; }
.faq-q .plus::after{ width:2px; height:14px; top:4px; left:10px; }
.faq-item.open .faq-q .plus::after{ transform: rotate(90deg); opacity:0; }
.faq-a{
  max-height:0; overflow:hidden;
  transition: max-height .25s var(--ease);
}
.faq-a p{ padding: 0 4px 20px; font-size: 15px; color: var(--ink-soft); line-height:1.65; max-width: 640px; }
.faq-item.open .faq-a{ max-height: 300px; }

.faq-groups{ display:flex; flex-direction:column; gap:48px; }
.faq-group h3{ font-size:14px; font-family: var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color: var(--green); margin-bottom:10px; }

/* value grid (careers/about) */
.value-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top: 44px;
}
.value-card{
  border:1px solid var(--mist-line); border-radius: var(--radius-m); padding: 26px 22px;
}
.value-card .ic{
  width:42px; height:42px; border-radius:12px; background: var(--mist); color: var(--green);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.value-card h4{ font-size:16px; margin-bottom:8px; }
.value-card p{ font-size:13.5px; color: var(--ink-soft); line-height:1.55; }
@media (max-width: 780px){ .value-grid{ grid-template-columns:1fr; } }

/* empty state (blog, careers listings) */
.empty-state{
  text-align:center; padding: 64px 24px;
  border: 1.5px dashed var(--mist-line); border-radius: var(--radius-l);
  max-width: 560px; margin: 44px auto 0;
}
.empty-state .ic{
  width:52px; height:52px; border-radius:14px; background: var(--mist); color: var(--green);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 18px;
}
.empty-state h3{ font-size:19px; margin-bottom:8px; }
.empty-state p{ font-size:14.5px; color: var(--ink-soft); }

/* contact page */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:start; }
.contact-card{
  border:1px solid var(--mist-line); border-radius: var(--radius-m); padding: 24px;
  display:flex; gap:16px; align-items:flex-start; margin-bottom:16px;
}
.contact-card .ic{
  width:40px; height:40px; border-radius:11px; background: var(--mist); color: var(--green);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.contact-card h4{ font-size:15px; margin-bottom:4px; }
.contact-card p{ font-size:14px; color: var(--ink-soft); }
.contact-card a{ color: var(--green); font-weight:600; }

.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding: 12px 14px; border-radius: 10px; border:1.5px solid var(--mist-line);
  font-family: var(--font-body); font-size:14.5px; color: var(--ink); background: var(--white);
  transition: border-color .15s var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:none; border-color: var(--green);
}
.form-field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size:12.5px; color: var(--ink-faint); margin-top:10px; }

/* simple platform cards (android/iphone/download) */
.platform-hero-icon{
  width:72px; height:72px; border-radius:20px; background: var(--mist); color: var(--green);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 20px;
}
.qr-card{
  border: 1px solid var(--mist-line); border-radius: var(--radius-m);
  padding: 24px; display:flex; align-items:center; gap:18px; max-width:420px; margin: 32px auto 0;
}
.qr-box{
  width:84px; height:84px; border-radius:12px; background: var(--mist);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color: var(--ink-faint);
}
.qr-card p{ font-size:13.5px; color: var(--ink-soft); margin:0; }

@media (max-width: 780px){ .contact-grid{ grid-template-columns:1fr; } }