.fqp { margin: 2rem 0; padding: 1.5rem; border: 1px solid #e8d7c9; border-radius: 1rem; color: #393531; background: #fff; }
.fqp h2 { margin: 0 0 .75rem; color: #542701; font-family: 'BeVietnamPro-Bold', Helvetica, Arial, sans-serif; font-size: 1.75rem; line-height: 1.3; }
.fqp h3 { margin: 0 0 .65rem; color: #542701; font-family: 'BeVietnamPro-SemiBold', Helvetica, Arial, sans-serif; font-size: 1.15rem; }
.fqp-eyebrow, .fqp-label { margin: 0 0 .65rem; color: #91420d; font-family: 'BeVietnamPro-SemiBold', Helvetica, Arial, sans-serif; font-size: .85rem; }
.fqp-intro { margin: 0 0 1.5rem; max-width: 55rem; }
.fqp-pattern { max-width: 45rem; margin: 0 auto; padding: 1.25rem; text-align: center; border: 1px solid #d4c6e4; border-radius: .75rem; background: #f7f4fc; }
.fqp-pattern ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.fqp-pattern li { border: 1px solid #d4c6e4; background: #fff; border-radius: .35rem; padding: .35rem .65rem; font-size: .85rem; }
.fqp-pattern > p:last-child { margin: 0; font-size: .9rem; color: #5a514a; }
.fqp-deploy-label { position: relative; margin: 0; padding: 2rem 0 1rem; text-align: center; color: #6a5b50; font-size: .85rem; }
.fqp-deploy-label::before { position: absolute; content: ''; top: 0; left: 50%; height: 1.5rem; border-left: 2px solid #baa38e; }
.fqp-deploy-label::after { position: absolute; content: ''; bottom: 0; left: 50%; height: .6rem; border-left: 2px solid #baa38e; }
.fqp-companies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; padding-top: 1.5rem; position: relative; }
.fqp-companies::before { content: ''; position: absolute; top: 0; left: calc(25% - .5rem); right: calc(25% - .5rem); border-top: 2px solid #baa38e; }
.fqp-company { position: relative; padding: 1.25rem; border: 1px solid #c3d4c5; border-radius: .75rem; background: #f3f8f4; }
.fqp-company::before { content: ''; position: absolute; left: 50%; top: -1.6rem; height: 1.5rem; border-left: 2px solid #baa38e; }
.fqp-company .fqp-label { color: #386341; }
.fqp-company ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; list-style: disc; }
.fqp-company li + li { margin-top: .45rem; }
.fqp figcaption { margin-top: 1rem; font-size: .85rem; color: #5a514a; text-align: center; }
.fqp-detail { margin-top: 1.5rem; padding-top: .65rem; border-top: 1px solid #e8e1da; }
.fqp-detail summary, .fqp-example > summary { color: #91420d; cursor: pointer; font-family: 'BeVietnamPro-SemiBold', Helvetica, Arial, sans-serif; padding: .65rem 0; }
.fqp-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: .75rem 0; }
.fqp-detail p { font-size: .9rem; color: #5a514a; }
.fqp-detail-grid h3 { font-size: 1rem; }
.fqp-example { border: 1px solid #e8d7c9; border-radius: .75rem; padding: .65rem 1.25rem; margin: 1.5rem 0 2.5rem; scroll-margin-top: 12rem; }
.fqp-example > p { margin: .75rem 0; color: #5a514a; }
.fqp-example .fqv { border: 0; border-top: 1px solid #e8e1da; border-radius: 0; padding: 1.5rem 0 .5rem; margin: 1.25rem 0 0; }
.fqp summary:focus-visible, .fqp-example > summary:focus-visible { outline: 3px solid #3266a2; outline-offset: 4px; }
@media (max-width: 640px) {
  .fqp { padding: 1rem; }
  .fqp h2 { font-size: 1.4rem; }
  .fqp-pattern { padding: 1rem; }
  .fqp-deploy-label::after { display: none; }
  .fqp-companies { grid-template-columns: 1fr; gap: 1rem; padding: 0 0 0 1rem; border-left: 2px solid #baa38e; margin-left: .25rem; }
  .fqp-companies::before { display: none; }
  .fqp-company { padding: 1rem; }
  .fqp-company::before { left: -1.15rem; top: 1.5rem; width: 1.1rem; height: 0; border-left: 0; border-top: 2px solid #baa38e; }
  .fqp-detail-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fqp-example { padding: .65rem 1rem; }
}
@media print {
  .fqp { break-inside: avoid; }
  .fqp-detail::details-content, .fqp-example::details-content { content-visibility: visible; }
}