/* Shared page geometry: one content width and responsive gutter across the site. */
:root {
  --page-width: 1280px;
  --page-gutter: 32px;
  --section-space: 72px;
  --layout-gap: 28px;
}
html { scrollbar-gutter: stable; }
body { min-width: 0; }
body .container {
  width: calc(100% - var(--page-gutter) * 2);
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: 0;
}
main > section[class] { padding-block: var(--section-space); }
main > section.category-section { padding-block: 24px; }
main .section-header { margin-bottom: 36px; }
main .container > :is(
  .stats-grid, .featured-grid, .partner-grid, .faq-list, .video-grid,
  .contact-grid, .speed-grid, .process-grid, .commission-grid, .yearly-grid,
  .summary-grid, .rating-grid, .testimonial-grid, .map-placeholder,
  .changelog-list, .content-block, .article-container, .post-body, .cta-box
) { width: 100%; max-width: none; margin-inline: 0; }
/* Inline section wrappers use the same outer alignment. */
main .container > div[style*="max-width"] { max-width: none !important; width: 100%; }
main :is(.plan-card, .pricing-card, .security-card) { max-width: none; min-width: 0; }
main :is(.blog-grid, .related-grid, .popular-grid, .yearly-grid,
  .summary-grid, .contact-grid, .video-grid, .testimonial-grid) { gap: var(--layout-gap); }
main :is(.container, .article-container, .article-body, .post-body, .content-block) { overflow-wrap: anywhere; }
main .container > *, main [class$="-grid"] > *, .footer-wrap > * { min-width: 0; }
main img { max-width: 100%; }
.article-hero-img img { max-height: 460px; object-fit: contain; }
main .article-body, main .post-body { line-height: 1.85; }
main .post-body { padding: 40px; }
main :is(pre, .table-wrap) { max-width: 100%; overflow-x: auto; }
main .article-body > table { display: block; max-width: 100%; overflow-x: auto; }
.navbar .nav-inner { gap: 16px; flex-wrap: wrap; }
.navbar .nav-links { gap: 20px; flex-wrap: wrap; }
.footer { padding-block: 48px 28px; }
.footer .footer-wrap { gap: 32px; }
@media (max-width: 1024px) {
  :root { --page-gutter: 24px; --section-space: 56px; --layout-gap: 24px; }
  .footer .footer-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  :root { --page-gutter: 20px; --section-space: 40px; --layout-gap: 20px; }
  .navbar .nav-inner { flex-direction: column; align-items: center; }
  .navbar .nav-links { justify-content: center; gap: 12px 16px; }
  main .section-header { margin-bottom: 28px; }
  main .post-body { padding: 24px; }
  main .container > div[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 480px) {
  :root { --page-gutter: 16px; --layout-gap: 16px; }
  main .post-body { padding: 20px 16px; }
  main .container > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .footer .footer-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer .bottom-bar { align-items: flex-start; }
  .footer .bottom-bar .links { flex-wrap: wrap; gap: 12px; }
}

main :is(h1, .section-title) { text-wrap: balance; }
main .article-wrap { grid-template-columns: minmax(0, 1fr) 300px; }
main .article-wrap > * { min-width: 0; }
main :is(.aug12-compare-box, .aug14-ktp-box) ul li {
  display: block; position: relative; padding-left: 24px;
}
main :is(.aug12-compare-box, .aug14-ktp-box) ul li::before { position: absolute; left: 0; }
@media (max-width: 1024px) {
  main .article-wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  main article.article-body { padding: 24px 16px; }
}

/* Sections follow the shared responsive page container. */
main, main > section { width: 100%; max-width: none; }
main .container > :is(.category-grid, .article-wrap, .blog-grid, .popular-grid,
  .related-grid, .hero-grid, .pricing-grid, .plans-grid) {
  width: 100%; max-width: none; margin-inline: 0;
}

/* Protocol illustration aligns with the complete four-card grid. */
.protocol-section .protocol-flex {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr);
  column-gap: 50px;
  row-gap: 0;
  align-items: stretch;
}
.protocol-section .protocol-right { display: contents; }
.protocol-section .protocol-right > .section-header { grid-column: 1; grid-row: 1; }
.protocol-section .protocol-right > p { grid-column: 1; grid-row: 2; }
.protocol-section .protocol-grid { grid-column: 1; grid-row: 3; margin-top: 0; }
.protocol-section .protocol-left {
  grid-column: 2; grid-row: 3; min-width: 0;
  position: relative; overflow: hidden; border-radius: 20px;
}
.protocol-section .protocol-left img {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
@media (max-width: 1024px) {
  .protocol-section .protocol-flex { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .protocol-section .protocol-right > .section-header,
  .protocol-section .protocol-right > p,
  .protocol-section .protocol-grid { grid-column: 1; }
  .protocol-section .protocol-left { grid-column: 1; grid-row: 4; margin-top: 24px; }
  .protocol-section .protocol-left img { position: static; height: auto; object-fit: contain; }
}

/* Match the about image frame to the full adjacent text column. */
.about-section .about-grid { align-items: stretch; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-section .about-visual { position: relative; min-width: 0; }
.about-section .about-visual img {
  position: absolute; inset: 20px;
  width: calc(100% - 40px); height: calc(100% - 40px);
  object-fit: cover;
}
@media (max-width: 1024px) {
  .about-section .about-grid { grid-template-columns: minmax(0, 1fr); }
  .about-section .about-visual img { position: static; width: 100%; height: auto; }
}

/* The refreshed landscape photo meets the text column without an inset frame. */
.about-section .about-visual { padding: 0; box-shadow: 0 8px 28px rgba(23,35,55,.06); }
.about-section .about-visual img { inset: 0; width: 100%; height: 100%; border-radius: 23px; object-position: center; }
@media (max-width: 1024px) {
  .about-section .about-visual img { height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
}