/* About us page sections (loaded after base.css). Block structure: see patterns/about.html. */
/* Modern About us: shared brand frame, genuine product renders, native system diagram. */
#veda-approved.va-about-modern { --am-teal: #008d97; --am-panel: #e8edef; }
#veda-approved .am-hero { display: grid; grid-template-columns: 51% 49%; min-height: 620px; padding: 64px var(--va-pad) 60px; gap: 0; align-items: center; }
#veda-approved .am-hero-copy { min-width: 0; position: relative; z-index: 2; padding-right: 22px; }
#veda-approved .am-eyebrow { display: flex; align-items: center; gap: 12px; color: #656d72; font-size: 13px; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .06em; }
#veda-approved .am-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--va-red); flex: 0 0 auto; }
#veda-approved .am-hero h1 { margin-top: 31px; color: var(--va-ink); font-size: clamp(49px, 5.6cqw, 82px); line-height: 1.01; letter-spacing: -.05em; }
#veda-approved .am-hero-lead { max-width: 460px; margin-top: 29px; color: #657078; font-size: clamp(21px, 2.1cqw, 30px); line-height: 1.3; letter-spacing: -.02em; }
#veda-approved .am-product-stage { position: relative; min-width: 0; height: 490px; }
/* Keep the product stage at its designed proportions (as at 1920 px) on wide screens, so the converters don't drift apart. */
#veda-approved .am-product-stage { width: 100%; max-width: 713px; justify-self: end; }
#veda-approved .am-product-stage { background: linear-gradient(90deg, transparent, #a9b1b4, transparent) right 0 bottom 8% / 88% 1px no-repeat; }
#veda-approved .am-product-stage::before { content: ""; position: absolute; z-index: 0; inset: 15% -4% 8% 8%; border-radius: 50%; background: radial-gradient(ellipse, #d9e0e3, #e9edef88 50%, transparent 72%); }
#veda-approved .am-product-stage::after { content: ""; position: absolute; z-index: 0; inset: 8% 0 8% 12%; border: 1px solid #d6dddf; border-radius: 22px; background-image: linear-gradient(90deg, transparent 49.8%, #d8e0e466 50%, transparent 50.2%), linear-gradient(transparent 49.8%, #d8e0e466 50%, transparent 50.2%); }
#veda-approved .am-product-stage .wp-block-image { position: absolute; width: auto; }
#veda-approved .am-product-stage .wp-block-image img { width: auto; height: 100%; max-width: none; filter: drop-shadow(8px 16px 12px #263b4222); }
#veda-approved .am-stage-rd11 { z-index: 1; right: 2%; top: 4%; height: 84%; }
#veda-approved .am-stage-rd05 { z-index: 2; left: 3%; bottom: 12%; height: 53%; }
#veda-approved .am-product-tag { position: absolute; z-index: 3; font-size: 11px; letter-spacing: .1em; font-weight: 700; color: #58666f; }
#veda-approved .am-tag-rd05 { left: 9%; bottom: 3%; }
#veda-approved .am-tag-rd11 { right: 4%; bottom: 3%; }
#veda-approved .am-acquisition { display: grid; grid-template-columns: 30% 70%; align-items: center; gap: 0; padding: 34px var(--va-pad); border-top: 1px solid var(--va-line); border-bottom: 1px solid var(--va-line); background: #edf0ef; }
#veda-approved .am-acquisition-logo { display: block; width: min(100%, 235px); }
#veda-approved .am-acquisition-logo :is(a, img) { display: block; width: 100%; max-width: 100%; height: auto; }
#veda-approved .am-acquisition p { max-width: 850px; padding-left: 25px; color: #48565f; font-size: clamp(18px, 1.65cqw, 24px); line-height: 1.45; letter-spacing: -.01em; }
#veda-approved .am-story { padding: 76px var(--va-pad) 78px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
#veda-approved .am-story-item { min-width: 0; }
#veda-approved .am-story h2 { max-width: 430px; margin-bottom: 28px; font-size: clamp(32px, 3.1cqw, 46px); line-height: 1.04; letter-spacing: -.03em; }
#veda-approved .am-story-item::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: 26px; background: var(--va-red); }
#veda-approved .am-story p { max-width: 760px; color: #637078; font-size: clamp(18px, 1.4cqw, 21px); line-height: 1.55; letter-spacing: -.008em; }
#veda-approved .am-story p + p { margin-top: 20px; }
#veda-approved .am-system { padding: 70px var(--va-pad) 76px; background: #e8edef; border-top: 1px solid #d6dfe1; border-bottom: 1px solid #d6dfe1; }
#veda-approved .am-system-intro { max-width: 1070px; margin-bottom: 48px; color: #495b64; font-size: clamp(21px, 2cqw, 29px); line-height: 1.42; letter-spacing: -.017em; }
#veda-approved .am-system h2 { max-width: 1050px; margin-top: 23px; margin-bottom: 42px; color: var(--va-ink); font-size: clamp(34px, 4cqw, 58px); line-height: 1.06; letter-spacing: -.035em; }
#veda-approved .am-benefits { padding: 72px var(--va-pad) 76px; }
#veda-approved .am-benefits h2 { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 36px; font-size: clamp(38px, 4.2cqw, 61px); line-height: 1.05; letter-spacing: -.035em; }
#veda-approved .am-benefits h2::after { content: ""; flex: 0 0 auto; width: 54px; height: 3px; background: var(--va-red); }
#veda-approved .am-benefit-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 50px; counter-reset: benefits; }
#veda-approved .am-benefit-list li { min-width: 0; display: flex; align-items: center; gap: 25px; padding: 26px 0; border-top: 1px solid #d6dddf; counter-increment: benefits; font-size: clamp(22px, 2.25cqw, 32px); line-height: 1.18; font-weight: 700; letter-spacing: -.025em; }
#veda-approved .am-benefit-list li::before { content: "0" counter(benefits); color: var(--va-red); font-size: 12px; font-weight: 700; letter-spacing: .04em; flex: 0 0 25px; }
@media (min-width: 761px) and (max-width: 1199px) {
  #veda-approved .am-hero { min-height: 540px; padding-block: 46px; }
  #veda-approved .am-product-stage { height: 410px; max-width: 597px; }
  #veda-approved .am-stage-rd11 { height: 76%; }
  #veda-approved .am-stage-rd05 { height: 47%; }
  #veda-approved .am-hero h1 { font-size: 5.6cqw; }
  #veda-approved .am-story { gap: 38px; }
}
@media (max-width: 760px) {
  #veda-approved .am-hero { grid-template-columns: 1fr; min-height: 0; padding: 43px var(--va-pad) 31px; }
  #veda-approved .am-eyebrow { font-size: 11px; }
  #veda-approved .am-hero-copy { padding-right: 0; }
  #veda-approved .am-hero h1 { margin-top: 26px; font-size: clamp(44px, 9.6cqw, 69px); letter-spacing: -.045em; }
  #veda-approved .am-hero-lead { margin-top: 24px; font-size: 23px; }
  #veda-approved .am-product-stage { height: clamp(320px, 82cqw, 430px); max-width: none; margin-top: 28px; }
  #veda-approved .am-stage-rd11 { height: 78%; right: 4%; }
  #veda-approved .am-stage-rd05 { height: 49%; left: 5%; }
  #veda-approved .am-product-stage::after { inset: 5% 0 8% 9%; }
  #veda-approved .am-acquisition { grid-template-columns: 1fr; padding-block: 30px; }
  #veda-approved .am-acquisition-logo { display: none; }
  #veda-approved .am-acquisition p { padding-left: 0; font-size: 19px; line-height: 1.45; }
  #veda-approved .am-story { grid-template-columns: 1fr; gap: 39px; padding: 43px var(--va-pad) 48px; }
  #veda-approved .am-story h2 { margin-bottom: 22px; font-size: 36px; }
  #veda-approved .am-story p { font-size: 18px; }
  #veda-approved .am-story-item::before { margin-bottom: 21px; }
  #veda-approved .am-system { padding: 42px var(--va-pad) 45px; }
  #veda-approved .am-system-intro { margin-bottom: 35px; font-size: 21px; }
  #veda-approved .am-system h2 { margin-top: 19px; margin-bottom: 30px; font-size: clamp(31px, 7.2cqw, 44px); }
  #veda-approved .am-benefits { padding: 44px var(--va-pad) 48px; }
  #veda-approved .am-benefits h2 { font-size: 39px; }
  #veda-approved .am-benefits h2 { margin-bottom: 25px; }
  #veda-approved .am-benefit-list { grid-template-columns: 1fr; }
  #veda-approved .am-benefit-list li { font-size: 24px; padding-block: 21px; gap: 17px; }
}
@media (max-width: 400px) {
  #veda-approved .am-hero h1 { font-size: 43px; }
  #veda-approved .am-product-stage { height: 300px; }
  #veda-approved .am-hero-lead { font-size: 21px; }
}
/* Supplied 1920 × 1080 diagram, preserved without cropping or recompression. */
#veda-approved .am-scheme { max-width: 1966px; margin: 0; padding: 22px; border: 1px solid #d1dbde; border-radius: 16px; background: #fff; }
#veda-approved .am-scheme a { display: block; position: relative; width: 100%; cursor: zoom-in; }
#veda-approved .am-scheme img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
#veda-approved .am-scheme a::after { content: ""; position: absolute; top: 0; right: 0; width: 42px; height: 42px; border: 1px solid #d6e0e3; border-radius: 8px; background: #f4f7f6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23314c58' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M7 6h11v11'/%3E%3C/svg%3E") center / 24px no-repeat; }
#veda-approved .am-scheme a:hover::after { border-color: var(--va-red); background: var(--va-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 18 18 6M7 6h11v11'/%3E%3C/svg%3E") center / 24px no-repeat; }
#veda-approved .am-scheme-dialog { width: min(1440px, calc(100vw - 24px)); max-width: calc(100vw - 24px); height: 90vh; height: 90dvh; max-height: 95vh; max-height: 95dvh; margin: auto; padding: 0; border: 0; border-radius: 12px; background: #f4f7f6; color: #0c141a; }
#veda-approved .am-scheme-dialog[open] { display: flex; flex-direction: column; }
#veda-approved .am-scheme-dialog::backdrop { background: #071019bd; }
#veda-approved .am-scheme-toolbar { display: flex; flex: 0 0 auto; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 20px; border-bottom: 1px solid #d6e0e3; }
#veda-approved .am-scheme-toolbar h3 { font-size: 18px; font-weight: 700; line-height: 1.2; }
#veda-approved .am-scheme-actions { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
#veda-approved .am-scheme-toolbar button { min-height: 42px; padding: 10px 16px; border: 1px solid #b6c5cb; border-radius: 6px; background: #fff; color: #284550; font: 700 14px/1.2 "VEDA Sans", Arial, sans-serif; cursor: pointer; }
#veda-approved .am-scheme-toolbar button:hover { border-color: #cd080f; color: #cd080f; }
#veda-approved .am-scheme-toolbar button:focus-visible { outline: 3px solid #008c99; outline-offset: 3px; }
#veda-approved .am-scheme-viewport { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px; background: #e8edef; overscroll-behavior: contain; }
#veda-approved .am-scheme-viewport img { display: block; width: 100%; min-width: 0; max-width: none; height: auto !important; background: #fff; }
#veda-approved .am-scheme-viewport.is-zoomed img { width: 1920px; min-width: 100%; max-width: none; }
body:has(#am-scheme-dialog[open]) { overflow: hidden; }
@media (max-width: 760px) {
  #veda-approved .am-scheme { padding: 8px; border-radius: 10px; }
  #veda-approved .am-scheme a::after { width: 32px; height: 32px; background-size: 21px; }
  #veda-approved .am-scheme-toolbar { padding: 12px; gap: 10px; }
  #veda-approved .am-scheme-toolbar h3 { font-size: 14px; max-width: 110px; }
  #veda-approved .am-scheme-toolbar button { font-size: 12px; padding: 10px; }
  #veda-approved .am-scheme-actions { gap: 7px; }
  #veda-approved .am-scheme-viewport { padding: 8px; }
}