/* Product — BrainParser, Figma 844:14193.
   Reuse product typography, buttons, navigation, footer and contact form. */
.parser-page { --parser-panel: #f8f8f8; }
.parser-hero { height: auto; padding-bottom: 200px; }
.parser-hero h1 { font-size: 60px; font-weight: 500; line-height: 1.2; letter-spacing: -1.2px; }
.parser-challenges .section-title { letter-spacing: -2.4px; }
.parser-challenges .challenge-card { display: flex; flex-direction: column; justify-content: center; border-radius: 6px; }
.parser-challenges .challenge-card h3 { margin-bottom: 10px; }
.parser-challenges .challenge-card > p:not(.parser-challenge-note) { letter-spacing: -1.19px; }
.parser-challenges .parser-challenge-note { padding: 8px 16px; margin-top: 23px; border-radius: 4px; background: var(--pale); font-size: 18px; font-weight: 600; letter-spacing: -.72px; }
.parser-feature-list { display: grid; gap: 100px; margin-top: 80px; }
.parser-number { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 26px; border-radius: 4px; background: var(--ink); color: white; font-size: 24px; font-weight: 700; line-height: 1.45; }
.parser-feature-heading h3 { font-size: 36px; line-height: 1.2; letter-spacing: -1.44px; }
.parser-feature-heading .doc-lead { margin-top: 16px; }
.parser-feature-body { display: grid; grid-template-columns: minmax(0,600fr) minmax(0,564fr); gap: 36px; margin-top: 36px; }
.parser-feature-image { position: relative; aspect-ratio: 600 / 380; overflow: hidden; border-radius: 4px; background: var(--parser-panel); }
.parser-feature-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.parser-private-image img { height: 100.54%; object-fit: fill; }
.parser-hwp-image img { height: 100.21%; object-fit: fill; }
.parser-feature-details { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; }
.parser-checklist { display: flex; flex-direction: column; gap: 16px; }
.parser-checklist li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -.64px; }
.parser-checklist img { flex: none; width: auto; height: auto; }
.parser-checklist span { min-width: 0; }
.parser-note-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.parser-note-grid article { padding: 36px; border-radius: 4px; background: var(--parser-panel); }
.parser-note-grid h4 { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.6px; }
.parser-note-grid p { margin-top: 10px; color: #4a4a4a; font-size: 17px; line-height: 1.6; letter-spacing: -.68px; }
.parser-benchmark .doc-lead, .parser-formats .doc-lead { margin-top: 16px; }
.parser-benchmark .button { margin-top: 40px; }
.parser-benchmark-scroll { margin-top: 80px; overflow-x: auto; }
.parser-benchmark-image { position: relative; aspect-ratio: 1280 / 476; overflow: hidden; }
.parser-benchmark-image img { position: absolute; width: 102.73%; height: 104.06%; max-width: none; left: -1.36%; top: -1.93%; }
.parser-benchmark-note { margin-top: 36px; color: rgb(0 0 0 / 70%); text-align: center; font-size: 17px; line-height: 1.6; letter-spacing: -.68px; }
.parser-format-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 80px; text-align: center; }
.parser-format-badges { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; height: 153px; margin-bottom: 36px; padding: 20px; border-radius: 4px; background: #f7f7f7; }
.parser-format-badges > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.parser-format-badges span { padding: 0 13px 5px 11px; border: 1px solid #d1d5db; border-radius: 999px; background: white; color: #10131c; font-size: 18px; line-height: 1.6; letter-spacing: -.54px; }
.parser-format-grid p { margin-top: 12px; color: rgb(0 0 0 / 70%); font-size: 17px; line-height: 1.6; letter-spacing: -.68px; }
.parser-deployment { padding-block: 140px; background: #10131c; }
.parser-deployment .doc-center-heading h2 { color: white; font-weight: 600; line-height: 1.3; }
.parser-deployment .doc-lead { color: rgb(255 255 255 / 87%); font-weight: 300; }
.parser-deployment-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 60px; }
.parser-deployment-card { display: flex; flex-direction: column; gap: 36px; min-width: 0; padding: 36px; border-radius: 4px; background: white; }
.parser-deployment-art { position: relative; display: flex; flex: none; min-height: 0; align-items: center; justify-content: center; aspect-ratio: 520 / 233; }
.parser-cloud-image, .parser-onprem-image { position: relative; flex: none; overflow: hidden; }
.parser-cloud-image { width: 100%; aspect-ratio: 520 / 231.869; }
.parser-onprem-image { width: 104.539%; aspect-ratio: 543.602 / 257.912; }
.parser-cloud-image img { position: absolute; width: 121.57%; height: 136.32%; max-width: none; left: -10.79%; top: -17.92%; }
.parser-onprem-image img { position: absolute; width: 124.57%; height: 131.28%; max-width: none; left: -12.28%; top: -15.64%; }
.parser-deployment-copy p { margin-top: 10px; font-size: 17px; line-height: 1.6; letter-spacing: -.68px; color: rgb(0 0 0 / 70%); }
.parser-deployment-card .parser-checklist { gap: 17px; margin-top: auto; }

@media (max-width: 1300px) {
  .parser-feature-body { gap: 24px; }
  .parser-note-grid article, .parser-deployment-card { padding: 28px 24px; }
  .parser-format-badges { padding-inline: 12px; }
  .parser-format-badges span { padding-inline: 10px; }
  .parser-format-grid br, .parser-deployment-copy br { display: none; }
}
@media (max-width: 1024px) {
  .parser-hero { padding-bottom: 160px; }
  .parser-hero h1 { font-size: 54px; }
  .parser-challenges { padding-block: 120px; }
  .parser-challenges .challenge-card { padding: 28px 24px; }
  .parser-feature-list { gap: 80px; margin-top: 56px; }
  .parser-feature-heading h3 { font-size: 30px; }
  .parser-feature-body { grid-template-columns: 1fr; gap: 32px; }
  .parser-feature-image { width: min(100%,600px); }
  .parser-feature-details { gap: 28px; }
  .parser-benchmark-scroll, .parser-format-grid { margin-top: 56px; }
  .parser-format-grid { grid-template-columns: 1fr; gap: 40px; }
  .parser-format-grid article { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: center; text-align: left; }
  .parser-format-grid h3 { align-self: end; }
  .parser-format-grid p { align-self: start; }
  .parser-format-badges { grid-row: span 2; margin-bottom: 0; }
  .parser-deployment { padding-block: 100px; }
  .parser-deployment-grid { margin-top: 48px; }
}
@media (max-width: 760px) {
  .parser-hero { min-height: 0; padding-bottom: 100px; }
  .parser-hero h1 { font-size: clamp(28px,6.4vw,48px); letter-spacing: -.6px; }
  .parser-challenges { padding-block: 88px; }
  .parser-challenges .section-title { letter-spacing: -1.2px; }
  .parser-challenges .parser-challenge-note { font-size: 16px; }
  .parser-feature-list { gap: 72px; margin-top: 40px; }
  .parser-number { margin-bottom: 22px; }
  .parser-feature-heading h3 { font-size: 26px; line-height: 1.35; letter-spacing: -1.04px; }
  .parser-feature-body { margin-top: 28px; gap: 28px; }
  .parser-checklist li { align-items: flex-start; line-height: 1.5; }
  .parser-note-grid { grid-template-columns: 1fr; gap: 12px; }
  .parser-note-grid article { padding: 24px; }
  .parser-note-grid p { font-size: 16px; }
  .parser-benchmark .button { margin-top: 28px; }
  .parser-benchmark-scroll { margin-top: 40px; }
  .parser-benchmark-image { min-width: 720px; }
  .parser-benchmark-note { margin-top: 24px; font-size: 14px; }
  .parser-format-grid { margin-top: 40px; }
  .parser-format-grid article { display: block; text-align: center; }
  .parser-format-badges { margin-bottom: 24px; }
  .parser-format-grid p { font-size: 16px; }
  .parser-deployment { padding-block: 88px; }
  .parser-deployment-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .parser-deployment-card { gap: 28px; padding: 28px 24px; }
  .parser-deployment-copy p { font-size: 16px; }
}