/* Selectable About template only. */
.vs360-about { color: var(--vs360-color-text); overflow-x: clip; padding-block: 1rem 0; }
.vs360-about__breadcrumb { align-items: center; display: flex; font-size: 0.875rem; gap: 0.65rem; margin-block: 0.5rem 1.5rem; }
.vs360-about__breadcrumb a { color: var(--vs360-color-primary); }
.vs360-about h1,
.vs360-about h2,
.vs360-about h3 { color: var(--vs360-color-primary); line-height: 1.2; }
.vs360-about h2 { font-size: clamp(1.55rem, 3vw, 2rem); text-align: center; }
.vs360-about h2::after { background: var(--vs360-color-discount); content: ""; display: block; block-size: 3px; inline-size: 2.5rem; margin: 0.5rem auto 1rem; }
.vs360-about-hero { align-items: center; display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.vs360-about-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-block: 0 1rem; }
.vs360-about-hero p { color: var(--vs360-color-muted); font-size: 1.075rem; line-height: 1.7; }
.vs360-about-button { align-items: center; background: var(--vs360-color-secondary); border: 2px solid var(--vs360-color-secondary); border-radius: 0.5rem; color: #fff; display: inline-flex; font-weight: 750; justify-content: center; min-block-size: 44px; padding: 0.7rem 1.25rem; text-decoration: none; }
.vs360-about-button--outline { background: transparent; color: var(--vs360-color-secondary); }
.vs360-about-hero__media,
.vs360-about-reasons__media { border-radius: 0.75rem; display: block; overflow: hidden; }
.vs360-about-hero__media img { aspect-ratio: 16 / 10; block-size: 100%; inline-size: 100%; object-fit: contain; }
.vs360-about-story { margin: clamp(2rem, 5vw, 3.5rem) auto 1.5rem; max-inline-size: 58rem; text-align: center; }
.vs360-about-story p { line-height: 1.65; }
.vs360-about-pillars,
.vs360-about-values > div { display: grid; gap: 1rem; }
.vs360-about-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vs360-about-values { margin-block: 2rem; }
.vs360-about-values > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vs360-about-card { align-items: center; border: 1px solid var(--vs360-color-border); border-radius: 0.75rem; box-shadow: var(--vs360-shadow-sm); display: flex; gap: 1rem; min-inline-size: 0; padding: 1.25rem; }
.vs360-about-card svg { color: var(--vs360-color-primary); flex: 0 0 4rem; fill: none; inline-size: 4rem; stroke: currentcolor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.vs360-about-card h3 { font-size: 1rem; margin: 0 0 0.35rem; }
.vs360-about-card p { color: var(--vs360-color-muted); font-size: 0.875rem; line-height: 1.45; margin: 0; }
.vs360-about-reasons { align-items: stretch; background: var(--vs360-color-light); border-radius: 1rem; display: grid; gap: 2rem; grid-template-columns: 1fr 0.9fr; margin-block: 2rem; padding: 1rem; }
.vs360-about-reasons__media img { block-size: 100%; inline-size: 100%; object-fit: contain; }
.vs360-about-reasons > div { align-self: center; padding: 1rem; }
.vs360-about-reasons h2 { text-align: start; }
.vs360-about-reasons h2::after { margin-inline: 0; }
.vs360-about-reasons ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.vs360-about-reasons li { align-items: center; display: flex; gap: 0.65rem; margin-block: 0.65rem; }
.vs360-about-reasons li span { align-items: center; background: var(--vs360-color-secondary); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 1.35rem; block-size: 1.35rem; justify-content: center; }
.vs360-about-product-fallback { align-items: center; background: #fff; display: flex; gap: 0.5rem; justify-content: center; min-block-size: 18rem; padding: 1rem; }
.vs360-about-product-fallback img { block-size: auto; inline-size: min(31%, 12rem); object-fit: contain; }
.vs360-about-neutral { align-items: center; background: linear-gradient(135deg, #f2f5f7, #e6e3f8); color: var(--vs360-color-primary); display: flex; font-size: clamp(1.5rem, 5vw, 3rem); font-weight: 900; justify-content: center; min-block-size: 18rem; }
.vs360-about-process { margin-block: 2rem; }
.vs360-about-process ol { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }
.vs360-about-process li { min-inline-size: 0; padding: 0.75rem 1rem; position: relative; }
.vs360-about-process li:not(:last-child)::after { border-block-start: 2px dashed var(--vs360-color-border); content: ""; inset-block-start: 2.75rem; inset-inline: 4rem -1rem; position: absolute; z-index: -1; }
.vs360-about-process li > div { align-items: center; background: linear-gradient(145deg, #fff, #f4f6ff); border: 1px solid #d8dcef; border-radius: 50%; box-shadow: 0 0.35rem 1rem rgb(16 8 102 / 8%); display: grid; block-size: 4rem; inline-size: 4rem; justify-items: center; overflow: hidden; place-content: center; position: relative; }
.vs360-about-process li > div > svg { block-size: 2.25rem !important; display: block !important; fill: none; inset: auto !important; margin: 0 !important; max-block-size: 2.25rem !important; max-inline-size: 2.25rem !important; overflow: visible; position: static !important; transform: none !important; inline-size: 2.25rem !important; stroke: var(--vs360-color-primary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; vector-effect: non-scaling-stroke; }
.vs360-about-process li > span { color: var(--vs360-color-discount); display: block; font-weight: 850; margin-block-start: 0.6rem; }
.vs360-about-process h3 { font-size: 1rem; margin: 0.25rem 0; }
.vs360-about-process p { color: var(--vs360-color-muted); font-size: 0.875rem; margin: 0; }
.vs360-about-trust { background: var(--vs360-color-primary); border-radius: 0.75rem; color: #fff; padding: 1.5rem; text-align: center; }
.vs360-about-trust span { color: var(--vs360-color-discount); font-size: 3rem; font-weight: 900; line-height: 0.5; }
.vs360-about-trust h2 { color: #fff; margin: 0; }
.vs360-about-trust h2::after { display: none; }
.vs360-about-trust p { margin-block-end: 0; }
.vs360-about-existing { margin: 2rem auto; max-inline-size: 58rem; }
.vs360-about-existing :where(img, iframe, video, embed, object) { max-inline-size: 100%; }
.vs360-about-existing .wp-block-table { overflow-x: auto; }
.vs360-about-final { align-items: center; background: var(--vs360-color-light); border-radius: 0.75rem; display: flex; gap: 1rem; justify-content: space-between; margin-block: 1.25rem; padding: 1rem 1.5rem; }
.vs360-about-final h2 { font-size: 1.35rem; margin: 0; text-align: start; }
.vs360-about-final h2::after { display: none; }
.vs360-about-final > div { display: flex; gap: 0.75rem; }
.vs360-about .vs360-home-benefits { inline-size: 100%; }
.vs360-about .vs360-home-benefits { background: #fff; border: 1px solid var(--vs360-color-border); border-radius: 0.75rem; margin-block: 1.25rem; }
.vs360-about .vs360-benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vs360-about .vs360-benefit { align-items: center; color: var(--vs360-color-primary); display: flex; font-size: 0.875rem; gap: 0.6rem; min-block-size: 64px; padding: 0.75rem; }
.vs360-about .vs360-benefit + .vs360-benefit { border-inline-start: 1px solid var(--vs360-color-border); }
.vs360-about .vs360-benefit svg { fill: none; flex: 0 0 30px; inline-size: 30px; stroke: var(--vs360-color-secondary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

@media (max-width: 63.9375rem) {
  .vs360-about-values > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs360-about-process ol { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
  .vs360-about-process li::after { display: none; }
}

@media (max-width: 47.9375rem) {
  .vs360-about { inline-size: min(100% - 2rem, var(--vs360-container-lg)); padding-block-end: max(4.5rem, env(safe-area-inset-bottom)); }
  .vs360-about-hero { grid-template-columns: 1fr; text-align: center; }
  .vs360-about-hero h1 { font-size: clamp(1.65rem, 8vw, 2.2rem); }
  .vs360-about-hero .vs360-about-button { inline-size: 100%; }
  .vs360-about-hero__media img { aspect-ratio: auto; max-block-size: 32rem; }
  .vs360-about-pillars { grid-template-columns: 1fr; }
  .vs360-about-card { padding: 1rem; }
  .vs360-about-card svg { flex-basis: 3.5rem; inline-size: 3.5rem; }
  .vs360-about-reasons { grid-template-columns: 1fr; padding: 0.75rem; }
  .vs360-about-reasons > div { padding: 0.5rem; }
  .vs360-about-reasons .vs360-about-button { inline-size: 100%; }
  .vs360-about-process ol { grid-template-columns: 1fr; }
  .vs360-about-process li { border-inline-start: 2px dashed var(--vs360-color-border); display: grid; gap: 0 0.75rem; grid-template-columns: 4rem 2.5rem 1fr; margin-inline-start: 2rem; padding: 0 0 1.25rem 1rem; }
  .vs360-about-process li > div { grid-row: 1 / 3; }
  .vs360-about-process li > span { margin: 0; }
  .vs360-about-process li h3 { align-self: center; margin: 0; }
  .vs360-about-process li p { grid-column: 2 / 4; }
  .vs360-about-final { align-items: stretch; flex-direction: column; text-align: center; }
  .vs360-about-final h2 { text-align: center; }
  .vs360-about-final > div { flex-direction: column; }
  .vs360-about-final .vs360-about-button { inline-size: 100%; }
  .vs360-about .vs360-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vs360-about .vs360-benefit + .vs360-benefit { border-inline-start: 0; }
  .vs360-about .vs360-benefit:nth-child(even) { border-inline-start: 1px solid var(--vs360-color-border); }
  .vs360-about .vs360-benefit:nth-child(n+3) { border-block-start: 1px solid var(--vs360-color-border); }
}

@media (max-width: 22rem) {
  .vs360-about-values > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .vs360-about * { scroll-behavior: auto !important; transition: none !important; }
}